Svelte 3 et SvelteKit 1.0, formation complète pour débutants

Apprenez rapidement Svelte 3 et SvelteKit 1.0 par l'expérimentation

Ratings 4.56 / 5.00
Svelte 3 et SvelteKit 1.0, formation complète pour débutants

What You Will Learn!

  • Créer des interfaces utilisateur réactives
  • Acquérir toutes les bases nécessaires pour bien programmer en Svelte 3
  • Utiliser des interpolations, des variables réactives et des props
  • Créer des conditions et des boucles dans un composant
  • Apprendre à hiérarchiser une application à l'aide de composants
  • Communiquer des données et fonctions de composant à composant
  • Utiliser des slots simples et nommés
  • Interfacer des API REST en passant par le hook OnMount
  • Comprendre et utiliser les stores de Svelte
  • Réaliser toutes sortes d'animations dans les composants
  • Créer des applications Web SPA (monopage) avec Svelte 3
  • Définir un routeur basé sur le hashing
  • Créer des applications Web SPA avec SvelteKit 1.0
  • Définir des pages et des composants de layout
  • Charger des données de façon asynchrone avec SvelteKit 1.0

Description

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


Vous utiliserez Svelte 3 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 1.0 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

  • 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

  • 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


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

Un manuel illustré complet est accessible à la fin du cours. Il reprend le contenu intégral de la formation.

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 !



Who Should Attend!

  • Programmeurs JavaScript qui veulent apprendre à dévelepper des applications en Svelte 3 et SvelteKit 1.0

TAKE THIS COURSE

Tags

  • Svelte Framework

Subscribers

110

Lectures

77

TAKE THIS COURSE



Related Courses