Formation Svelte + SvelteKit
Svelte est un framework de composants, comme React ou Vue. Si React est assurément le plus utilisé aujourd'hui, Svelte est très régulièrement cité comme le framework de composants le plus apprécié de l'industrie. SvelteKit est le framework d'application de Svelte. Il vous fournit tous les outils nécessaires pour construire une application web en utilisant des composants construits avec Svelte : routing, chargement de données, stratégies de rendu, gestion des erreurs, etc. Cette formation vous propose de voir toutes les notions Svelte et SvelteKit nécessaires pour construire une application complète avec ces 2 outils. Nous verrons comment créer des pages, comment écrire des composants, comment charger des données, comment rendre nos pages interactives, comment gérer des formulaires, entre autres.
Objectifs pédagogiques
- Être capable de créer ses premiers composants avec Svelte
- Comprendre les concepts de réactivité et d'effets
- Manipuler les Snippets et les transitions / animations
- Pouvoir configurer le routeur SvelteKit
- Manipuler les données depuis ses composants
- Savoir gérer les formulaires
- Connaitre les bases de l'authentification
- Pouvoir déployer son application
Pré-requis
- Connaitre les bases d'HTML
- Savoir mettre en forme à minima CSS
- Maitriser la syntaxe JavaScript
- Avoir utilisé les APIs Web de base (DOM, fetch...)
Public
- Développeurs
- Chefs de projets
Programme
Jour 1
Introduction
- Il était une fois...
- WTF is a framework?
- C'est quoi Svelte ?
- Choisir Svelte ou React ?
- Se lancer avec Svelte
- Quelques liens utiles
- Rappels JavaScript
Bases de SvelteKit
- Structure d'un projet SvelteKit
- Le point d'entrée
- Routing statique
- Layouts basiques
- Informations de page
- Charger les données de page
- Charger les données de layout
- Routing dynamique
- Philosophie de routing
- Pages d'erreur
Jour 2
Syntaxe des composants Svelte
- Concept générique de composant
- Syntaxe de base
- Blocs de logique
- Props
- Directives de classe
- Gérer les évènements
- Warnings d'accessibilité
L'état
- Réactivité
- Gérer l'état
- Réactivité des objects et des tableaux
- Inspecter des variables réactives
- États dérivés
- Réactivité universelle
- Runes
Jour 3
Les effets
- Le cycle de vie
- Utiliser les effets
- Nettoyer les effets
Chargement de données avancé
- Construire une API
- Travailler sur le serveur
- Fonctions `load`
- Chargement asynchrone
Liaisons et consorts
- Flux de données
- Éléments de formulaire
- Bindings de boucle
- Autres bindings
- Directives de style
Jour 4
Formulaires
- Formulaires
- Actions de formulaire
- Validation de formulaire
- Actions nommées
- Amélioration progressive
Routing avancé
- Redirections
- Erreurs
- Validation des routes
- Layouts imbriqués
- S'échapper des layouts
Syntaxe Svelte avancée
- Clés de boucle
- Snippets
- "Snipprops"
- Transitions
- Crossfade
- Animation FLIP
Jour 5
Authentification
- Principes généraux d'authentification
- Utiliser les cookies
- Le problème des états globaux sur le serveur
- Authentifier/autoriser dans un layout ?
- Hooks
Déployer
- Types d'applications et stratégies de rendu
- Options de page
- Builds et déploiements
Vers l'infini et au-delà...
- Aller plus loin avec Svelte
- Aller plus loin avec SvelteKit
- Autres frameworks
Méthodes mobilisées
- Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
- Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
- Un support de cours en version numérique sera remis à chaque participant
Modalités d’évaluation
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Auto-positionnement en amont et aval de la formation
