Svelte 5 et SvelteKit 2.x
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Svelte 5 et SvelteKit 2.x

Mediaforma
39,90€
3 paiements de 13,00€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 (ou TypeScript). Le code JavaScript/TypeScript sera composé :

  • De code JavaScript/TypeScript traditionnel (Vanilla JavaScript).
  • De code JavaScript/TypeScript « 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 cette formation Svelte

Cette formation vidéo est une introduction au framework Svelte 5 et à son acolyte SvelteKit 2.x, spécialisé dans la création de sites Web SPA. I
l 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.

Ce cours 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 cette formation, vous devez avoir une première expérience de codage en JavaScript. Nous ne reviendrons pas sur les instructions basiques de ce langage.

Svelte 5 est rétrocompatible Svelte 3, et SvelteKit 2 est rétrocompatible SvelteKit 1.  Les spécificités de Svelte 5 et de SvelteKit 2 telles que les runes, la gestion simplifiée des événements, les snippets et le support natif de TypeScript seront abordés dans un second temps, après avoir compris la philosophie globale de Svelte.

Dans cette formation vidéo, j’ai choisi de favoriser le développement en JavaScript et non en TypeScript. JavaScript est plus adapté à de petits projets. Il vous permettra de développer rapidement avec Svelte. Par la suite, si vous devez créer des projets de plus grande envergure, rien ne vous empêche de coder en TypeScript, puisque ce langage est supporté nativement dans Svelte 5 et SvelteKit 2.

Assez parlé ! Il est temps de découvrir les immenses possibilités de Svelte et de 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
Chapitre 2
La syntaxe de base de Svelte
Chapitre 3
Conditions et boucles
Chapitre 4
Les composants
Chapitre 5
Les snippets
Chapitre 6
Lifecycle Hooks
Chapitre 7
Gestion des formulaires

Plan détaillé du cours

Chapitre 1 : Introduction et premiers pas
36m03
 
Leçon 1Introduction
Leçon 2L'éditeur de code Visual Studio Code
Leçon 3Les extensions utiles dans VS Code
Leçon 4Le site Officiel de Svelte
Leçon 5Premiers pas avec Svelte via l’onglet Playground
Leçon 6Création d’un premier projet Svelte avec Vite
Chapitre 2 : La syntaxe de base de Svelte
1h33
 
Leçon 1Création d’un squelette Svelte standard avec Vite
Leçon 2Les interpolations
Leçon 3Exercice sur les interpolations
Leçon 4Variables réactives
Leçon 5La rune $state()
Leçon 6La rune $derived()
Leçon 7La rune $effect()
Leçon 8La rune $props()
Leçon 9La rune $bindable()
Leçon 10La rune $inspect()
Leçon 11Data binding
Leçon 12Plusieurs composants dans une application Svelte
Leçon 13Utilisation d’un objet JSON pour les props
Leçon 14Passage de fonctions d'un composant à un autre
Leçon 15Interpolations en texte brut ou en HTML
Leçon 16Classes conditionnelles
Chapitre 3 : Conditions et boucles
49m08
 
Leçon 1Exécution de code HTML conditionnellement
Leçon 2Boucles each
Leçon 3Deux paramètres dans une boucle each
Leçon 4Parcours d’objets JSON avec each
Leçon 5Gestion événementielle de la souris
Leçon 6Gestion événementielle du clavier
Leçon 7Les modificateurs d’événements (event modifiers)
Chapitre 4 : Les composants
40m35
 
Leçon 1Première approche des composants
Leçon 2Encore plus de composants
Leçon 3Passer des données d'un enfant au parent avec des Custom Events
Leçon 4Transmission de données au parent avec un Custom Event
Leçon 5Chaînage d'événements de composant à composant
Chapitre 5 : Les snippets
10m55
 
Leçon 1Un premier snippet
Leçon 2Un snippet paramétré
Chapitre 6 : Lifecycle Hooks
30m59
 
Leçon 1Introduction aux Lifecycle Hooks
Leçon 2Interfaçage d'une API REST dans le hook onMount
Leçon 3Utilisation du bloc {#await}
Leçon 4Interfaçage de la base de données The Movie Database
Chapitre 7 : Gestion des formulaires
42m43
 
Leçon 1Introduction et input de type number
Leçon 2Input de type radio
Leçon 3Input de type checkbox
Leçon 4Select et option
Leçon 5Les autres balises input
Leçon 6Binding avec un élément HTML
Leçon 7Binding avec un composant
Leçon 8Challenge
Leçon 9Validation d'un formulaire côté front
Chapitre 8 : Les stores de Svelte
1h02
 
Leçon 1La nouvelle approche des stores avec les runes
Leçon 2L’ancienne approche des stores
Leçon 3Challenge
Leçon 4Éviter les fuites mémoire avec unsubscribe()
Leçon 5Faciliter l'accès au store
Leçon 6Ajout d'une fonctionnalité pour supprimer un livre
Leçon 7Déplacement de la logique programmatique dans le store
Leçon 8Readable stores
Chapitre 9 : Animations et transitions
32m24
 
Leçon 1Animation de nombres avec le module motion
Leçon 2Action sur une propriété CSS inline
Leçon 3Animation Spring
Leçon 4Animations d'éléments HTML avec le module transition
Leçon 5Capturer le début et la fin d'une animation
Leçon 6Utiliser des animations d'apparition et de disparition différentes
Chapitre 10 : Les applications SPA
18m
 
Leçon 1Création d'une application SPA
Leçon 2Un routeur basé sur le hashing
Leçon 3Passage de paramètre dans l'URL
Leçon 4Bouton et lien Page précédente dans les pseudo-pages
Chapitre 11 : SvelteKit
54m16
 
Leçon 1Application de démonstration de SvelteKit
Leçon 2L'architecture d'une application SvelteKit
Leçon 3Une application SvelteKit from scratch
Leçon 4Utilisation de props dans les pages
Leçon 5Création d'un composant de layout
Leçon 6Définition de règles de styles globales
Leçon 7Utilisation d'un layout spécifique à une ou plusieurs pages
Leçon 8Charger des données de façon asynchrone
Leçon 9Plusieurs sources de données
Leçon 10Routes dynamiques
Leçon 11Erreur dans une route dynamique

Aperçus

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

JavaScript

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard ou en 3x

Prix d'achat : 39,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 13,00 €
tous les mois, sans intérêts
Total : 39,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1449 tutos gratuits

Notre politique de protection des données