Formation Svelte Avancé

Description

Cette formation Svelte avancé vous permettra d’aller au‑delà des bases pour construire des interfaces riches, performantes et maintenables.

Pendant 2 jours, vous apprendrez à :

• maîtriser la réactivité, les liaisons et la gestion d’événements
• créer et composer avec les #snippets
• concevoir des états globaux sécurisés
• utiliser les éléments spéciaux de Svelte
• partager des données via l'API de contexte
• utiliser le script module
• factoriser des comportements avec les attachements
• animer avec transitions, FLIP, tween et spring

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.

🇺🇸 Cette formation est aussi disponible en anglais

Public

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 .

Les objectifs

• Maîtriser la composition de composants
• Maîtriser les états globaux, et les risques associés
• 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 : Réactivité et états globaux avec Svelte

• Rappels Svelte
  • Comprendre la réactivité de Svelte
  • Gérer les évènements
  • Revoir les états globaux
  • Lier variables et éléments
• API de contexte
  • Comprendre le besoin de contexte pour partager des données entre composants
  • Utiliser le contexte
• États globaux avancés
  • Utiliser des classes pour créer des états globaux personnalisés
  • Combiner état global et contexte pour sécuriser l'application
• États spéciaux
  • Utiliser les classes d'état intégrées, comme SvelteDate ou MediaQuery
• Context module
  • Partager une logique entre les instances d'un même composant
• [Bonus] Stores
  • Comprendre la différence avec les $state
  • Stores de base
  • Stores personnalisés

Mises en pratique
- Prendre en main de l'application existante
- Améliorer le système d'inventaire à l'aide d'états globaux personnalisés
- Réutiliser le composant de Slider pour d'autres types de situations avec les snippets
- Utilisation d'éléments spéciaux pour enrichir l’application existante

Jour 2 : Composition, actions et animations dynamiques

• Éléments spéciaux
  • Interagir avec le body, la window, le head
• Composition
  • Utiliser des #snippet pour enrichir la flexibilité d'un composant
  • Passer les #snippet en tant que props
• Liaisons avancées
  • 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
• Attachements
  • Mutualiser des fonctionnalités d'élément entre composants
• 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 les classes Tween et Spring pour animer des éléments

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

Télécharger le programme

Formations associées

• 

  Vite

  1 jour

Formateur

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.

FAQ

8 raisons de participer à une formation Human Coders

• Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 1719 sessions réalisées). 99% des participants se disent satisfaits de nos formations
• Approche pédagogique unique : Des formations en petit groupe, des formateurs passionnés et expérimentés, de véritables workshops... (Plus d'infos sur notre manifeste)
• Catalogue de formations complet : 184 formations au catalogue, de quoi vous accompagner sur tout vos projets
• Écosystème dynamique : Nous accompagnons les dev depuis 13 ans avec des initiatives comme Human Coders News, les Human Talks, le podcast ou encore notre serveur Discord
• Financement facilité : Organisme certifié Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• Références clients prestigieuses : De nombreux clients qui nous font confiance depuis des années
• Accompagnement sur mesure : Nous vous proposons un accompagnement personnalisé par nos consultants pour vous aider dans vos projets au-delà de la formation
• Valorisation professionnelle : Remise d'un diplôme, d'une attestation et d'une certification, suivant les formations effectuées, que vous pourrez afficher sur vos CV et réseaux sociaux