Svelte 3 - Michel Martin

Le framework JavaScript Svelte permet de créer des applications Web « réactives ». Par son intermédiaire, le DOM se synchronise automatiquement avec les variables de l'application. Il est même possible de synchroniser les variables les unes par rapport aux autres en utilisant des « déclarations réactives ».

Pour créer des applications Svelte, vous devrez écrire du code HTML, CSS et JavaScript. Le code JavaScript sera composé :

• De code JavaScript traditionnel (Vanilla JavaScript).
• De code JavaScript « amélioré », spécifiquement destiné à Svelte.

Après compilation, vous obtiendrez un code optimisé, léger, rapide et directement exécutable dans le navigateur.

Le framework Svelte est souvent comparé à ses aînés, Angular, React et Vue. Contrairement à ces frameworks, pour lesquels la majeure partie du travail est effectuée dans le navigateur, Svelte inclut une étape de compilation qui produit une application Javascript pur (Vanilla JavaScript) optimisée. Il en résulte des performances bien plus élevées que dans les autres frameworks, et une taille des bundles vraiment réduite.

Ce manuel est une introduction au framework Svelte 3 et à son acolyte SvelteKit 1.0, spécialisé dans la création de sites Web SPA. Il s'adresse à tous ceux qui veulent découvrir ce framework très prometteur qui fait et fera parler de lui dans les années à venir. Le manuel est orienté pratique. À travers de très nombreux exemples courts et ciblés, vous allez découvrir toutes les ficelles de Svelte et SvelteKit. Pour être à l'aise avec ce qui va être abordé dans ce manuel, vous devez avoir une première expérience de codage en JavaScript. Nous ne reviendrons pas sur les instructions basiques de ce langage.

Les codes sources du manuel sont librement téléchargeables, utilisables et modifiables.

Voici un avant-goût de ce qui vous attend :

Introduction et premiers pas
Préparation de l'environnement de développement
Les extensions utiles dans VS Code
Le site Officiel de Svelte
Premiers pas avec Svelte via le REPL
Création d'un premier projet Svelte avec Vite

La syntaxe de base de Svelte
Création d'un squelette Svelte standard avec Vite
Les interpolations
Variables réactives
Data binding
Plusieurs composants dans une application Svelte
Passage de données d'un composant à un autre avec des props
Simplification de l'écriture des props et attributs dans les balises
Utilisation de l'opérateur spread (...) dans les props
Passage de fonctions d'un composant à un autre
Interpolations en texte brut ou en HTML
Classes conditionnelles
Conditions et boucles

Les composants
Première approche des composants
Encore plus de composants
Passer des données d'un enfant au parent avec des Custom Events

Les slots
Slots simples
Slots nommés
Slot par défaut
Affichage conditionnel de slots
Utilisation conjointe de slots et de props dans une application Svelte

Lifecycle Hooks
Interfaçage d'une API REST dans le hook onMount
Utilisation du bloc {#await}
Interfaçage de la base de données The Movie Database

Gestion des formulaires

Les stores de Svelte
Un premier exemple
Challenge
Éviter les fuites mémoire
Faciliter l'accès au store
Ajout d'une fonctionnalité pour supprimer un livre
Déplacement de la logique programmatique dans le store
Readable stores

Animations et transitions
Animation de nombres avec le module motion
Action sur une propriété CSS inline
Le store Spring
Animations d'éléments HTML avec le module transition
Capturer le début et la fin d'une animation
Utiliser des animations d'apparition et de disparition différentes

Création d'une application SPA
Un routeur basé sur le hashing
Passage de paramètre dans l'URL
Bouton et lien Page précédente dans les pseudo-pages

SvelteKit
Application de démonstration de SvelteKit
L'architecture d'une applications SvelteKit
Une application SvelteKit from scratch