Logo Svelte

Formation Svelte

Svelte est un framework de composants, comme React ou Vue. Si React est assurément le plus utilisé aujourd'hui, Svelte est très régulièrement cité comme le framework de composants le plus apprécié de l'industrie. Radiofrance, Decathlon, ou encore Apple et le New York Times,... de plus en plus de développeurs et d'entreprises sont convaincus par ce framework qui n'a plus rien d'un "petit nouveau". Performant mais simple à utiliser, Svelte vous permet de vous concentrer sur ce qui importe le plus, le code métier, tout en vous aidant à écrire du code respectant les standards du web et d'accessibilité. Créé en 2016 et sorti du bois en 2019, Svelte vient de sortir sa version 5, simplifiant encore sa syntaxe tout en restant extrêmement performant. Qu'est-ce qui différencie Svelte de ses autres concurrents ? Pourquoi choisir Svelte plutôt qu'un autre ? Et surtout, comment s'en servir ? Nous répondrons à toutes ces questions au cours de cette formation de 3 jours résolument tournée vers la pratique, au cours de laquelle nous construirons une petite application de zéro.

Objectifs pédagogiques

  • Être capable de créer ses premiers composants avec Svelte
  • Comprendre les concepts de réactivité et d'effets
  • Manipuler les Snippets et les transitions / animations

Pré-requis

  • Connaitre les bases d'HTML
  • Savoir mettre en forme à minima CSS
  • Maitriser la syntaxe JavaScript
  • Avoir utilisé les APIs Web de base (DOM, fetch...)

Public

  • Développeurs
  • Chefs de projets

Programme

Jour 1

Introduction

  • Historique du web
  • C'est quoi un framework ?
  • C'est quoi Svelte ?
  • Commencer avec Svelte
  • Rappels HTML, CSS, JS, TS

Syntaxe de base

  • Fichier .svelte
  • Blocs logiques
  • Directives
  • Évènements
  • Accessibilité

Composants Svelte

  • Concept de composant
  • La rune $props

Jour 2

L'état

  • Réactivité
  • La rune $state
  • Objets et tableaux
  • Inspecter les variables réactives
  • États dérivés : la rune $derived
  • Réactivité universelle

Effets

  • Définition
  • La rune $effect
  • Nettoyage des effets
  • Le cycle de vie

Bindings

  • Éléments de formulaire
  • Bindings de boucle
  • Autres liaisons

Jour 3

Snippets

  • Définir des snippets
  • Les snippets comme props

Transitions et animations

  • Transitions simples
  • La transition crossfade (+FLIP)
  • Variables d'animations

Introduction à SvelteKit

  • À quoi ça sert ?
  • Premiers pas

Méthodes mobilisées

  • Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
  • Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
  • Un support de cours en version numérique sera remis à chaque participant

Modalités d’évaluation

  • Questions orales ou écrites (QCM)
  • Exercices pratiques
  • Auto-positionnement en amont et aval de la formation

Accessibilité aux personnes handicapées

Nous nous engageons à rendre notre formation Svelte accessible aux personnes en situation de handicap. Merci de nous contacter afin que nous puissions réaliser les adaptations nécessaires en amont de la formation.
Dernière modification le 04/12/2024