Les chapitres — Svelte.js
Parcours progressif, chaque chapitre s’appuie sur le précédent. Cochez ceux que vous avez terminés.
Introduction & installation
Comprendre l’approche compilateur de Svelte et démarrer son premier projet.
- Qu’est-ce que Svelte ?
- Créer un projet
- Composants .svelte
- Cas concret : ma première page réactive
Runes & réactivité
Les blocs de base de Svelte 5 : $state, $derived et $effect.
- $state (état)
- $derived (valeurs calculées)
- $effect (effets)
- Cas concret : calculatrice d’abonnement
Composants, props & events
Décomposer l’interface en blocs réutilisables avec $props et les slots.
- $props (les entrées)
- Utiliser un composant
- Events & slots
- Cas concret : catalogue avec carte produit
SvelteKit & rendu
Passer à la version full-stack de Svelte : routing, load et rendu serveur.
- SvelteKit, pourquoi ?
- Les load functions
- Adapter la navigation
- Cas concret : blog miniature
Snippets & rendu réutilisable
Réutiliser des fragments de template sans composant supplémentaire.
- Déclarer et afficher un snippet
- Snippets avec paramètres
- Passer des snippets aux enfants
- $bindable : liaison bidirectionnelle
- Cas concret : deux équipes, un seul badge
Transitions & animations
Donner vie à l’interface avec svelte/transition et svelte/motion.
- transition, in et out
- svelte/motion : spring & tweened
- animate:flip pour les listes
- Cas concret : galerie filtrée animée
Données asynchrones
Charger des données à distance et gérer les états d’attente et d’erreur.
- Le bloc {#await}
- Endpoints serveur (+server.ts)
- Charger les données côté serveur
- Cas concret : fil d’actualités robuste
Projet : une page web en composants
Tout assembler : une petite boutique avec recherche, cartes et panier.
- Découper la page
- Recherche avec $bindable
- Filtre calculé avec $derived
- Carte produit vivante
- Cas concret : module panier complet
State management
Partager l’état entre composants avec les runes et svelte/store.
- L’état partagé avec les runes
- Les stores classiques (svelte/store)
- Les stores de SvelteKit
- Cas concret : compteur partagé entre deux écrans
Mini-cas concrets : avec ou sans TypeScript
Les mêmes mini-cas — recherche et formulaire — écrits en runes sans TypeScript puis avec lang="ts".
- Le cas : recherche dans une liste
- Le cas : un formulaire d’inscription
- Le cas : trier la liste
- Le cas : supprimer un élément
- Le cas : une to-do list
- Le cas : un panier réactif
- Le cas : paginer une galerie
- Ce que TS apporte à Svelte
Objets, JSON & données structurées
Manipuler des objets réactifs, copier, sérialiser en JSON et typer les données partagées.
- Des objets réactifs avec $state
- Destructuration, copie et immutabilité
- JSON : sérialiser et parser
- JS vs TypeScript : un objet partagé typé
- Cas concret : profil réactif exporté en JSON
localStorage, sessionStorage & cookies
Stocker l’état entre deux visites ou le temps d’un onglet, et partager des cookies.
- localStorage : conserver après la fermeture
- sessionStorage : vivre le temps de l’onglet
- Cookies : l’histoire plus ancienne
- Réagir aux changements : l’événement storage
- JS vs TypeScript : une clé typée
- Cas concret : thème nuit/jour persisté
Mini-cas : persistance des données (JS vs TS)
Les mêmes cas — panier, brouillon, préférences, cookies, historique — avec et sans TypeScript.
- Le cas : panier persisté
- Le cas : brouillon de formulaire
- Le cas : préférences affichées
- Le cas : cookie de session
- Le cas : historique de recherches
- Ce que TS apporte à la persistance
Gestion de données front : formulaires, validation & API
Récolter, valider, charger et envoyer des données depuis le navigateur avec Svelte.
- FormData & formulaires riches
- Valider côté client
- Charger des données : $state + fetch
- Envoyer des données vers une API
- JS vs TypeScript : données cohérentes
- Cas concret : inscription + profil persisté
Projet : catalogue avec panier persisté
Assembler toutes les notions : catalogue filtré, panier dans localStorage, cookie de session, en JS puis en TS.
- Le cahier des charges
- Stocker le panier dans localStorage
- Suivre la session avec un cookie
- Synchroniser le badge du panier
- JS puis TS : deux versions côte à côte
- Bilan : ce qu’on a assemblé
UI interactive : onglets, accordéons, toasts, modale (JS vs TS)
Composants d’interface classiques — onglets, accordéon, toasts, modale et menu — écrits en runes sans TypeScript puis avec lang="ts".
- Le cas : système d’onglets accessibles
- Le cas : accordéon de FAQ
- Le cas : toasts avec svelte/transition
- Le cas : modale avec aria et focus
- Le cas : menu déroulant fermé au clic extérieur
- Ce que TS apporte à l’UI interactive
Événements : clavier, souris, drag & drop (JS vs TS)
Clavier, souris, glisser-déposer et écrans tactiles : chaque entrée utilisateur a son événement, relié sans TypeScript puis sécurisé avec lang="ts".
- keydown : raccourcis et navigation par flèches
- La souris : clic simple, double-clic, coordonnées
- Drag & drop natif (HTML5)
- Pointer events pour le tactile
- stopPropagation et ordre de déclenchement
- Mini-cas : liste réordonnable (clavier + drag)
- Ce que TS apporte aux événements
Formulaires dynamiques : lignes, validation, OTP (JS vs TS)
Ajouter des lignes, valider en direct, guider un code OTP ou mesurer la force d’un mot de passe : des formulaires vivants, avec puis sans lang="ts".
- Lignes dynamiques : ajouter et retirer
- Validation en direct avec $derived
- Champ OTP avec focus progressif
- Jauge de mot de passe agrégée
- Autocomplete filtred
- Mini-cas : bon de commande multi-lignes
- Ce que TS apporte aux formulaires
SvelteKit : endpoints + form actions (JS puis TS)
La partie serveur de SvelteKit : routes +server.ts, validation du body et form actions, écrite en JavaScript puis sécurisée en TypeScript.
- Définir un endpoint GET
- POST : lire le body et créer une ressource
- Les form actions de SvelteKit
- Consommer l’API avec fetch dans un composant
- Mini-cas : CRUD d’articles via l’API
- Ce que TS apporte aux endpoints
Charger et paginer : skeletons, pages, scroll infini (JS vs TS)
Skalletons, pagination précédent/suivant, scroll infini et recherche serveur debouncée : des charges longue durée, avec puis sans lang="ts".
- Les états d’un chargement
- Skeleton loaders
- Pagination précédent / suivant
- Défilement infini avec IntersectionObserver
- Recherche serveur debouncée
- Mini-cas : fil d’articles paginé + scroll infini
- Ce que TS apporte au chargement
Accessibilité : aria, focus, clavier (JS vs TS)
Rôles ARIA, annonces live, piège du focus et navigation au clavier : rendre chaque composant utilisable… avec du typage en plus.
- role, aria-label et aria-live
- Piège du focus dans une modale
- Navigation au clavier avec roving tabindex
- Lien d’évitement (skip link)
- Mini-cas : carrousel accessible au clavier
- Bilan : checklist accessibilité + TS
SEO & performances : meta, prerender, images (JS vs TS)
Meta Open Graph, rendu statique, images dimensionnées et timers mesurables : rendre une application Svelte visible et rapide.
- Meta et Open Graph par page
- Prerender, SSR et CSR
- Images adaptées et dimensionnées
- Chargement différé d’un composant lourd
- Les Core Web Vitals
- Cas concret : blog optimisé SEO
- Bilan : checklist performance
Projet final : kanban interactif complet (JS puis TS)
Toutes les notions assemblées : modèles, drag & drop, CRUD, clavier, accessibilité et persistance — d’abord sans TypeScript, puis avec lang="ts".
- Le cahier des charges
- Modèle de données et runes
- Drag & drop entre colonnes
- CRUD : ajouter, modifier, retirer
- Clavier & accessibilité
- Persistance localStorage
- Version TS : mêmes features typées
- Bilan du projet