Grâce à cette formation Svelte avancé, vous apprendrez à enrichir vos applications Svelte en utilisant ses fonctionnalités avancées telles que le contexte, les transitions ou encore les éléments spéciaux afin de produire des interfaces complexes simplement.

Cette formation Svelte avancé s'adresse aux développeur·ses utilisant déjà Svelte régulièrement, souhaitant explorer les fonctionnalités approfondies de ce framework .

Grâce à l'enrichissement d'une application pokedex, vous mettrez immédiatement en pratique les notions abordées : de l’amélioration du système d’inventaire à l’ajout d’une liste d’objectifs, en passant par l’ajout de transitions pour rendre vos interfaces plus dynamiques. À l'issue de la formation, l'application réalisée sera opérationnelle et pourra être utilisée comme modèle pour des projets à venir.

---

Vous débutez avec Svelte ?

Notre formation Svelte est faite pour vous !

Si au contraire, vous maîtrisez déjà Svelte, devenez un expert dans l'intégration de fonctionnalités avancées telles que le routage ou encore la gestion de données dans vos applications Svelte, grâce à notre formation Sveltekit !

Les 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

Pré-requis

• Développer depuis au moins 1 an avec Svelte
• Être autonome dans la lecture et l'écriture de Javascript
• Être à l'aise avec les méthodes fonctionnelles des tableaux (.map, .filter, ...)
• Être à l'aise avec l'asynchrone (Promesses, async/await, ...)
• Être à l'aise avec les modules ESM (import/export)
• Disposer de Git, Node 16+, un IDE (VSCode, Atom, ...), un navigateur moderne (Chrome ou Firefox)
• Avoir les droits d'administration sur votre machine
• Ordinateur portable à apporter

Le programme de la formation Svelte Avancé

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 <svelte:fragment>
- Se référer au composant actuel en utilisant <svelte:self>
- Modifier dynamiquement un élément grâce à <svelte:element>
- Afficher des composants dynamiquement avec <svelte:component>
- 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

Le(s) formateur(s)

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

• une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• de nombreux clients qui nous font confiance depuis des années
• un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
• 122 formations au catalogue, 1604 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
• la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation