A l’issue de la formation le participant sera capable de :
Comprendre la philosophie et les concepts de Svelte 5.
Créer des interfaces réactives performantes avec les runes.
Utiliser SvelteKit pour le routage, le SSR et le déploiement.
Gérer les états et données avec $state, $derived et TanStack Query.
Mettre en place des tests unitaires, d’intégration et E2E pour garantir la qualité.
- Développement
- Développement web
Formation Svelte 5 Initiation
Objectifs
Prérequis
Connaissance de base en HTML, CSS et JavaScript.
Notions sur les frameworks front-end (React, Vue ou Angular sont un plus).
Environnement Node.js configuré avec npm ou yarn.
Un entretien en amont avec notre expert permet de prendre en compte le profil de chaque participant (niveau, objectifs et résultats attendus, contexte professionnel, enjeux…) et d’adapter le contenu de la formation si besoin.
Notions sur les frameworks front-end (React, Vue ou Angular sont un plus).
Environnement Node.js configuré avec npm ou yarn.
Un entretien en amont avec notre expert permet de prendre en compte le profil de chaque participant (niveau, objectifs et résultats attendus, contexte professionnel, enjeux…) et d’adapter le contenu de la formation si besoin.
Formation(s) associée(s)
- Formation Développer des applications avec React.js, Redux et Zustand
- Formation Vue.JS Devenir un développeur Front End Vuejs niveau débutant
- Formation Vue.js Développement d’applications Web Version 3
- Formation Node.js Développement des applications
- Formation Angular 17-18
- Formation devenez un développeur Full Stack avec React.js et Node.js
Dernière mise à jour
Programme mis à jour le 02 décembre 2024
Bon à savoir
Evaluez votre niveau
Pour vous aider à bien choisir votre formation, nous vous proposons soit un entretien avec le formateur soit un test d’évaluation. Cela vous assurera que vous disposez des connaissances nécessaires pour suivre la formation dans des conditions optimales.
Sessions garanties
La majorité de nos sessions proposées en distanciel sont garanties. Elles peuvent être enregistrées à la demande.
Travaux pratiques
Nos formations comprennent de nombreux travaux pratiques pour un meilleur apprentissage (60 % de pratique). Nous proposons également de travailler sur vos données pour une meilleure expérience.
Les Modules
de formation
Module1
Découverte de Svelte
● Concepts et philosophie :
○ Approche centrée sur la compilation.
○ Simplification de la création d’interfaces réactives.
● Svelte, un compilateur plus qu’un framework ? :
○ Différence entre un compilateur et un framework.
● Comparaison avec Angular, React, Vue, etc. :
○ Gains de performance.
○ Réduction de la taille des bundles.
● Installation des outils de développement :
○ Mise en place d’un projet SvelteKit.
○ Utilisation de Vite et des outils de développement modernes.
Module2
Prise en main et première application
● Anatomie d’un fichier source Svelte :
○ Différenciation entre <script>, <style>, et le template HTML.
● Syntaxe de base :
○ Déclarations réactives avec $state et $derived.
○ Gestion des événements avec les nouvelles directives.
● La réactivité avec Svelte :
○ Concepts de réactivité fine grâce aux runes.
● Bindings et communication avec les props :
○ Nouveaux mécanismes avec $props.
● Gestion des blocs conditionnels (if/else, each, await) :
○ Utilisation avancée des blocs avec les runes.
● Ajout de styles et classes :
○ Scopage CSS avec :where et gestion des classes conditionnelles.
Module3
Composants
● Création et utilisation de composants :
○ Les différents types de composants.
● Cycle de vie :
○ Gestion avec $effect et $effect.pre.
● Communication entre composants :
○ Passer des props via $props.
○ Gestion des événements par callback props.
● Travail avec les snippets :
○ Remplacement des slots traditionnels par des snippets.
Module4
Stores et gestion des états
● Introduction aux stores Svelte :
○ Différences entre $state et les stores traditionnels.
● Création et utilisation de stores personnalisés :
○ Développement de stores avec $state et $derived.
● Abonnements automatiques et dérivations complexes :
○ Utilisation de $derived.by.
Module5
Transitions et animations
● Bonnes pratiques d’ergonomie :
○ Amélioration de l’expérience utilisateur.
● Transitions simples :
○ Ajout de transitions avec les composants intégrés.
● Animations avancées :
○ Animation fine avec des easings personnalisés.
Module6
SvelteKit
● Présentation générale :
○ Fonctionnalités principales et architecture.
● Pages, routage et layouts :
○ Gestion des routes dynamiques.
● Rendu côté serveur (SSR) :
○ Introduction au rendu universel et à la pré-hydratation avec hydrate.
● Déploiement :
○ Configuration pour Vercel, Netlify ou AWS.
Module7
Tests et assurance qualité
● Introduction aux tests dans les applications Svelte :
○ Importance des tests pour les applications web modernes.
● Outils de test pour Svelte :
○ Utilisation de @testing-library/svelte pour tester les composants.
○ Introduction à Vitest pour des tests unitaires rapides et intégrés.
● Création de tests unitaires :
○ Tester les composants isolément.
○ Validation des props et comportements réactifs avec $state et $derived.
● Tests d’intégration :
○ Vérification des interactions entre plusieurs composants.
○ Utilisation des snippets et des callback props dans les tests.
● Tests E2E (end-to-end) :
○ Automatisation avec Playwright ou Cypress pour valider les flux utilisateurs.
● Stratégies pour les tests réactifs :
○ Gestion des tests impliquant les runes ($effect, $state).
○ Simuler des changements de props avec $props.
● Pratiques recommandées :
○ Structuration des fichiers de test.
○ Écriture de tests robustes et maintenables.
Module8
Gestion des données avec TanStack Query
● Introduction à TanStack Query :
○ Présentation de la bibliothèque et de son rôle dans la gestion des données
distantes.
○ Comparaison avec les solutions traditionnelles comme fetch ou Axios.
● Intégration avec Svelte :
○ Configuration de TanStack Query dans un projet SvelteKit.
○ Création d’un client TanStack Query dans le contexte de l’application.
● Utilisation des hooks TanStack Query :
○ useQuery pour récupérer des données avec réactivité.
○ useMutation pour gérer les mutations de données.
● Gestion du cache :
○ Stratégies de cache pour améliorer les performances.
○ Synchronisation entre le cache local et le serveur.
● Réactivité avec les données :
○ Intégration de $state et $derived avec TanStack Query.
○ Création de custom hooks pour encapsuler la logique réactive.
● Gestion des erreurs et état de chargement :
○ Utilisation des états isLoading, isError et isSuccess.
○ Implémentation de spinners et messages d’erreur réactifs.
Les prochaines
sessions de formation
Sur demande
Vous souhaitez organiser cette formation à une date spécifique ?Contactez-nous en remplissant le formulaire ci-dessous