Svelte 5 et SvelteKit 2.x, formation complète pour débutants

Cette formation vidéo a été conçue pour les programmeurs JavaScript qui veulent apprendre à utiliser les frameworks Svelte 5 et SvelteKit 2.x.

Vous utiliserez Svelte 5 pour :

• Créer des interfaces utilisateur réactives

• Ajouter des fonctionnalités à un projet Web existant

• Créer des projets complexes à plusieurs programmeurs

Vous utiliserez SvelteKit 2.x pour :

• Créer des applications Web SPA

• Réaliser des navigations côté client après le chargement de la page initiale rendue par le serveur

• Assurer un bon référencement avec des URL SEO friendly

Si Svelte et SvelteKit sont si populaires, c'est en grande partie parce qu'ils sont simples à mettre en place. Lais aussi parce qu'ils offrent de très bonnes bonnes performances. Et enfin parce qu'ils peuvent être utilisés de façon plus ou moins poussée, en fonction des besoins.

Lorsque je me suis lancé dans la création de cette formation vidéo, deux choix s'offraient à moi :

• Créer un fil rouge et y intégrer petit à petit les différents concepts appris tout au long de la formation.

• Créer des exemples indépendants pour apprendre facilement et rapidement les différents concepts de Svelte.

Je suis formateur en présentiel et en distanciel, et j'ai pu expérimenter ces deux approches. Bien que la première ait ses fervents adeptes, la seconde donne de meilleurs résultats au niveau de l'apprentissage, car chaque exemple peut être choisi de façon extrêmement précise, sans avoir à suivre une logique d'intégration globale qui pourrait faire négliger certains aspects de ce qui doit être appris. C'est donc cette seconde approche qui a été adoptée.

Chaque sujet est abordé de façon indépendante et illustre un aspect particulier de Svelte ou de SvelteKit : variables réactives, data binding, directives, gestion événementielle, classes conditionnelles, props, custom events, lifecycle hooks, stores, routage, etc. etc..

Plusieurs exercices vous sont proposés. Lorsqu'on vous demande d'arrêter le défilement de la vidéo, jouez le jeu : arrêtez la vidéo et codez comme vous l'entendez, en partant d'un squelette standard ou d'une page vide. Vous verrez qu'en procédant ainsi, votre apprentissage sera très rapide. Lorsque vous avez fini de coder, vous pouvez reprendre le défilement de la vidéo : une correction vous sera proposée.

Cette formation est très complète. Voici quelques-uns des sujets abordés :

• Utilisation de Vite pour créer un projet Svelte en ligne de commande

• Interpolations et variables réactives

• Gestion de l'état réactif avec des runes

• Data binding mono et bidirectionnel

• Décomposer une application en composants

• Échanges entre composants

• Classes conditionnelles

• Conditions et boucles dans le code HTML

• Gestion événementielle

• Slots simples et slots nommés

• Utilisation de snippets pour partager des données entre composants

• Lifecycle hooks

• Le bloc {#await}

• Interfaçage de Webservices

• Gestion de formulaires

• Gestion des writable et readable stores

• Animations d’apparition et de disparition

• Applications SPA avec Svelte

• Applications SPA avec SvelteKit

• Routage dynamique

  
  

Tous les codes sources et ressources sont fournis en accompagnement de chaque vidéo.

Je ne peux vous conseiller qu'une chose : expérimentez le code par vous-même, codez et progressez à votre rythme. Petit à petit, Svelte et SvelteKit vous sembleront de plus en plus familiers et vous apprécierez leur puissance et leur souplesse.

Alors ... Happy coding !