Snel een JavaScript web app met Svelte!

Het is waar. In de wereld van JavaScript is er elke week wel een nieuw framework. De één nog meer gehypet dan de ander. Na zelf veelvuldig met de bekendste te hebben gewerkt, heb ik een duidelijke voorkeur: Svelte. Wat is het en waarom is het zo verrekte handig?

Snel een JavaScript web app met Svelte!

In Svelte gebruik je vanilla JavaScript-code. Vanilla wil zeggen dat het om JavaScript zonder extra framework gaat. Er zijn een paar syntax-toevoegingen. Die wordt gecompileerd tot een efficiënte JavaScript bundle die je op je website gebruikt. Bij Svelte laadt je op je website geen apart Svelte framework, alleen tijdens de build-stap doet Svelte iets. Dit heeft een aantal voordelen.

  1. Reactief | Svelte apps zijn echt reactief.
  2. Minder code | Voor Svelte apps heb je minder regels code nodig dan bijvoorbeeld React en zijn daarom simpeler te schrijven en begrijpen.
  3. Kleiner | Svelte apps zijn veel kleiner dan vergelijkbare React apps. Er is daardoor minder bandbreedte en CPU nodig.

Waar je focus ligt, bepaalt welk punt je het meest aanspreekt. De beginnende front-end programmeur zal vooral in het eerste punt geïnteresseerd zijn. Want ja, ook als beginner kun je prima uit de voeten met Svelte! Iemand die aan een grote, complexe app werkt, zal misschien ook het tweede punt belangrijker vinden. Goed, een hoop theorie. Laten we naar een voorbeeld kijken.

Een simpel Svelte-voorbeeld

Stel, je wilt een hele simpele app maken die bijhoudt hoe vaak iemand op een knopje heeft geklikt. Je kunt dat doen met het volgende stukje code.

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

<button on:click={handleClick}>
	Deze knop is {count}x geklikt
</button>

Zoals je ziet, is dit bijna vanilla JavaScript. Alleen de ‘{}’ notatie laat zien dat Svelte hier aan het werk is. De code spreekt redelijk voor zich, maar laten we er even kort doorheen lopen.

  • De variabele ‘count’ wordt geïnitialiseerd en er wordt een functie neergezet die de waarde van ‘count’ met één ophoogt.
  • De knop heeft een zogenaamde ‘event handler’. Die zorgt ervoor dat er een actie (het uitvoeren van ‘handleClick’) wordt uitgevoerd op het ‘event’ dat wordt gedefinieerd (in dit geval ‘click’).
  • Als laatste wordt de waarde van ‘count’ getoond met behulp van de ‘{}’ notatie. Het is dus niet nodig om code te schrijven die de HTML van de button aanpast, dat wordt allemaal automatisch voor je gedaan.

Stel, de app is heel succesvol en we willen deze uitbreiden. We willen bijvoorbeeld dat er wat anders komt te staan als er meer dan drie keer op de knop is geklikt. We kunnen dat als volgt doen.

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

<button on:click={handleClick}>
     {#if count <= 3}
	Deze knop is {count}x geklikt
     {:else}
 	Deze knop is al {count}x geklikt. Goed bezig!
     {/if}
</button>

Het enige verschil is dat we een conditional block hebben toegevoegd. Dit vind ik misschien wel het grootste voordeel: Svelte schrijft heel natuurlijk en intuïtief. Je hoeft je niet in bochten te wringen om een framework te volgen. Je schrijft eigenlijk gewoon in JavaScript (rekening houdend met de Svelte syntax natuurlijk) en Svelte zorgt voor de HTML (en DOM).

Een eenvoudig Svelte-voorbeeld.

Vergelijking met andere frameworks en libraries

React is het meestgebruikte front-end framework, dus laten we kijken hoe dezelfde teller-applicatie er in React uit zou zien.

class Counter extends React.Component {

    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }
	
    incrementCount = () => {
		this.setState(
            { count: this.state.count + 1 }
        );
	};
	
    render() {
        return (
            <button onClick={ this.incrementCount }>
	Deze knop is { this.state.count }x geklikt
            </button>
        );
    }
}

Als je React goed kent, is dit natuurlijk gesneden koek. Echter, zeker voor een beginner ziet het er een stuk meer intimiderend uit. En eigenlijk heb ik ook gewoon liever wat minder boilerplate. Dat zijn standaard stukken code die je voor bepaalde functionaliteiten nodig hebt.

In VueJs kan het al wat kleiner, maar naar mijn mening nog steeds niet zo simpel als in Svelte. Voor beginners is het prettig dat de app simpeler is, maar voor ervaren programmeurs die aan complexe projecten werken, geldt dit misschien nog wel meer. Meer regels code geeft immers meer kans op bugs.

Hoeveel sneller en kleiner is Svelte?

Het hangt natuurlijk behoorlijk af van de applicatie die je bouwt, maar het is zomaar mogelijk dat een React app twee keer zoveel regels code heeft als een Svelte app die hetzelfde doet. Vue zit daar een beetje tussenin.

Svelte is klein dan bijvoorbeeld een React of Vue app.

