Svelte, een populair front-end framework

Bij het maken van een webapplicatie moet de ontwikkelaar altijd kiezen welk front-end framework er gebruikt gaat worden. Vaak wordt hier gekozen voor één van de grote namen in de front-end wereld, zoals React.js, Angular of Vue.js. Naast deze populaire frameworks is er ook een nieuw opkomend framework wat steeds vaker wordt gekozen, namelijk Svelte. Svelte is een steeds populairder framework aan het worden en wordt steeds meer gebruikt, maar wat is Svelte en waarom wordt het steeds populairder?
svelte logo

Wat is Svelte?

Svelte is een open-source, front-end javascript framework voor het maken van interactieve webpagina’s. Svelte applicaties zijn component based en maken gebruik van een DOM net, zoals React en Vue. Svelte heeft echter wel een aantal unieke features waardoor het nogal verschilt van bestaande frameworks. Svelte is niet zomaar erg populair onder de developers. Als je kijkt naar de jaarlijkse stackoverflow survey zie je dat Svelte ook een van de meest geliefde web frameworks is op dit moment:

Bron: https://insights.stackoverflow.com/survey/2021#technology-most-loved-dreaded-and-wanted

Svelte heeft drie hoofd features wat zorgt dat het een aantrekkelijk framework is.  Deze features zijn:

  • Minder code
  • Geen virtuele DOM
  • Geheel reactive

Minder code

Één van de grootste pluspunten aan Svelte is dat je als developer minder code hoeft te schrijven. Dit zorgt ervoor dat een developer  sneller webpagina’s kan maken en er minder kans op bugs zijn, omdat er minder code is geschreven. Dit is goed te zien in dit  voorbeeld. In onderstaande afbeeldingen is dezelfde applicatie te zien, de linker is in React gemaakt en de rechter in Svelte.

https://svelte.dev/

Waar je in React 30 lines aan code nodig hebt, gebruikt Svelte hier maar 11 lines. Dit is natuurlijk een simpele applicatie, maar zodra de webpagina’s steeds complexer en groter worden, groeit de meerwaarde.

Geen virtuele DOM

Eerder werd aangegeven dat Svelte een framework is, maar technisch gezien is Svelte een compiler. Dit is ook gelijk het grootste verschil met de andere populaire front-end technologieën. Waar React en Vue het meeste werk op de webpagina zelf uitvoeren in de browser, verplaatst Svelte dit werk naar de compile stap van de applicatie. Hierdoor heeft het een aanzienlijke performance boost in vergelijking met  andere frameworks.

Omdat de code in native Javascript wordt gecompileerd, stelt het Svelte instaat om gebruik te maken van een echte DOM, in plaats van een virtuele DOM. In de virtuele DOM worden updates aan de pagina’s eigenlijk vrij omslachtig verwerkt. Op de achtergrond wordt bij een state verandering de huidige pagina vergeleken met de vorige versie van de pagina (snapshot) en aan de hand hiervan wordt een nieuwe pagina gemaakt waar de veranderingen weer in zijn gegeven. Bij een echte DOM wordt een state verandering in de specifieke node (HTML element) aangepast zonder het omslachtige vergelijken van de snapshots. Dit maakt Svelte sneller dan populaire frameworks zoals React.js en Vue.js.

Geheel reactive

Omdat de code van Svelte wordt gecompileerd naar native Javascript is Svelte instaat om volledige reactive te zijn. Dit houdt dus in dat een bestaande weergegeven variabele automatisch wordt bijgewerkt op een pagina, wanneer deze variabele op de pagina, zoals een cijfer in het eerdere counter voorbeed, wordt geüpdatet. Hier is dus geen State logica voor nodig, zoals bij React.js en Vue.js wel ziet. Dit maakt het een stuk makkelijker om met Svelte te werken en hierdoor vraagt Svelte ook een veel kleinere learning curve dan andere web frameworks.

De voor- en nadelen van Svelte

De voor- en nadelen van Svelte

Ondanks alle voordelen van Svelte zijn er ook wel wat nadelen. Svelte is namelijk nog vrij nieuw en heeft hierdoor nog minimale tools en packages vergeleken met de frameworks, welke al jaren intensief gebruikt wordt door een grote community. Daarnaast is Svelte een community project en wordt het nog niet gesteund door een groot bedrijf, zoals React door Facebook wordt gesteund.

Svelte is dus een nieuw &opkomende web framework, welke een iets andere filosofie heeft dan de huidige populaire frameworks. Dit brengt een aantal grote voordelen met zich mee. Bij Svelte schrijf je als developer minder code en is de code wat je schrijft volledig reactive. Dit maakt de learning curve een stuk kleiner en de code een stuk gemakkelijker om te lezen en te begrijpen. Svelte maakt ook geen gebruik van een virtuele DOM maar van een echte DOM, waardoor het sneller is dan de meeste populaire frameworks op het moment.

Naast dat Svelte veel voordelen heeft, zijn er ook nog een paar nadelen. Omdat Svelte een community project is en geen groot internationaal bedrijf achter zich heeft staan, ontbreekt er wat standaard support en is het merkbaar dat het nog in de kinderschoenen staat. Daarnaast is de documentatie wel goed maar soms kort door de bocht. Svelte is relatief nieuw en hierdoor heeft het ook nog een kleine community, dit heeft als gevolg dat Svelte niet zoveel tools/packages beschikbaar heeft als de populairdere frameworks.  

Voordelen:

  • Geheel reactive
  • Kleine applicatie grote
  • Kleine learning curve
  • Snelheid
  • Bijzonder gemakkelijk om te lezen en te begrijpen door eenvoudige syntax

Nadelen:

  • Geen support van een groot bedrijf
  • Beperkte tools en packages
  • De bestaande tools staan nog in de kinderschoenen
  • Documentatie is goed, maar komt soms kort door de bocht
  • Nog geen grote community, dus gebrek aan support op online fora

Svelte is zeker een aanrader en om zelf Svelte te ervaren kan je er misschien zelf een klein demo projectje in maken. Meer informatie over Svelte is te vinden https://svelte.dev/.

Onderwerpen

Delen

Benieuwd wat Carthago voor jou kan betekenen?