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:
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.
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
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 en opkomend 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. Om dit zelf te ervaren is het aan te raden op bijvoorbeeld een klein demo project voor jezelf op te zetten.
Meer informatie is te vinden op: https://svelte.dev/.
