Wat is Svelte?

De drie grote jongens: Angular, React en Vue hebben er weer een concurrent bij: Svelte. Dit is een JavaScript framework bedacht door Rich Harris, die als doel had om de code van moderne web applicaties leesbaarder te maken. Dit wilde hij bereiken door de boilerplate code te reduceren en meer focus te leggen op de developer experience.

Niet alleen is de code compacter en leesbaarder maar is de bundel-grootte kleiner en de applicatie een stuk sneller.

Rethinking reactivity

Svelte is een echt reactive framework, dit komt doordat het op een hele andere manier gebouwd is. Svelte maakt niet, zoals React dat doet, gebruik van een virtual dom en een setState methode maar kijkt of variabelen opnieuw worden toegewezen door de = operator. Dit zorgt ervoor dat het niet steeds door de dom tree hoeft te lopen en de nieuwe met de vorige nodes hoeft te vergelijken. Dit komt doordat Svelte precies weet welke variabele geüpdate moet worden door wat er in de compiler al gebeurd is.

Een compiler als framework

Elk framework neemt onnodig veel lappen code mee naar de productie omdat het nog niet weet wat er opnieuw moet gerenderd worden, je neemt dus niet alleen jouw code mee maar ook een stuk van het framework zelf, Svelte lost dit op door een compiler te maken die deze stap al voor de runtime doet, dit zorgt ervoor dat je bundle grootte kleiner wordt (in sommige gevallen zijn je applicaties kleiner dan een framework).

Voorbeelden

Nog niet overtuigd? Hier volgt een voorbeeld van een simpele todo applicatie:

Zoals je ziet lijkt de syntax veel op die van Vue.js, alleen is het leesbaarder met minder code. Svelte komt ook met een Store module wat vergelijkbaar is met VueX, Redux of NGRX. Met deze module kan je heel makkelijk je state delen in meerdere componenten door middel van een observable, hieronder zie je nog een voorbeeld:

Wat je nu hebt is een simpele data store met twee methodes: add, remove en een $todos observable, je kan nu simpelweg todo importeren vanuit stores.js en gebruiken in andere componenten.

Zelf aan de slag?

Natuurlijk kan je zelf ook aan de slag en kijken of dit een framework is wat bij jou past. Om te beginnen raad ik je aan om de online IDE gebruiken en de tutorials te volgen.