Svelte 3 - et SvelteKit 1.0 - E-book - Multi-format

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