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 cette formation pratique de 3 jours, vous apprendrez à construire votre première application Svelte en créant vos propres composants Svelte.

Cet apprentissage 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.

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.

Comme tous nos formateurs, Romain Crestey est un développeur curieux et passionné qui prendra le temps de partager son expérience professionnelle lors des cours et durant les moments d’échanges informels prévus lors de la formation.

« (...) le formateur répondait bien à toutes nos questions. J'ai beaucoup aimé faire du sveltejs.» Stéphanie Loux-Durand, Radio France

Pour approfondir vos connaissances Svelte, jetez un œil à nos formations Svelte avancé et Sveltekit.

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)

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...
• 96 formations au catalogue, 1385 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