Svelte - niveau avancé

Objectifs

-Maîtriser la composition de composants
-Maîtriser les stores
-Maîtriser les liaisons (bindings) avancées
-Comprendre le contexte
-Créer des transitions
-Savoir animer des éléments

Programme de la formation

Jour 1
Rappels Svelte
- Comprendre la réactivité de Svelte
- Gérer les évènements
- Revoir le principe des stores
- Utiliser les slots
- Lier variables et éléments
Stores avancés
- Utiliser des stores dérivés pour obtenir des valeurs calculées en fonction d'autres stores
- Créer des stores personnalisés pour gérer des données spécifiques à l'application
- Réagir aux premiers et derniers abonnés d'un store
Composition avancée
- Utiliser des slots nommés pour enrichir la flexibilité d'un composant
- Comprendre comment transmettre des données d'un slot enfant à un slot parent grâce aux slots props pour augmenter l'interactivité
Éléments spéciaux
- Créer des groupes d'éléments sans ajouter de balises au DOM avec ``
- Se référer au composant actuel en utilisant ``
- Modifier dynamiquement un élément grâce à ``
- Afficher des composants dynamiquement avec ``
- Aborder d'autres éléments spéciaux pour améliorer une application
Mises en pratique
- Prendre en main de l'application existante*
- Améliorer le système d'inventaire à l'aide de stores dérivés et personnalisés*
- Réutiliser le composant de Slider pour d'autres types de situations avec les slots props*
- Utilisation d'éléments spéciaux pour enrichir l'application existante*

Jour 2
Liaisons avancées
- Manipuler les éléments media tels que l'image et la vidéo
- Obtenir les dimensions des éléments pour une gestion plus précise de l'interface
- Comprendre les particularités de `#each` pour l'itération de collections
- Référencer un élément pour une interaction plus directe
- Référencer une instance pour une communication efficace
Actions
- Mutualiser des fonctionnalités d'élément entre composants
API de contexte
- Comprendre le besoin de contexte pour partager des données entre composants
- Utiliser le contexte
Context module
- Partager une logique entre les instances d'un même composant
Transitions
- Définir des transitions personnalisées pour des effets visuels originaux
- Comprendre l'animation FLIP (First, Last, Invert, Play) pour des transitions fluides.
- Utiliser les transitions globales pour des animations cohérentes au sein de l'application
Mouvement
- Utiliser la fonction d'interpolation `tween` pour animer des éléments
- Utiliser la fonction `spring` pour animer des éléments de manière "élastique"
Mises en pratique
- Ajouter une liste d'objectifs à remplir
- Implémenter un système simple de traduction grâce au contexte*
- Ajouter des transitions pour rendre certaines interfaces plus dynamiques*
- Animer les Pokémons pour rendre la chasse plus difficile*

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique