Aller au contenu principal
  • Cours pratique
  • Informatique

Formation Svelte : Un framework JavaScript léger et réactif

Demander un devis
Une formatrice accompagne deux participants penchés sur leurs notes, en salle de formation
Durée
3 jours
Niveau
Intermédiaire
Modalités
Présentiel / Distanciel

Description de la formation Svelte

À mi-chemin entre le compilateur et le framework, Svelte se caractérise par son code simple (HTML et CSS compris), optimisé et facile à déployer sur tous les types d'équipement (mobile, tablette, PC...), même à faible capacité ou faible puissance. Souvent comparé à React et Vue, Svelte propose un code JavaScript encore plus léger et réactif sans DOM virtuel, ce qui explique sa popularité grandissante. Il est notamment utilisé pour développer des applications web rapides et intéressera plus particulièrement les développeurs néophytes.

Atelier en salle : une participante présente des notes au tableau

Objectifs pédagogiques

Concrètement, à l'issue de cette formation Svelte, vous serez en mesure de :

  • Connaître la syntaxe de base de Svelte
  • Savoir mettre en oeuvre les principes de réactivité
  • Comprendre les différents types de composants
  • Savoir utiliser les bindings et les formulaires
  • Savoir gérer les états et les données
  • Connaître les bases de l'animation
  • Savoir gérer les interactions réseau
  • Comprendre le routage et le rendu côté serveur
  • Être capable de déployer une application Svelte

Objectifs opérationnels

Savoir exploiter la légèreté et la réactivité de Svelte pour développer une application JavaScript performante.

Programme

Contenu du cours

Introduction à Svelte

Pourquoi Svelte ?
Créer une première application
Un peu de code Svelte

Svelte : Syntaxe de base

Les accolades et la syntaxe centrale
Les variables réactives
Lier les propriétés
Composants multiples
Composants et Communication
Propriétés auto-extensibles
Sortie HTML
Classes CSS dynamiques

Contrôles de flux avec Svelte

Conditions et alternatives
Listes et itérateurs
Listes et Clés

La réactivité selon Svelte

Mise à jour immuable de tableaux et objets
Modificateurs et évènements
Fonctions en ligne

Les composants de Svelte

Les types de composants
Communication des composants
Transfert d'évènement
Émettre des évènements personnalisés
Extraire les données d'un évènement
Les slots
Cycle de vie et hooks

Bindings et forms de Svelte

Binding bi-directionnel
Checkbox et bouton Radio
Listes déroulantes SELECT
Références d'élément et de composant
Validation de champ et de formulaire

Gestion d'état et de données

Créer et utiliser un Store
Composants d'état et de présentation
Gérer les souscriptions
Stores personnalisés

Animations et transitions

Store et valeurs d'animation
Transitions (in et out)
Animation d'éléments passifs

Concepts avancés

Interactions Réseau : HTTP et Rest API
Composants dynamiques et récursifs
Routage et rendu avec Sapper
Déploiement

Programme mis à jour le 24/06/2025

Formations liées