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