Grâce à cette formation Svelte, vous apprendrez à construire vos applications Svelte en développant vos propres composants Svelte.

Grâce à la création d'une application pokedex, vous mettrez immédiatement en pratique les notions abordées : de la création de l’application Svelte à la gestion des événements, en passant par la création de formulaires et l’ajout de transitions et d’interactions. À 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.

Cette formation Svelte s'adresse aux développeur·ses expérimentés·es sur des framework front-end tels que React, Vue ou Angular, souhaitant explorer une nouvelle voie dans l'applicatif web client.

---

Vous êtes déjà à l'aise avec les bases de Svelte ?

La formation Svelte avancé vous permettra de produire simplement des interfaces.

De plus, la formation Sveltekit vous donnera les clés pour intégrer dans vos applications Svelte des fonctionnalités avancées telles que le routage ou encore la gestion de données.

Les objectifs

• Comprendre comment Svelte se démarque des autres framework
• Utiliser la syntaxe Svelte pour créer des composants
• Comprendre la réactivité de Svelte
• Maîtriser les stores
• Construire une application simple

Pré-requis

• Ê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

Jour 1 : Découvrir Svelte

Rappels JS
- Définir les variables avec const et let.
- Déclarer les variables avec la déstructuration.
- Manipuler les tableaux avec .map et .filter.
- Utiliser async et await pour gérer les opérations asynchrones.

Premiers pas
- Comprendre l’histoire du web front-end.
- Aborder la définition d’un framework front-end.
- Découvrir les particularités de Svelte.
- Lister les ressources utiles.
- Se lancer avec Svelte.

Écrire du Svelte Simple
- Structurer des fichiers .svelte.
- Ecrire des blocs de compilation #if, #each, #await.
- Particulariser un composant en utilisant les props.
- Styliser un composant en utilisant le bloc <style>.

Mises en pratique :
-Configurer un nouveau projet Svelte
-Créer les fichiers nécessaires pour les composants
-Mettre en place la structure de base de l'interface utilisateur
-Appliquer des styles CSS pour rendre l'interface attrayante et cohérente

Jour 2 : Approfondir Svelte

Réactivité
- Rendre un composant dynamique avec le state.
- Réagir aux changements d’état.
- Comprendre le cas particulier des tableaux et objets pour la réactivité Svelte.

Évènements
- Utiliser les évènements natifs et les modificateurs.
- Créer des évènements personnalisés au sein d’un composant.
- Transmettre les évènements entre parents et enfants.
- Comprendre quand utiliser les props et quand utiliser les évènements pour communiquer entre composants.

Formulaires
- Lier les valeurs des éléments de formulaire au state.
- Gérer les inputs texte, les checkboxes et les sélecteurs.
- Créer un formulaire complet et gérer la soumission.

Cycle de Vie
- Réagir au montage d'un composant.
- Réagir au démontage d’un composant.
- Comprendre les subtilités du cycle de vie avec tick.

Mises en pratique
- Implémenter des interactions utilisateur dans l'application
- Mettre en place un formulaire interactif
- Intégrer la notion de temps écoulé pour créer des fonctionnalités dynamiques

Jour 3 : Pour aller plus loin avec Svelte

Stores
- Utiliser les stores pour partager globalement des données.
- Comprendre le fonctionnement sous-jacent d’un store Svelte.
- Partager des données sans autoriser les modifications avec les stores en lecture seule.

Composition
- Utiliser les slots pour insérer du contenu flexible dans les composants.
- Utiliser les slots par défaut pour offrir une expérience de composition plus solide.

Transitions
- Ajouter des transitions aux composants pour améliorer l'expérience utilisateur.

Déploiement
- Déployer une application Svelte en production.

Mises en pratique
- Implémenter la gestion d'un inventaire avec des fonctionnalités interactives
- Ajouter des transitions pour rendre l'application plus attrayante visuellement
- Déployer l'application sur la plateforme de déploiement Vercel pour qu'elle soit accessible en ligne

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