Svelte

Svelte
Ontwikkelaar(s)	Rich Harris
Uitgebracht	29 november 2016 (7 jaar)
Recentste versie	4.2.11 (15 februari 2024)[1]
Status	Actief
Besturingssysteem	multiplatform
Geschreven in	TypeScript
Categorie	JavaScriptframework
Licentie(s)	MIT-licentie
Versiebeheer	github.com/sveltejs/svelte
Website	(en) svelte.dev
Portaal    Informatica

Svelte is een opensource front end compiler, ontwikkeld door Rich Harris en onderhouden door de Svelte coreteamleden. Svelte is geen JavaScript library om te importeren in applicaties, maar compileert HTML sjablonen naar code dat de DOM direct bewerkt, wat de grootte van de applicatie kan verminderen en de snelheid kan verbeteren. Ook worden calls toegevoegd om automatisch elementen opnieuw te renderen wanneer de data waarop het gebaseerd is veranderd. Dit voorkomt de overhead dat komt kijken bij virtuele representaties (zoals bij React en Vue), die het meeste werk in de browser doen. De compiler is geschreven in TypeScript. De broncode is gelicenseerd onder de MIT-licentie en wordt gehost op GitHub.^[2]

Geschiedenis

De voorganger van Svelte is Ractive.js, dat eerder door Rich Harris werd ontwikkeld.^[3] De eerste versie van Svelte is geschreven in JavaScript en werd uitgebracht in 2016, gevolgd door een tweede versie in 2018. Versie 3, de huidige versie, is geschreven in TypeScript en kwam uit in 2019. Het SvelteKit-webframework werd aangekondigd in oktober 2020 en ging in maart 2021 de bètaversie in.^[4]

Gebruik

Svelte wordt veelal geprezen door ontwikkelaars. In de State of JS-enquête in 2020 en 2021 kwam het naar voren als het frontendframework met de meest tevreden ontwikkelaars, en in een Stack Overflow-enquête in 2021 als meest geliefde webframework.^[5][6] Svelte is eerder al gebruikt door een aantal grote bedrijven, waaronder The New York Times, Apple, Spotify, Bloomberg, Reuters, Ikea, en Facebook.^[7][8]

Voorbeeld

Svelte-applicaties en componenten worden geschreven in .svelte-bestanden. Dit zijn HTML-bestanden die zijn uitgebreid met een sjabloonsyntax die vergelijkbaar is met JSX, wat door onder andere React gebruikt wordt. Svelte gebruikt de Javascript-syntax for gelabelde beweringen, $:, om reactieve variabelen te markeren. Geëxporteerde variabelen zijn de eigenschappen die een component ontvangt.

<script>
    let aantal = 1;
    $: dubbel = aantal * 2;
</script>

<p>{aantal} * 2 = {dubbel}</p>

<button on:click={() => aantal++}>Aantal</button>