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

À 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.

Objectif opérationnel :

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

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

Public :

Ce cours Svelte s'adresse aux développeurs JavaScript front-end cherchant à améliorer la rapidité et la réactivité de leurs applications.

Prérequis :

Pour assister à cette formation Svelte, une maîtrise préalable de JavaScript est indispensable. Vous pouvez l'acquérir en suivant la formation Maîtriser JavaScript (IJSO).
Une connaissance préalable de React et de Vue vous sera également très utile pour mieux comprendre les apports de Svelte comparativement aux deux frameworks cités.

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