Formation Svelte : développer des applications ultra-rapides

A l’issue de cette formation Svelte, les participants sont en mesure de développer des applications Web en utilisant le framework JavaScript. Ils se formeront à l’utilisation des templates, composants, états, actions et des principales bonnes pratiques à mettre en œuvre en tant que développeur ou développeuse front-end utilisant Svelte.

Objectifs pédagogiques

Comprendre les particularités du framework Svelte et ses différences majeures avec Angular, React ou Vue

Maîtriser la syntaxe et les fonctionnalités de base du framework

S’approprier les meilleures pratiques pour créer des composants

Comprendre comment développer des applications rapides et réactives

Utiliser les stores

Construire et gérer une application jusqu’au déploiement avec SvelteKit

A qui s’adresse cette formation ?

Public

Développeurs

Prérequis

Une bonne maîtrise de JavaScript ainsi qu’une connaissance des technologies Web. Une première expérience avec un framework Web est également conseillée.

Programme de formation

Introduction à la formation Svelte

Présentation générale et objectifs pédagogiques de cette formation
Découverte de Svelte : concepts et philosophie
Svelte, un compilateur plus qu’un framework ?
Les différences avec les frameworks Web traditionnels (Angular, React, Vue…)
Installation des outils de développement

Prise en main et première application

Anatomie d’un fichier source svelte : logique, template et style
Syntaxe de base
La réactivité avec Svelte
Bindings
Communication avec les props
Blocks if else, each et await
Ajout de styles et classes

Composants

Les différents types de composants Svelte
Gestion du cycle de vie
Communication entre composants
Evènements
Travailler avec les Slots

Stores et gestion des états

Qu’est-ce qu’un store dans Svelte ? Concepts fondamentaux
Créer et utiliser un store « writable »
Gestion des abonnements et auto-subscriptions
Stores « readable »
Les stores personnalisés

Transitions et animations

Meilleures pratiques pour améliorer l’ergonomie d’une application
Ajouter une transition
Ajouter une animation
Easing

SvelteKit

Présentation générale de SvelteKit
Pages, routing et layouts
Rendu côté serveur (server-side rendering)
Modules SvelteKit
Déploiement

En apprendre davantage sur Svelte : apprendre à développer avec le framework JavaScript

Svelte.js permet de développer des applications Web très rapides, grâce à une nouvelle approche de la conception d’interfaces utilisateurs. Alors que les frameworks JavaScript traditionnels comme React ou Vue effectuent le gros du travail dans le navigateur Web, au moment de l’exécution de l’application, Svelte intervient lors du build de l’application. Au lieu d’utiliser un DOM virtuel, Svelte écrit du code qui met à jour le DOM de manière très ciblée lorsque l’état de l’application change.

Parmi les avantages conférés par l’utilisation de Svelte, citons :

son poids et sa vitesse de chargement : comme son nom l’indique, le framework permet un poids très léger de l’application une fois compilée. Cela induit une meilleure vitesse de chargement par rapport à ses alternatives comme Angular, React ou Vue qui embarquent un « runtime ».
un code court et facile à appréhender : Svelte regroupe la logique, la structure et le style du code au sein d’un seul et même fichier .svelte, le rendant plus lisible et facilement maintenable.
une exécution plus rapide : pas de DOM virtuel pour Svelte, ce qui fait une couche de moins à exécuter lors des changements sur une page.
moins de risque d’effets de bord graphiques : le style des composants étant isolé, il n’affectera que celui-ci et non ses composants parents ou enfants.

Svelte a également ses petits défauts : outre une syntaxe parfois déconcertante, la communauté de développeurs et développeuses utilisant le framework/compilateur est aujourd’hui bien moins importante que celle des bien connus Angular, React ou Vue. Résoudre un problème grâce aux forums, trouver des ressources pour apprendre ou encore réutiliser des composants développés par un confrère peut alors s’avérer plus compliqué.

En résumé, Svelte est un framework encore jeune mais très prometteur, qui pourrait bien venir remettre en cause l’hégémonie du trio Angular, React et Vue. La vaste enquête annuelle de StackOverflow le place d’ailleurs en tête des frameworks Web préférés des développeurs pour l’année 2021.