Formation Svelte & SvelteKit
Concevez des interfaces rapides et des applications web fullstack modernes avec Svelte et SvelteKit. Maîtrisez Svelte 5, les composants, les runes, la gestion d'état, le routing, le chargement de données, les formulaires, le rendu serveur, les API et le déploiement.
Développer autrement avec Svelte et SvelteKit
Svelte est un framework d'interface utilisateur reposant sur une approche compilée. Une partie importante du travail est effectuée lors de la construction de l'application, permettant de générer un code JavaScript optimisé pour son exécution dans le navigateur.
SvelteKit complète Svelte en fournissant l'architecture nécessaire à la création d'applications web complètes : routing basé sur les fichiers, rendu serveur, chargement de données, formulaires, endpoints serveur et stratégies de déploiement.
Cette formation couvre les fondamentaux de Svelte 5, les nouveaux mécanismes de réactivité, la composition des interfaces et la construction progressive d'une véritable application SvelteKit.
L'objectif est de permettre au participant de réaliser des applications rapides, maintenables et accessibles, allant d'une interface frontend interactive jusqu'à une application fullstack déployée en production.
Les compétences visées
À l'issue de la formation, le participant sera capable de développer une application moderne avec Svelte, puis de construire sa structure fullstack avec SvelteKit.
Maîtriser Svelte
Créer des composants réutilisables et développer des interfaces réactives.
Exploiter Svelte 5
Utiliser les Runes et les mécanismes modernes de gestion de la réactivité.
Structurer avec SvelteKit
Organiser une application autour du routing, des layouts et des conventions SvelteKit.
Gérer les données
Charger, transformer et transmettre les données entre serveur et interface.
Développer côté serveur
Créer des actions, endpoints et traitements backend directement dans SvelteKit.
Déployer l'application
Optimiser et préparer une application SvelteKit pour la production.
De Svelte 5 à l'application fullstack SvelteKit
Le parcours commence par la maîtrise du modèle de composants et de la réactivité Svelte, puis progresse vers les fonctionnalités applicatives et serveur de SvelteKit.
Découvrir Svelte et son fonctionnement
Comprendre l'approche de Svelte et préparer un environnement de développement moderne.
- Présentation de Svelte
- Positionnement dans l'écosystème JavaScript
- Framework compilé
- Différences avec React, Vue et Angular
- Compilation des composants
- Installation de l'environnement
- Création d'un projet
- Structure du projet
- Serveur de développement
- Outils de développement
Anatomie d'un composant Svelte
Comprendre la structure des fichiers .svelte et créer les premiers composants réutilisables.
- Fichier .svelte
- Structure HTML
- Bloc script
- Bloc style
- Expressions JavaScript
- Interpolation de données
- Attributs dynamiques
- Classes conditionnelles
- Gestion du CSS
- Styles scoped
- Organisation des composants
- Bonnes pratiques de nommage
Réactivité avec les Runes de Svelte 5
Maîtriser le nouveau modèle de réactivité introduit avec Svelte 5.
- Principe des Runes
- $state
- État réactif
- $derived
- Valeurs calculées
- $effect
- Effets réactifs
- Dépendances automatiques
- États dans les objets
- États dans les tableaux
- Organisation de la logique réactive
- Bonnes pratiques avec les Runes
Props et communication entre composants
Faire circuler les informations entre les différents composants d'une interface.
- Découverte de $props()
- Passage de propriétés
- Valeurs par défaut
- Destructuration des props
- Typage des propriétés
- Propriétés optionnelles
- Callbacks
- Communication enfant / parent
- $bindable()
- Liaison bidirectionnelle contrôlée
Conditions, listes et rendu dynamique
Construire des interfaces capables de s'adapter dynamiquement aux données.
- Bloc {#if}
- Conditions alternatives
- {:else}
- Boucles {#each}
- Clés de liste
- Index de boucle
- Listes dynamiques
- Bloc {#await}
- Gestion des Promises
- États de chargement
- États d'erreur
- Rendu conditionnel complexe
Événements et interactions utilisateur
Transformer une interface statique en application interactive.
- Gestion des événements
- Événement click
- Événements clavier
- Événements de formulaire
- Objet Event
- Fonctions de gestion
- Passage de paramètres
- preventDefault
- Interactions conditionnelles
- Accessibilité des interactions
Bindings et formulaires Svelte
Concevoir des formulaires réactifs et synchroniser les champs avec les données de l'application.
- bind:value
- Inputs texte
- Champs numériques
- Checkbox
- Radio buttons
- Select
- Binding de groupes
- Validation côté client
- Messages d'erreur
- États de soumission
Snippets et composition des interfaces
Exploiter les mécanismes modernes de composition introduits dans Svelte 5.
- Présentation des Snippets
- Déclaration d'un snippet
- Rendu avec @render
- Passage de contenu
- Paramètres de snippets
- Réutilisation d'interfaces
- Composition de composants
- Snippets et propriétés
- Migration depuis les slots
- Patterns de composition
Gestion d'état et partage des données
Organiser les données utilisées par plusieurs composants d'une application.
- État local
- État partagé
- Fichiers .svelte.js
- Fichiers .svelte.ts
- États réactifs partagés
- Stores Svelte
- Writable stores
- Readable stores
- Derived stores
- Choisir Runes ou Stores
Introduction à SvelteKit
Passer d'une interface Svelte à une véritable application web structurée.
- Rôle de SvelteKit
- Création d'un projet SvelteKit
- Organisation des dossiers
- Répertoire src
- Répertoire routes
- Fichiers +page.svelte
- Fichiers +layout.svelte
- Fichiers +page.js / .ts
- Fichiers +page.server.js / .ts
- Conventions de fichiers
Routing avec SvelteKit
Construire l'arborescence d'une application avec le système de routes basé sur les fichiers.
- Routage basé sur les fichiers
- Routes statiques
- Routes dynamiques
- Paramètres d'URL
- Routes imbriquées
- Layouts
- Layouts imbriqués
- Navigation interne
- Navigation programmatique
- Gestion des erreurs de navigation
- Pages 404
- Organisation des routes métier
Chargement des données
Alimenter les pages avec des données locales, distantes ou issues du serveur.
- Fonction load
- Universal load
- Server load
- Données de page
- Données de layout
- Paramètres de route
- Utilisation de fetch
- Appels d'API
- Gestion des erreurs
- Redirections
- Chargements parallèles
- Optimisation des requêtes
Form Actions et traitement côté serveur
Gérer les formulaires directement côté serveur avec les mécanismes intégrés de SvelteKit.
- Fichier +page.server
- Form Actions
- Action par défaut
- Actions nommées
- Lecture de FormData
- Validation serveur
- Gestion des erreurs
- Retour des données
- Redirections
- Progressive Enhancement
- Amélioration avec JavaScript
- Expérience utilisateur après soumission
Endpoints et API avec SvelteKit
Créer une logique serveur et des endpoints directement dans le projet SvelteKit.
- Fichiers +server.js / .ts
- Endpoints HTTP
- GET
- POST
- PUT et PATCH
- DELETE
- Réponses JSON
- Codes de statut HTTP
- Validation des requêtes
- Gestion des erreurs
- API internes
- Organisation des endpoints
SSR, CSR et pré-rendu
Comprendre les différents modes de rendu proposés par SvelteKit et choisir la stratégie adaptée au projet.
- Server-Side Rendering
- Client-Side Rendering
- Hydratation
- Pré-rendu statique
- Rendering hybride
- Configuration SSR
- Configuration CSR
- Configuration prerender
- Choix selon le projet
- Impacts sur les performances
- Impacts SEO
- Architecture hybride
Authentification et sessions
Mettre en place un espace utilisateur et protéger certaines pages de l'application.
- Principes d'authentification
- Formulaire de connexion
- Traitement serveur
- Cookies
- Sessions
- Gestion de l'utilisateur connecté
- Protection des routes
- Déconnexion
- Gestion des rôles
- Bonnes pratiques de sécurité
Hooks et logique serveur globale
Intervenir dans le cycle global des requêtes SvelteKit et centraliser certaines opérations.
- hooks.server
- Fonction handle
- Interception des requêtes
- Gestion des sessions
- Données locals
- Authentification globale
- Headers HTTP
- Traitements transverses
- Gestion centralisée
- Bonnes pratiques
SEO, métadonnées et accessibilité
Construire une application visible par les moteurs de recherche et utilisable par le plus grand nombre.
- Gestion du document head
- Titres dynamiques
- Meta description
- Canonical
- Métadonnées sociales
- Structure HTML sémantique
- SSR et SEO
- Accessibilité clavier
- Labels et formulaires
- Attributs ARIA
- Contrastes
- Bonnes pratiques d'accessibilité
Animations, transitions et expérience utilisateur
Utiliser les capacités natives de Svelte pour créer des interactions fluides sans complexifier inutilement l'application.
- Transitions Svelte
- transition
- in et out
- Animations conditionnelles
- Transitions personnalisées
- Animation de listes
- Motion
- États de chargement
- Feedback utilisateur
- Respect de prefers-reduced-motion
Performance et optimisation
Réduire le coût du chargement et améliorer l'expérience réelle des utilisateurs.
- Architecture légère Svelte
- Analyse du bundle
- Chargement différé
- Lazy loading
- Optimisation des images
- Préchargement des routes
- Optimisation des requêtes
- Réduction du JavaScript client
- Choix du mode de rendu
- Cache
- Web Performance
- Core Web Vitals
Tests d'une application Svelte
Sécuriser les évolutions de l'application grâce à une stratégie de tests adaptée.
- Principes du test frontend
- Tests unitaires
- Vitest
- Tests des fonctions
- Tests des composants
- Simulation d'interactions
- Tests de formulaires
- Tests des états
- Tests d'intégration
- Tests End-to-End
- Scénarios utilisateurs
- Couverture de code
Build et déploiement SvelteKit
Préparer l'application pour son exploitation dans différents environnements de production.
- Build de production
- Variables d'environnement
- Introduction aux adapters
- Adapter Node
- Adapter Static
- Déploiement Vercel
- Déploiement Netlify
- Déploiement Cloudflare
- Application Node autonome
- Configuration production
- Logs et surveillance
- Maintenance de l'application
Développer une application web complète avec SvelteKit
Tout au long de la formation, les participants développent progressivement une véritable application SvelteKit. Le projet associe interface réactive, routing, données, formulaires, logique serveur, authentification et mise en production.
Ce que le participant saura réaliser
Développement Svelte
- Créer des composants Svelte 5.
- Utiliser les Runes.
- Gérer les événements et bindings.
- Partager les données entre composants.
- Construire une interface réactive.
Architecture SvelteKit
- Structurer les routes.
- Créer des layouts.
- Charger des données.
- Gérer les erreurs.
- Choisir une stratégie de rendu.
Développement fullstack
- Traiter les formulaires côté serveur.
- Créer des endpoints API.
- Exploiter les cookies et sessions.
- Protéger des routes.
- Mettre en place une authentification.
Production et qualité
- Optimiser les performances.
- Améliorer le SEO.
- Respecter les principes d'accessibilité.
- Tester l'application.
- Déployer SvelteKit en production.
Une progression concrète et orientée développement
Chaque mécanisme Svelte ou SvelteKit est introduit à travers une démonstration puis appliqué directement dans des exercices et dans le projet fil rouge.
Apports techniques
Compréhension de Svelte, SvelteKit, de la réactivité et du rendu web moderne.
Démonstrations
Développement commenté des fonctionnalités et analyse des mécanismes utilisés.
Exercices pratiques
Création de composants, pages, routes et fonctionnalités applicatives.
Projet fullstack
Construction progressive d'une application SvelteKit prête pour la production.
Connaissances recommandées
- Maîtriser les fondamentaux HTML5.
- Connaître CSS et le responsive design.
- Maîtriser les bases de JavaScript moderne.
- Connaître les fonctions, objets et tableaux.
- Comprendre les Promises et async / await.
- Des connaissances TypeScript constituent un avantage mais ne sont pas obligatoires.
À qui s'adresse cette formation ?
- Développeurs frontend.
- Développeurs JavaScript.
- Développeurs TypeScript.
- Développeurs fullstack.
- Intégrateurs web disposant de solides connaissances JavaScript.
- Professionnels souhaitant découvrir une alternative moderne à React ou Vue.
Modalités pédagogiques
Progression structurée
Le parcours démarre par Svelte avant d'évoluer progressivement vers SvelteKit et le développement fullstack.
Exercices techniques
Les composants, routes, formulaires et fonctionnalités serveur sont pratiqués directement pendant la formation.
Projet applicatif
Le projet fil rouge permet de réunir toutes les compétences dans une application cohérente et fonctionnelle.
Développez des applications web modernes avec Svelte & SvelteKit
Vous souhaitez intégrer Svelte et SvelteKit dans vos compétences, former votre équipe ou construire un parcours adapté à votre projet ? Échangez avec Instants Web Formation afin d'identifier la solution de formation adaptée.
Trouvez la formation adaptée à votre niveau réel.
Quelques minutes suffisent pour identifier vos acquis, repérer vos axes de progression et choisir un parcours de formation réellement adapté à vos compétences et à vos objectifs professionnels.