Svelte - Développement léger d'applications Web
Qualiopi
Objectifs pédagogiques
A l'issue de cette formation, vous serez capable de :
- Décrire les principaux concepts liés au framework Svelte
- Ecrire une application Svelte à base de différents composants réactifs, la mettre au point et la proposer aux utilisateurs.
Programme de la formation
Jour 1
Présentation de Svelte
- Positionnement face à Vue.js, React et Angular
- Ce qui est nouveau par rapport aux trois autres frameworks
- Le compilateur
- Pour un code simple
- Pour un code très léger et rapide
- Architecture de Svelte
- Les bons cas d'utilisation de Svelte
- Installation de Svelte locale et en ligne
- Présentation de l'utilisation de l'IDE et ses extensions
- VS Code, Svelte for VS Code et Svelte Intellisense
Exemples de travaux pratiques (à titre indicatif)
- Installation de Svelte et découverte du code résultant d'une application simple créée en TP à partir de la CLI
Les bases à connaître
- La syntaxe native à Svelte
- Notion de composant Svelte et cycle de vie
- Création d'un composant
- Incorporation de composants pour une IHM riche
- Réutilisation de composants
- Utilisation des accolades
- Variables dites réactives
- Fonctions ou méthodes dites réactives
- Binding des propriétés
- Contrôle de flux avec Svelte : itératives et alternatives
Exemple de travaux pratiques (à titre indicatif)
- Création d'une application de base incluant une IHM réalisée à partir de plusieurs Svelte (partie 1)
Jour 2
Les bases à connaître (suite)
- Passage d'informations entre composants
- Les slots
- Répondre aux évènements
- Les hooks
- Gestion des styles, classes et HTML
Exemple de travaux pratiques (à titre indicatif)
- Création d'une application de base incluant une IHM réalisée à partir de plusieurs Svelte (partie 2)
Formulaires et liaison de données (binding)
- Le binding bi-directionnel
- Gestion des composants de type bouton radio, checkbox, textarea...
- Gestion des listes déroulantes de type SELECT
- Validation de champs et de formulaire
Exemples de travaux pratiques (à titre indicatif)
- Création et gestion par Svelte d'une interface graphique composée de plusieurs zones de saisie
Jour 3
Gestion d'état et des données
- Utilité des stores
- Créer et utiliser un store
- Les stores en lecture et en mise à jour
- Composants d'état et de présentation
- Gérer les souscriptions
- Stores personnalisés
Exemple de travaux pratiques (à titre indicatif)
- Ajout des données de l'interface graphique préalablement écrite dans un store nouvellement créé dans l'application
Transitions et animations
- Fonctionnement des transitions
- Store et valeurs d'animation
- Différents types de transitions, en "in" et en "out"
- Animation d'éléments
Exemple de travaux pratiques (à titre indicatif)
- Modification de l'état d'un objet visuel améliorant l'IHM par l'application d'une transition
Pour aller plus loin
- Appeler des API REST
- Différentes sortes de routage
- L'apport du framework Sapper
Exemple de travaux pratiques (à titre indicatif)
- Codage de l'appel d'un API REST externe
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
Modalités d’évaluation des acquis
- En cours de formation, par des études de cas ou des travaux pratiques
- Et, en fin de formation, par un questionnaire d'auto-évaluation

Proposé par
M2I
"Un leadership dans le domaine de la formation"
À partir de
2010 €
Durée
21h en 3 jours
Localisation
Partout en France

Proposé par
M2I
À partir de
2010 €
