Grâce à cette formation Svelkit, vous apprendrez à utiliser les fonctionnalités particulières de SvelteKit dans vos applications Svelte telles que le routage ou encore la gestion de données.

Grâce à la modification d'une application pokedex, vous mettrez immédiatement en pratique les notions abordées par la transformation d’une application SPA en application multipage. À l'issue de la formation, l'application réalisée sera opérationnelle et pourra être utilisée comme modèle pour des projets à venir.

Cet apprentissage SvelteKit s'adresse aux développeur·ses familiers de Svelte, souhaitant comprendre le fonctionnement du framework SvelteKit.

Vous débutez avec Svelte ?

Notre formation Svelte est faite pour vous !

Si au contraire, vous maîtrisez déjà Svelte, devenez un expert dans la construction d'interfaces complexes, simplement, grâce à notre formation Svelte avancé !

Les objectifs

• Structurer un projet Sveltekit
• Charger les données d’une page
• Gérer les formulaires
• Créer une API REST simple
• Gérer les erreurs
• Développer une application SvelteKit de l’installation jusqu’au déploiement

Pré-requis

• Développer depuis au moins 3 mois avec Svelte
• Être autonome dans la lecture et l'écriture de Javascript
• Être à l'aise avec les méthodes fonctionnelles des tableaux (.map, .filter, ...)
• Être à l'aise avec l'asynchrone (Promesses, async/await, ...)
• Être à l'aise avec les modules ESM (import/export)
• Disposer de Git, Node 16+, un IDE (VSCode, Atom, ...), un navigateur moderne (Chrome ou Firefox)
• Avoir les droits d'administration sur votre machine
• Ordinateur portable à apporter

Le programme de la formation SvelteKit

Jour 1

• Rappels JS
  • Définir les variables avec const et let.
  • Déclarer les variables avec la déstructuration.
  • Manipuler les tableaux avec .map et .filter.
  • Utiliser async et await pour gérer les opérations asynchrones. -Rappels Svelte
  • Comprendre la réactivité de Svelte
  • Gérer les évènements
  • Revoir le principe des stores
  • Utiliser les slots
• Premiers pas
  • Comprendre l’histoire du web front-end.
  • Aborder la définition d’un framework front-end.
  • Lister les ressources utiles
  • Se lancer avec SvelteKit
  • Structurer un projet
  • Utiliser $lib pour partager des fonctions entre composants
• Routing
  • Apprendre à configurer des routes et leur associer des pages spécifiques.
  • Mutualiser des éléments d'interface avec les layouts
  • Rendre les urls dynamiques
• Chargement de données
  • Charger les données d'une page avec la fonction load
  • Utiliser la fonction load pour les layouts
  • Gérer les headers et cookies
  • Apprendre dans quelles situation utiliser la fonction load universelle
  • Anticiper le chargement des données au survol
• Stores Kit
  • Obtenir des informations sur la page actuelle avec le store page
  • Utiliser le store navigating pour détecter les actions de navigation.
  • Mettre à jour son application chez ses utilisateurs avec le store updated

Mise en pratique
- Créer la structure des pages pour l'application
- Définir un layout commun pour partager des éléments d'interface
- Charger les données de la page de liste de Pokémon et détail d’un Pokémon
- Afficher un loader lors de la navigation

Jour 2

• Stratégies de rendu
  • Clarifier les différents types de rendu et leurs implications (MPA, SPA, SSR, CSR, ...)
  • Utiliser les options de page SvelteKit pour choisir sa stratégie
• Formulaires
  • Utiliser les formulaires avec SvelteKit
  • Apprendre à distinguer différentes actions utilisateur dans les formulaires.
  • Valider un formulaire côté serveur
  • Ajouter du progressive enhancement
• API routes
  • Créer des endpoints de type GET
  • Créer des endpoints de type POST et autres méthodes HTTP
• Erreurs et redirections
  • Apprendre à gérer les erreurs et à fournir des réponses appropriées aux utilisateurs
  • Créer une page d'erreur
  • Gérer les cas d'urgence avec la page d'erreur de secours
  • Gérer les redirections
• Déploiements
  • Choisir son adapteur de déploiement
  • Déployer une application sur Vercel

Mises en pratique
- Créer d'un formulaire d'inscription
- Rendre les pages qui le peuvent complètement statiques
- Sauvegarder son inventaire via la création de endpoints dédiés
- Gérer les erreurs
- Déployer son application sur Vercel

Le(s) formateur(s)

Romain CRESTEY

Romain est développeur web senior pour RadioFrance, et formateur Svelte et JS pour différents organismes.

Il fait également partie des administrateurs de la communauté Discord Svelte francophone, et maintient le projet de traduction de la documentation en français de Svelte.

Fan de Svelte, Typescript et NodeJs, il a également passé plusieurs années à développer des applications React.

Voir son profil détaillé

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

• une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• de nombreux clients qui nous font confiance depuis des années
• un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
• 121 formations au catalogue, 1573 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
• la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation