title: Svelte
text: 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.
  
  Geschiedenis 
  De voorganger van Svelte is Ractive.js, dat eerder door Rich Harris werd ontwikkeld. 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.
  
  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. Svelte is eerder al gebruikt door een aantal grote bedrijven, waaronder The New York Times, Apple, Spotify, Bloomberg, Reuters, Ikea, en Facebook.
  
  Voorbeeld 
  Svelte-applicaties en componenten worden geschreven in -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>
  
  Software geschreven in JavaScript