JavaScript moderne avancé - Les datasets
JavaScript moderne avancé - Les datasets
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.
Au programme de ce cours Svelte et SvelteKit pour débutant
Cette formation vidéo est une introduction au framework Svelte 3 et à son acolyte SvelteKit 1.0, spécialisé dans la création de sites Web SPA (application mono page). Le programme s'étale sur près de 8 heures et abordera les chapitres suivants :
- La syntaxe de base de Svelte
- Conditions, boucles et gestion événementielle
- Les composants
- Slots et Lifecycle hooks
- Gestion des formulaires
- Les stores de Svelte
- Animations et transitions
- Une application SPA avec Svelte
- SvelteKit
Ce cours en ligne 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. La formation est orientée 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.
Un ebook de 205 pages est fourni en bonus ainsi que tous les codes présentés pendant cette formation !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Assez parlé ! Il est temps de découvrir les immenses possibilités de Svelte et SvelteKit, d’acquérir de nouvelles compétences et … de devenir un inconditionnel du développement Svelte !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction et premiers pas
Introduction et premiers pas
Chapitre 2
La syntaxe de base de Svelte
La syntaxe de base de Svelte
Chapitre 3
Conditions, boucles et gestion événementielle
Conditions, boucles et gestion événementielle
Chapitre 4
Les composants
Les composants
Chapitre 5
Slots et Lifecycle hooks
Slots et Lifecycle hooks
Chapitre 6
Gestion des formulaires
Gestion des formulaires
Chapitre 7
Les stores de Svelte
Les stores de Svelte
Plan détaillé du cours
Chapitre 1 : Introduction et premiers pas
36m31s
Leçon 101 Préparation de l’environnement de développement
Leçon 202 Les extensions utiles dans VS Code
Leçon 303 Le site Officiel de Svelte
Leçon 404 Premiers pas avec Svelte via le REPL
Leçon 505 Ajout d’un composant
Leçon 606 Installation ou mise à jour de Node.js
Leçon 707 Création d’un premier projet Svelte avec Vite
Chapitre 2 : La syntaxe de base de Svelte
58m43s
Leçon 108 Création d’un squelette Svelte standard avec Vite
Leçon 209 Les interpolations
Leçon 310 Exercice
Leçon 411 Variables réactives
Leçon 512 Data binding
Leçon 613 Plusieurs composants dans une application Svelte
Leçon 714 Utilisation d’un objet JSON pour les props
Leçon 815 Passage de fonctions d'un composant à un autre
Leçon 916 Interpolations en texte brut ou en HTML
Leçon 1017 Classes conditionnelles
Chapitre 3 : Conditions, boucles et gestion événementielle
44m21s
Leçon 118 Exécution de code HTML conditionnellement
Leçon 219 Boucles each
Leçon 320 Deux paramètres dans une boucle each
Leçon 421 Parcours d’objets JSON avec each
Leçon 522 Gestion événementielle de la souris
Leçon 623 Gestion événementielle du clavier
Leçon 724 Les modificateurs d’événements (event modifiers)
Chapitre 4 : Les composants
50m47s
Leçon 125 Première approche des composants
Leçon 226 Encore plus de composants
Leçon 327 Passer des données d'un enfant au parent avec des Custom Events
Leçon 428 Transmission de données au parent avec un Custom Event
Leçon 529 Chaînage d'événements de composant à composant
Leçon 630 Chaînage d'événements du DOM
Chapitre 5 : Slots et Lifecycle hooks
1h02m
Leçon 131 Slots simples
Leçon 232 Slots nommés
Leçon 333 Slot par défaut
Leçon 434 Affichage conditionnel de slots
Leçon 535 Utilisation conjointe de slots et de props dans une application Svelte
Leçon 636 Lifecycle Hooks
Leçon 737 Interfaçage d'une API REST dans le hook onMount
Leçon 838 Utilisation du bloc {#await}
Leçon 939 Interfaçage de la base de données The Movie Database
Leçon 1039B Suite Interfaçage de la base de données The Movie Database
Chapitre 6 : Gestion des formulaires
41m36s
Leçon 140 Input de type text et input de type number
Leçon 241 Input de type radio et de type checkbox
Leçon 342 Select et option
Leçon 443 Les autres balises input
Leçon 544 Binding avec un composant
Leçon 645 Challenge
Leçon 746 Validation d'un formulaire côté front
Chapitre 7 : Les stores de Svelte
59m20s
Leçon 147 Les stores de Svelte
Leçon 248 Un premier exemple
Leçon 349 Challenge
Leçon 450 Éviter les fuites mémoire avec unsubscribe()
Leçon 551 Faciliter l'accès au store
Leçon 652 Ajout d'une fonctionnalité pour supprimer un livre
Leçon 753 Déplacement de la logique programmatique dans le store
Leçon 854 Readable stores
Chapitre 8 : Animations et transitions
33m23s
Leçon 155 Animation de nombres avec le module motion
Leçon 257 Action sur une propriété CSS inline
Leçon 358 Le store Spring
Leçon 459 Animations d'éléments HTML avec le module transition
Leçon 560 Animations d'éléments HTML avec le module transition
Leçon 661 Capturer le début et la fin d'une animation
Leçon 762 Utiliser des animations d'apparition et de disparition différentes
Chapitre 9 : Une application SPA avec Svelte
16m54s
Leçon 163 Création d'une application SPA
Leçon 264 Un routeur basé sur le hashing
Leçon 365 Passage de paramètre dans l'URL
Leçon 466 Bouton et lien Page précédente dans les pseudo-pages
Chapitre 10 : SvelteKit
57m36s
Leçon 167 Application de démonstration de SvelteKit
Leçon 268 L'architecture d'une applications SvelteKit
Leçon 369 Une application SvelteKit from scratch
Leçon 470 Utilisation de props dans les pages
Leçon 571 Création d'un composant de layout
Leçon 672 Définition de règles de styles globales
Leçon 773 Utilisation d'un layout spécifique à une ou plusieurs pages
Leçon 874 Charger des données de façon asynchrone
Leçon 975 Plusieurs sources de données
Leçon 1076 Routes dynamiques
Leçon 1177 Erreur dans une route dynamique
Avis des apprenants