Wat performance betreft denk ik eerlijk gezegd dat je je daar bij geen van de frameworks echt druk over hoeft te maken. Het is prettig te weten dat Svelte sneller is dan React en Vue, maar in de praktijk zal de gebruiker eigenlijk geen verschil merken. Wellicht wel als de applicatie erg complex is.

Wat nog wel van belang kan zijn, is de uiteindelijke grootte van het geheel. Bij een React of Vue app moet ook nog altijd het framework zelf geladen worden (132 KB voor React en 62 KB voor Vue), Svelte compileert de applicatie tot alleen een JavaScript-bestand (0 KB extra dus). Voor mobiele gebruikers kan dit verschil wel merkbaar worden.

Hoe kan ik Svelte leren?

Ikzelf heb Svelte geleerd met behulp van de officiële tutorial, die vind ik erg goed in elkaar zitten. De basis wordt doorgenomen en stapje voor stapje leer je interactief om ingewikkeldere dingen te doen. Ook als je nog maar weinig ervaring met JavaScript hebt, is het denk ik goed te doen.

Daarnaast geldt natuurlijk de klassieke regel: leren doe je door te doen! Als je een specifiek doel hebt, dan is dat nog beter. Ik wilde een calculator maken om uit te rekenen hoeveel een elektrische auto per maand kost. Met dat doel voor ogen ging het eigen maken van dit nieuwe framework nog sneller.

Hoe kan ik Svelte op mijn website gebruiken?

Ik zou je in ieder geval aanraden om op de website van Svelte te beginnen. Daar staat namelijk een online editor die je Svelte in je browser laat gebruiken, een zogenaamde REPL. Als je enthousiast wordt, dan kun je op de volgende manier aan je eigen JavaScript app gaan werken.

  • Zorg dat je Node.js op je lokale machine hebt geïnstalleerd. Node.js is een JavaScript framework voor de server. Dit is uiteindelijk niet nodig voor de Svelte-applicatie. Echter, omdat de Svelte code gecompileerd wordt, is Node.js in die stap wel noodzakelijk. Het is dus niet nodig op het hostingpakket. Hier vind je meer informatie over Node.js installeren.
  • Installeer degit met behulp van npm.
npm install -g degit
  • Je bent nu klaar om de Svelte development-omgeving op te starten.
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev
  • Je kunt nu src/App.svelte aanpassen en in je browser op localhost:5000 direct live het resultaat bekijken.

Svelte web app bekijken via localhost:5000.

Conclusies

Het is een hele kort introductie, maar hopelijk ben je nieuwsgierig geworden naar de mogelijkheden. Svelte kan namelijk nog veel meer. Zo is het mogelijk om bijvoorbeeld stukjes code te laten reageren op veranderingen. In de teller-applicatie zou je het volgende kunnen toevoegen. De variabele ‘doubled’ zal dan altijd meeveranderen, zodra ‘count’ verandert.

$: doubled = count * 2;

Verder is Svelte component-gebaseerd, zodat je makkelijk stukjes code met verschillende functionaliteiten apart kunt op slaan. Ook heeft het automatische style scoping, zodat de CSS voor een specifieke component alleen voor dat component geldt. Denk tevens aan ingebouwde transitie-effecten en nog veel meer.

Op de website van Svelte vind je documentatie en een tutorial. Daarnaast zijn er nog afgeleide projecten, zoals Sapper. Daarmee kun je back-end code met front-end Svelte code combineren. Ook heb je Svelte native, waarmee je native mobiele applicaties kunt maken. Dit staat nog wel echt in de kinderschoenen.

Aan de slag

Zin om te beginnen? De tutorials op de website van Svelte zijn in anderhalf tot twee uur helemaal door te werken, dus waar wacht je nog op! 🙂

Dit artikel is geschreven door Jorma de Ronde, oprichter van ofof.nl. Bedankt voor de bijdrage!

P.S. Op de hoogte blijven van alle artikelen, updates, tips en trucs die op ons blog verschijnen? Volg ons via Facebook, Twitter, Instagram, RSS en e-mail!

Deel Deel Deel Deel

4 reacties op “Snel een JavaScript web app met Svelte!

  1. Bas Burger op zei:

    Zijn dit soort scripts ook te gebruiken binnen een WordPress website en zo ja kan je die dan op je hostinpakket maken of moet je die op je eigen lokale pc maken en dan uploaden?

    • Svelte apps kun je binnen elk platform gebruiken, dus ook binnen WordPress. Je maakt inderdaad eerst de app op je eigen lokale PC aan en uploadt het daarna naar je website. Het script kun je dan met een standaard tag in WordPress importeren.

      Waar je wel op moet letten, is dat de app op het juiste HTML-element aanhaakt. Dit kun je in main.js specificeren. Zie ook: https://twitter.com/sveltejs/status/1125540492194742272

  2. Sebastiaan ten Pas op zei:

    Het stukje React ziet er misschien minder eng uit als je function components gebruikt:

    const Counter = () => {
    const [count, setCount] = useState(0);
    return (
    setCount(count + 1)}
    >
    Deze knop is {count}x geklikt

    );
    };

    Desalniettemin is Svelte een interessante (relatief) nieuwe speler in de wereld van de JavaScript!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *