03 20 61 95 06

Formation Svelte 5 Initiation


  • PHSI
  • Durée : 3 jours
  • Tarif : 2120 € HT

96%

Taux de satisfaction clients
(sur 1596 évaluations du 19/05/21 au 16/12/24)

Voir les avis

Objectifs

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é.

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.

Dernière mise à jour

Programme mis à jour le 02 décembre 2024
enveloppe Cette formation vous intéresse ? Contactez-nous

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.
modules

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.

Cette formation vous intéresse ? Contactez-nous !

    Les données personnelles collectées sont destinées à Access IT Company et utilisées pour traiter votre demande et, lorsque vous ne vous y êtes pas opposé, vous communiquer nos offres commerciales. Les données obligatoires vous sont signalées sur le formulaire par un astérisque. L’accès aux données est strictement limité par Access IT Company aux collaborateurs en charge du traitement de votre demande. Conformément au Règlement européen n°2016/679/UE du 27 avril 2016 sur la protection des données personnelles et à la loi « informatique et libertés » du 6 janvier 1978 modifiée, vous bénéficiez d’un droit d’accès, de rectification, d’effacement, de portabilité et de limitation du traitement des donnés vous concernant ainsi que du droit de communiquer des directives sur le sort de vos données après votre mort. Vous avez également la possibilité de vous opposer au traitement des données vous concernant. Vous pouvez exercer vos droits en contactant le DPO à l’adresse suivante : [email protected] ou à l’adresse postale suivante 2, Allée Lavoisier, 59650 Villeneuve d’Ascq. Pour plus d’informations sur le traitement de vos données personnelles par Access IT Company, veuillez consulter notre politique de confidentialité disponible sur notre site internet à l’adresse suivante : https://formation.access-it.fr/politique-de-confidentialite/