Formation Formation Svelte : développer des applications web légères, performantes et rapides

Programme de la formation
Formation Svelte : développer des applications web légères, performantes et rapides

• Introduction à Svelte et son écosystème

  - Comprendre les frameworks JavaScript : Vue, React, Angular.
  - Positionnement de Svelte : le compilateur, avantages clés.
  - Installation de Node.js et SvelteKit.
  - Création du premier projet Svelte.
  - Structure d'un projet SvelteKit.

• Les fondamentaux de Svelte : Composants et Réactivité

  - Anatomie d'un composant Svelte (.svelte).
  - Variables réactives avec `let`.
  - Déclarations réactives avec `$:`.
  - Rendu conditionnel et boucles(`if`, `each`).
  - Passage de props aux composants.

• Gestion des événements et liaisons bidirectionnelles

  - Écoute des événements DOM (`on:`).
  - Modificateurs d'événements (`once`, `preventDefault`).
  - Liaisons (`bind:value`, `bind:checked`).
  - Manipulation des événements personnalisés (`createEventDispatcher`).
  - Bonnes pratiques d'organisation des événements.

• Le cycle de vie des composants Svelte

  - Comprendre les fonctions de cycle de vie (`onMount`, `beforeUpdate`).
  - Utilisation de `afterUpdate` et `onDestroy`.
  - Exécution de code asynchrone au montage.
  - Nettoyage des abonnements et timers.
  - Scénarios d'application des hooks de cycle de vie.

• Stores Svelte : Gestion simple de l'état

  - Introduction aux stores lisibles et inscriptibles (`writable`, `readable`).
  - Comprendre les stores dérivés (`derived`).
  - Abonnement et désabonnement aux stores.
  - Utilisation des stores pour partager l'état entre composants.
  - Bonnes pratiques de structuration des stores.

• Transitions et animations avec Svelte

  - Comprendre les animations et transitions par défaut.
  - Utilisation des transitions (`fade`, `slide`, `fly`).
  - Création de transitions personnalisées.
  - Animer des listes (`flip`).
  - Optimisation des performances des animations.

• Actions et Attributs avancés

  - Comprendre le concept d'actions Svelte.
  - Création et utilisation d'actions personnalisées.
  - Utilisation des attributs spread (`{...props}`).
  - Slots nommés et slots par défaut.
  - Slots de portée et leurs applications.

• Routage et navigation avec SvelteKit

  - Principes du routage basé sur les fichiers.
  - Création de routes statiques et dynamiques.
  - Chargement de données dans les routes (`+page.js`, `+page.server.js`).
  - Navigation programmatique et déclarative.
  - Gestion des erreurs et chargement (`+error.svelte`, `+layout.svelte`).

• Formulaires et Interaction Serveur avec SvelteKit

  - Gestion des formulaires HTML standards.
  - Actions de formulaire (`form actions`).
  - Validation côté client et côté serveur.
  - Soumission de données avec `use:enhance`.
  - Intégration d'API externes via les points de terminaison SvelteKit.

• Optimisation et déploiement d'applications Svelte

  - Comprendre la phase de compilation de Svelte.
  - Optimisation des performances : lazy loading, tree-shaking.
  - Déploiement d'une application SvelteKit.
  - Pré-rendu et génération de sites statiques (SSR, SSG).
  - Introduction au concept d'adaptateurs pour le déploiement.

• Tests et débogage d'applications Svelte

  - Stratégies de test pour les applications Svelte.
  - Introduction aux tests unitaires avec Vitest.
  - Tests de composants avec Testing Library.
  - Utilisation de l'extension Svelte DevTools pour le débogage.
  - Bonnes pratiques de débogage et résolution de problèmes.

• Projet Pratique : Construction d'une application complète

  - Conception et architecture d'une application SvelteKit.
  - Application des concepts de composants, stores, routage.
  - Intégration d'éléments UI et UX.
  - Utilisation des actions de formulaire et interaction serveur.
  - Revue de code et meilleures pratiques de développement Svelte.