Svelte.js — Cours

Initiation progressive

Apprendre Svelte.js pas à pas

23 chapitres pratiques pour maîtriser la réactivité de Svelte 5 : de la première commande npx sv create jusqu’aux runes, composants, SvelteKit et au state management.

Commencer le cours Voir le chapitre 1
✓ Une syntaxe simple, proche du HTML
✓ Aucun virtual DOM : le compilateur optimise tout
✓ La réactivité granulaire avec les runes ($state)
✓ Des composants réutilisables avec $props et les slots
✓ Des mini-cas UI interactifs : clavier, drag & drop, formulaires dynamiques
✓ SvelteKit : endpoints & actions, skeletons de chargement
✓ Accessibilité, SEO et performances dans Svelte & SvelteKit
✓ Un projet kanban fil rouge final
✓ Des mini-cas concrets (recherche, formulaire) avec et sans TypeScript

Au programme

1Introduction & installationComprendre l’approche compilateur de Svelte et démarrer son premier projet.~20 min2Runes & réactivitéLes blocs de base de Svelte 5 : $state, $derived et $effect.~30 min3Composants, props & eventsDécomposer l’interface en blocs réutilisables avec $props et les slots.~25 min4SvelteKit & renduPasser à la version full-stack de Svelte : routing, load et rendu serveur.~20 min5Snippets & rendu réutilisableRéutiliser des fragments de template sans composant supplémentaire.~25 min6Transitions & animationsDonner vie à l’interface avec svelte/transition et svelte/motion.~30 min7Données asynchronesCharger des données à distance et gérer les états d’attente et d’erreur.~30 min8Projet : une page web en composantsTout assembler : une petite boutique avec recherche, cartes et panier.~45 min9State managementPartager l’état entre composants avec les runes et svelte/store.~30 min10Mini-cas concrets : avec ou sans TypeScriptLes mêmes mini-cas — recherche et formulaire — écrits en runes sans TypeScript puis avec lang="ts".~40 min11Objets, JSON & données structuréesManipuler des objets réactifs, copier, sérialiser en JSON et typer les données partagées.~30 min12localStorage, sessionStorage & cookiesStocker l’état entre deux visites ou le temps d’un onglet, et partager des cookies.~35 min13Mini-cas : persistance des données (JS vs TS)Les mêmes cas — panier, brouillon, préférences, cookies, historique — avec et sans TypeScript.~40 min14Gestion de données front : formulaires, validation & APIRécolter, valider, charger et envoyer des données depuis le navigateur avec Svelte.~35 min15Projet : catalogue avec panier persistéAssembler toutes les notions : catalogue filtré, panier dans localStorage, cookie de session, en JS puis en TS.~45 min16UI 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".~45 min17É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".~40 min18Formulaires 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".~45 min19SvelteKit : 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.~45 min20Charger 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".~40 min21Accessibilité : 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.~35 min22SEO & 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.~40 min23Projet 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".~60 min

Progression

0 %