Svelte
Cet article est une ébauche concernant l’informatique.
Vous pouvez partager vos connaissances en l’améliorant (comment ?) selon les recommandations des projets correspondants.
| Développé par | Rich Harris (d) |
|---|---|
| Première version | [1] |
| Dernière version |
3.59.2 ()[2] 4.2.11 ()[3] |
| Dépôt | github.com/sveltejs/svelte |
| Écrit en | JavaScript et TypeScript |
| Système d'exploitation | Multiplateforme |
| Type |
Framework JavaScript (en) Langage de programmation Compilateur Framework web Bibliothèque JavaScript |
| Licence | Licence MIT |
| Site web | svelte.dev |
Svelte est un framework JavaScript libre et à code ouvert écrit par Rich Harris (d) 
. Le framework est écrit en TypeScript. Son code source utilise la licence MIT et est hébergé sur GitHub[4].
Histoire
[modifier | modifier le code]Avant de créer Svelte, Rich Harris a créé Ractive.js[5].
La toute première version de Svelte date du 29 novembre 2016. 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 octobre 2020 avant d'être publié en bêta en mars 2021. Il sort officiellement en version 1.0 le 14 décembre 2022[6]. 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[7].
Réactivité
[modifier | modifier le code]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[8]. 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 par 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[9].
Exemple d'utilisation
[modifier | modifier le code]Les composants Svelte sont définis dans des fichiers .svelte, 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
[modifier | modifier le code]
Notes et références
[modifier | modifier le code]- « https://svelte.dev/blog/frameworks-without-the-framework »
- « Release 3.59.2 », (consulté le )
- « Release 4.2.11 »
- (en) « Svelte - Cybernetically enhanced web apps »
, sur github.com (consulté le )
- « About the Svelte JavaScript framework », sur ValueLogic | Blog, (consulté le )
- (en) Svelte Team, « Announcing SvelteKit 1.0 », sur svelte.dev, (consulté le )
- (en) « Introduction • Docs • SvelteKit », sur kit.svelte.dev (consulté le )
- (en) « Course Intro », sur vercel.com (consulté le )
- (en) Rich Harris, « Virtual DOM is pure overhead », sur svelte.dev, (consulté le )
- (en) Cet article est partiellement ou en totalité issu de l’article de Wikipédia en anglais intitulé « Svelte » (voir la liste des auteurs).
Liens externes
[modifier | modifier le code]- (en) Site officiel
- (en) sur GitHub
