Logo Svelte + SvelteKit

Formation Svelte + SvelteKit

Svelte est un framework de composants, comme React ou Vue. Si React est assurément le plus utilisé aujourd'hui, Svelte est très régulièrement cité comme le framework de composants le plus apprécié de l'industrie. SvelteKit est le framework d'application de Svelte. Il vous fournit tous les outils nécessaires pour construire une application web en utilisant des composants construits avec Svelte : routing, chargement de données, stratégies de rendu, gestion des erreurs, etc. Cette formation vous propose de voir toutes les notions Svelte et SvelteKit nécessaires pour construire une application complète avec ces 2 outils. Nous verrons comment créer des pages, comment écrire des composants, comment charger des données, comment rendre nos pages interactives, comment gérer des formulaires, entre autres.

Objectifs pédagogiques

  • Être capable de créer ses premiers composants avec Svelte
  • Comprendre les concepts de réactivité et d'effets
  • Manipuler les Snippets et les transitions / animations
  • Pouvoir configurer le routeur SvelteKit
  • Manipuler les données depuis ses composants
  • Savoir gérer les formulaires
  • Connaitre les bases de l'authentification
  • Pouvoir déployer son application

Pré-requis

  • Connaitre les bases d'HTML
  • Savoir mettre en forme à minima CSS
  • Maitriser la syntaxe JavaScript
  • Avoir utilisé les APIs Web de base (DOM, fetch...)

Public

  • Développeurs
  • Chefs de projets

Programme

Jour 1

Introduction

  • Il était une fois...
  • WTF is a framework?
  • C'est quoi Svelte ?
  • Choisir Svelte ou React ?
  • Se lancer avec Svelte
  • Quelques liens utiles
  • Rappels JavaScript

Bases de SvelteKit

  • Structure d'un projet SvelteKit
  • Le point d'entrée
  • Routing statique
  • Layouts basiques
  • Informations de page
  • Charger les données de page
  • Charger les données de layout
  • Routing dynamique
  • Philosophie de routing
  • Pages d'erreur

Jour 2

Syntaxe des composants Svelte

  • Concept générique de composant
  • Syntaxe de base
  • Blocs de logique
  • Props
  • Directives de classe
  • Gérer les évènements
  • Warnings d'accessibilité

L'état

  • Réactivité
  • Gérer l'état
  • Réactivité des objects et des tableaux
  • Inspecter des variables réactives
  • États dérivés
  • Réactivité universelle
  • Runes

Jour 3

Les effets

  • Le cycle de vie
  • Utiliser les effets
  • Nettoyer les effets

Chargement de données avancé

  • Construire une API
  • Travailler sur le serveur
  • Fonctions `load`
  • Chargement asynchrone

Liaisons et consorts

  • Flux de données
  • Éléments de formulaire
  • Bindings de boucle
  • Autres bindings
  • Directives de style

Jour 4

Formulaires

  • Formulaires
  • Actions de formulaire
  • Validation de formulaire
  • Actions nommées
  • Amélioration progressive

Routing avancé

  • Redirections
  • Erreurs
  • Validation des routes
  • Layouts imbriqués
  • S'échapper des layouts

Syntaxe Svelte avancée

  • Clés de boucle
  • Snippets
  • "Snipprops"
  • Transitions
  • Crossfade
  • Animation FLIP

Jour 5

Authentification

  • Principes généraux d'authentification
  • Utiliser les cookies
  • Le problème des états globaux sur le serveur
  • Authentifier/autoriser dans un layout ?
  • Hooks

Déployer

  • Types d'applications et stratégies de rendu
  • Options de page
  • Builds et déploiements

Vers l'infini et au-delà...

  • Aller plus loin avec Svelte
  • Aller plus loin avec SvelteKit
  • Autres frameworks

Méthodes mobilisées

  • Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
  • Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
  • Un support de cours en version numérique sera remis à chaque participant

Modalités d’évaluation

  • Questions orales ou écrites (QCM)
  • Exercices pratiques
  • Auto-positionnement en amont et aval de la formation

Accessibilité aux personnes handicapées

Nous nous engageons à rendre notre formation Svelte + SvelteKit accessible aux personnes en situation de handicap. Merci de nous contacter afin que nous puissions réaliser les adaptations nécessaires en amont de la formation.

Formations associées

Dernière modification le 04/12/2024