SvelteKit est un framework de développement web basé sur Svelte qui inclut la gestion des routes, la préparation de données, le routage côté serveur, et le rendu statique. Il facilite le déploiement et l'intégration de plugins, offrant une meilleure gestion des performances et de la navigation.

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

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

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.

Toutes nos formations étant limitées à 6 participant·e·s par session, vous aurez donc un contact privilégié avec votre formateur, Romain Crestey, développeur curieux et passionné, enthousiaste de partager son expérience professionnelle lors des cours et durant les moments d’échanges informels au programme de la formation.

Pour comprendre les fonctionnalités Svelte, jetez un œil à nos formations Svelte et 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...
• 103 formations au catalogue, 1466 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