Svelte est le framework JavaScript axé sur la compilation, qui transforme le code en JavaScript optimisé lors de la construction. Il privilégie la réactivité en générant automatiquement les mises à jour d'interface utilisateur en fonction des données pour garantir des performances élevées et un code plus léger.

Lors de cet enseignement pratique 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 .
Pour les développeurs·euses front-end débutant avec Svelte, la formation Svelte est faite pour vous. Pour celles et ceux voulant découvrir Svelte autrement, jetez un oeil à notre formation Sveltekit

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.

Toutes nos formations étant limitées à 6 participant·e·s par session, vous aurez donc un contact privilégié avec votre formateur, Romain Crestey, développeur curieux et passionné, enthousiaste de partager son expérience professionnelle lors des cours et durant les moments d’échanges informels au programme de cette formation.

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)

Romain CRESTEY

Romain est développeur web senior pour RadioFrance, et formateur Svelte et JS pour différents organismes.

Il fait également partie des administrateurs de la communauté Discord Svelte francophone, et maintient le projet de traduction de la documentation en français de Svelte.

Fan de Svelte, Typescript et NodeJs, il a également passé plusieurs années à développer des applications React.

Voir son profil détaillé

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...
• 103 formations au catalogue, 1466 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