Svelte en Sveltekit; nieuwe spelers in het Front-End landschap

Wat maakt Svelte interessant?

Svelte is heel anders in opzet dan bijvoorbeeld React of Angular. Het lijkt eerder op Vue, maar dan nog eenvoudiger. Net zoals bij Vue, maak je gebruik van één bestand voor de styling, de structuur en de logica. Alleen gebruik je bij Vue een .vue bestand, en bij Svelte een .svelte bestand.

Nu is dat niet zo schokkend, maar interessanter is dat Svelte duidelijk andere keuzes maakt dan de drie grote namen. Svelte is zo licht en compact dat het tijdens ontwikkelen een build kan doen in compile-time. Dat betekent dat andere frameworks nog een apart build-proces moeten doorlopen terwijl Svelte direct te gebruiken is. En alles wat niet gebruikt wordt uit het framework, wordt er netjes uitgelaten. Dit wordt tree-shaking genoemd. Andere frameworks doen dit ook, maar Svelte gaat hier zo ver in, dat Svelte code helemaal verdwijnt…

Het unieke van Svelte; het verdwijnt…

Bij veel andere frameworks dient er altijd nog een import te worden gedaan van het framework zelf. In het geval van Svelte is dat niet het geval. De gegeneerde code is alles wat je nodig hebt.

Als we kijken naar het onderstaande codeblock, dan zien we Svelte code waarin een variabele wordt gedefinieerd (genaamd “count”) met een waarde 0. Onderaan zien we de template voor een button, met een on:click handler. Elke keer als er op de button geklikt wordt, wordt “count” verhoogd met 1. Dan zien we iets bijzonders. Op regel 4 staat een $:. Dit betekent dat Svelte dit block aan het watchen is. Dit wordt een Reactive Statement genoemd.

Zodra dit if block true is, is wordt het direct uitgevoerd. In dit geval geeft de browser een waarschuwing, dat “count” nu wel heel hoog wordt.

<script>
	let count = 0;

	$: if (count >= 10) {
		alert(`count is dangerously high!`);
		count = 9;
	}

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Natuurlijk is dit geen 🚀-science, maar vooral het feit dat het zo weinig regels code nodig zijn om dit te bereiken vind ik toch een aardige prestatie. Evenals de Reactive statement: het is geen functie die moet worden afgetrapt; het gebeurt gewoon.

Sveltekit (Svelte + SSR + Routing + nog veel meer)

Naast Svelte als JavaScript framework, is er ook SvelteKit. Dit is meer in lijn met een framework als Nextjs of Nuxt. Oorspronkelijk werd dit in de bèta fase gelanceerd onder de naam Sapper. Sveltekit is nu net uit bèta en biedt Svelte als basis met nog veel meer extra’s zoals Server Side Rendering (SSR) en Routing (de routering van de pagina’s van een website of applicatie). Ook is het mogelijk om Progressive Web Apps te maken met Sveltekit, doordat het slim om kan gaan met caching en ondersteuning voor offline gebruik.

Conclusie; Svelte Zeker de moeite waard

Svelte heeft de laatste jaren een vlucht genomen en is een goede speler geworden binnen het JavaScript landschap. Dit komt ook zeker terug in onderzoeken onder developers. Zo werd het verkozen tot het meest prettige framework om mee te werken in de State of JS 2020 (State of JS 2020: Front-end Frameworks).

Wil jij ook aan de slag met Svelte? Onze Front-End developers gaan hier graag samen met jou mee aan de slag. Neem vooral eens vrijblijvend contact op om de mogelijkheden te bespreken.