Svelte : le framework JavaScript à compilateur

Qu'est-ce que Svelte ?

Svelte est un framework pour construire des interfaces web. Vous écrivez des composants en HTML, CSS et JavaScript, et le compilateur Svelte les transforme à la compilation en JavaScript léger et optimisé. Au lieu d'embarquer un runtime qui compare un DOM virtuel, Svelte génère du code de mise à jour ciblé. SvelteKit est son framework compagnon pour les applications complètes.

Comment fonctionne Svelte

Un fichier .svelte contient du balisage, des styles limités au composant et un script. À la compilation, le compilateur l'analyse et produit du code qui met à jour exactement les parties de la page dépendant de l'état modifié. Rich Harris, créateur de Svelte, l'a résumé ainsi : Svelte est un compilateur qui sait dès la compilation comment les choses peuvent changer dans votre app. En pratique, on construit avec Vite, directement ou via SvelteKit.

Les runes dans Svelte 5

Svelte 5 a introduit les runes, des symboles préfixés par $ qui pilotent le compilateur et ne demandent aucun import. $state déclare un état réactif, $derived calcule une valeur à partir d'un autre état et $effect exécute des effets de bord, par exemple après la mise à jour du DOM. Svelte 5 prend toujours en charge la syntaxe de Svelte 4 et les composants anciens et nouveaux peuvent se mélanger : la migration peut être progressive.

<script>
  let count = $state(0);
  let double = $derived(count * 2);
</script>

<button onclick={() => count++}>
  {count} x 2 = {double}
</button>

Le compilateur réécrit chaque référence à count en opération sur un signal : vous lisez et écrivez la variable normalement, sans .value.

Erreurs fréquentes

• Mélanger ancienne et nouvelle réactivité. Les instructions $: et les runes se comportent différemment. Un composant en mode runes suit les nouvelles règles : par exemple, les props ne sont liables qu'avec $bindable.
• Abuser de $effect. Si une valeur se calcule à partir d'un autre état, utilisez $derived. Le guide de migration indique que c'est le bon choix la plupart du temps.
• Attendre des instances de classe réactives. $state met en proxy les objets simples et les tableaux, pas les instances de classe. Placez $state sur les champs de la classe.
• Confondre Svelte et SvelteKit. Svelte rend des composants. Le routage, le rendu serveur et le chargement de données viennent de SvelteKit.

Tester et surveiller une application Svelte

La documentation Svelte recommande Vitest pour les tests unitaires et de composants avec Vite, Testing Library pour les composants, et Playwright pour les tests de bout en bout, qui ignorent Svelte et passent par le DOM. Si un site Svelte est rendu côté serveur puis hydraté, vérifiez aussi le parcours réel dans un navigateur. Pour une introduction, voir qu'est-ce que Playwright. Avant la mise en ligne, LoadFocus load testing montre le comportement de votre serveur et de vos API sous trafic. En production, LoadFocus API monitoring vérifie les endpoints selon un calendrier et, sur les offres payantes, exécute des checks navigateur Playwright. Comparez les approches dans surveillance synthétique et surveillance des utilisateurs réels.

Questions fréquentes

Svelte utilise-t-il un DOM virtuel ?

Non. Son créateur le décrit comme un compilateur qui sait dès la compilation comment les choses peuvent changer : il produit du code de mise à jour du DOM ciblé au lieu de comparer deux arbres virtuels à l'exécution.

Que sont les runes de Svelte ?

Ce sont des symboles préfixés par $, comme $state, $derived et $effect, qui pilotent le compilateur. Ils sont arrivés avec Svelte 5.

Svelte est-il identique à SvelteKit ?

Non. Svelte est le framework de composants. SvelteKit est le framework d'application pour le routage, le rendu serveur et les applications full stack.

Peut-on encore utiliser la syntaxe de Svelte 4 ?

Oui. Le guide de migration indique que Svelte 5 prend toujours en charge l'ancienne syntaxe et permet de la mélanger avec les runes.

Comment tester une application Svelte de bout en bout ?

Avec un outil de navigateur comme Playwright. Il pilote le vrai DOM et fonctionne donc pour Svelte comme pour tout autre framework.