Svelte est un framework JavaScript libre et à code ouvert écrit par . Le framework est écrit en TypeScript. Son code source utilise la licence MIT et est hébergé sur GitHub.
Histoire Avant de créer Svelte, Rich Harris a créé Ractive.js.
La toute première version de Svelte date du . Elle a été écrite en Javascript. Ce n'est qu'à partir de la version 3 que Svelte utilise TypeScript.
SvelteKit, un autre framework basé sur Svelte, est annoncé en avant d'être publié en bêta en . Il sort officiellement en version 1.0 le . Il a pour but d'étendre les fonctionnalités du simple rendu de composants, et peut à certains égards être assimilé à ce que sont Next et Nuxt pour React et Vue respectivement.
Réactivité Le nom de Svelte dénote l'intention de son auteur de rendre le framework léger, performant et efficace. En effet, Svelte a été construit comme un compilateur contrairement à la plupart des autres framework JavaScript. Le code envoyé en production ne comporte donc seulement que du code traduit en pur JavaScript, HTML et CSS, ce qui participe de sa performance et de sa légèreté. Par ailleurs, Svelte ne s'appuie pas sur un DOM virtuel pour procéder aux changements de ce dernier, préférant réaliser des changements « chirurgicalement » sur le DOM directement, lorsque l'état change.
Exemple d'utilisation Les composants Svelte sont définis dans des fichiers , qui sont des fichiers HTML étendus avec une syntaxe de modèle similaire à JSX. <script> let name = "Henry" </script>
<h1>Bonjour {name} !</h1>
<style> h1 { color: blue; } </style>
La balise <script> permet d'écrire du code en JavaScript standard, mais avec la particularité que les blocs de code préfixés d'un $: sont interprétés comme des déclarations réactives : la réassignation d'une des variables du bloc entraîne la ré-exécution du bloc.
<script> let nombreDeClics = 1 $: double = nombreDeClics * 2 </script>
<p>{nombreDeClics} * 2 = {double}</p>
<button on:click={() => nombreDeClics = nombreDeClics + 1}>nombreDeClics</button>
Svelte 5 - les Runes
À partir de Svelte 5, Svelte propose une nouvelle syntaxe, appelée « rune », pour gérer la réactivité, c'est-à-dire la synchronisation entre l'état et le DOM.
Ces runes comprennent :
La rune $state, utilisée pour déclarer une valeur d'état réactive.
La rune $derived, utilisée pour déclarer un état réactif dérivé d'un ou plusieurs états.
La rune $effect, utilisée pour déclarer du code qui est exécuté à chaque fois que ses dépendances changent.
Notes et références
Liens externes Site officiel sur GitHub
Catégorie:AJAX Catégorie:Langage de script Catégorie:Langage pour pages Web dynamiques Catégorie:Technologie web Catégorie:Norme ECMA