Dezelfde applicatie in verschillende Javascript frameworks: welke is het beste? 

2 november 2021 | Daniël Vercouteren

Inleiding

Online zijn er honderden blogs te vinden met voor- en nadelen van de beste Javascript frameworks en daarmee ook honderden benaderingen waarom een framework ‘de beste’ zou zijn. (spoiler alert: er is geen ‘beste’!) Als je deze blogs leest merk je vaak één ding op en dat is dat ze voor 90% overeenkomen en vooral een opsomming maken zonder persoonlijke ervaringen te delen. Om ervaring op te doen in deze frameworks, denk ik dat het toch belangrijk is om een goede vergelijking te kunnen maken. Daarom heb ik dezelfde applicatie in verschillende frameworks gemaakt.

To-do applicatie

Naast Hello World is een to-do lijstje de meest gebruikte applicatie om een nieuw framework uit te testen. En dat is niet heel raar als je bedenkt dat in deze (op het eerste oog) simpele applicatie onder andere state management, event handling, lifecycle events en data binding terugkomt. Zo merk je al snel dat deze applicatie complexer is dan het in eerste instantie lijkt. 

Vanilla Javascript

Iedere Javascript developer moet kennis hebben van de standaard Javascript. Het gebruik hiervan is weliswaar geminimaliseerd, maar de basis van alle frameworks ligt hier nog steeds en alles wat gebouwd wordt, compileert hier nog steeds naar toe. Om de zoveel tijd zie je ook artikelen verschijnen met de titel "Do you really need a Javascript framework?" Om deze vraag te beantwoorden zal ik eerst de to-do applicatie in Vanilla JS bouwen. Ondanks dat inmiddels volgens mij bekend is dat het gebruik van een framework voor alles groter dan een basis stukje Javascript, meer voordelen dan nadelen heeft, neem ik toch nogmaals deze proef op de som

De basis voor deze applicatie is niet heel spannend. We hebben een lijst met items en een script die bij het invullen de lijst aanvult. Wat je gelijk merkt in Vanilla JS is dat alle elementen los moeten worden gedeclareerd. Het formulier, het invoerveld en de lijst worden drie variabelen. Vervolgens schrijven we een simpele functie die de tekst van het invoerveld toevoegt aan de lijst. Maar om deze te tonen moeten we eerst een nieuw element maken en daar vervolgens de innerHTML van updaten. Daarna kunnen we de lijst updaten met het nieuwe element. Super omslachtig voor zo’n basale actie als je het mij vraagt.

Afbeelding 1: Het overzicht in Vanilla JS is al snel weg

Voor een mini-applicatie als deze blijft het overzicht redelijk intact, maar zodra we ook maar iets gaan opschalen is het overzicht compleet verdwenen. De data en de UI staan door elkaar heen, echte controle over je code verdwijnt al snel en hiervoor zie ik maar één oplossing: Javascript frameworks.

Angular

Angular is gebouwd en onderhouden door Google en is het op-één-na meest gedownloade framework via NPM. Angular maakt gebruik van TypeScript wat zorgt voor een overzichtelijke en betrouwbare code.

Na installatie met de CLI tool is er direct een werkend project, waar je mee aan de slag kan gaan en dat werkt heel prettig. Als je voor de eerste keer een Angular project opent kan het wat onoverzichtelijk ogen, maar zodra je wat vaker met Angular werkt merk je ook dat dit al vrij snel vertrouwd aanvoelt en voor weinig problemen zorgt. Ieder component wordt namelijk opgebroken in drie files, één voor je template, één voor de logica en de laatste voor de styling. Dit overzicht zorgt ervoor dat je precies weet waar je moet zoeken als je iets wilt toevoegen of moet wijzigen.

Het two-way binding model van Angular zorgt er voor dat ingevoerde data afgehandeld kan worden. Ook het opslaan- en ophalen van data in local storage gebeurd in hetzelfde bestand. Een groot verschil ten opzichte van Vanilla JS is dat in de HTML templates van Angular wel direct duidelijk is welke event listeners er op elementen zitten en wat ze doen. Ook het gebruik van if- en for-statements in je templates zorgen voor een overzicht en geven duidelijk weer wat er verwacht wordt van het component.

Een standaard to-do applicatie maken met Angular voelt een beetje als overkill en dat is het ook. Het framework is gebouwd voor grote applicaties die veel data moeten kunnen verwerken, maar ondanks dat is het wel vrij makkelijk om de applicatie aan de praat te krijgen. De syntax is anders dan andere frameworks en dat is vooral even wennen als we kijken naar de lifecycle events en data handling, maar verder is het een prettig framework om in te werken.

React

React is momenteel het meest bekende framework. Het is erg flexibel, doordat het alleen de basis voor je applicatie geeft en vervolgens compleet op maat te maken is door packages toe te voegen. React maakt gebruik van JSX om componenten te bouwen.

Ook React heeft een CLI tool die een werkend project opzet met alle standaard functionaliteiten, waardoor je direct kan beginnen. Met React hooks slaan we de to-do items op en maken we een functie die de items weer aan de lijst toevoegt. Ook halen we data op uit de local storage met een hook. Deze manier van state management is overzichtelijk en makkelijk te gebruiken en voelt een stuk logischer dan wanneer je dit zou doen in Vanilla JS.

Met JSX is het direct duidelijk wat er gebeurd en doordat de logica en de UI in hetzelfde bestand zitten is het duidelijk wat ieder element doet en wat het verwacht. Een ander groot voordeel zijn de event listeners die direct toegevoegd kunnen worden aan de HTML, waardoor overzichtelijk te zien is welke event listeners er zijn en wat ze doen door middel van event binding. 

React is een duidelijk framework en vooroplopend als het gaat om declaratief programmeren, een trend die er voor zorgt dat developers op basis van de data een UI opbouwen en die in de toekomst de standaard zal worden. Het is hierbij wel belangrijk om te vermelden dat JSX een nieuwe manier van programmeren is die niet voor iedereen direct duidelijk is en waarbij de leercurve vrij hoog is, wat developers tegen kan houden om te beginnen (of door te gaan) met React.

Svelte

Svelte is een nog redelijk onbekend framework in dit lijstje, maar mag zich toch al tot een van de toppers noemen. Door het onderscheid in script, template en stijl is de leercurve laag en is het snel duidelijk hoe componenten opgebouwd dienen te worden.

In het template maak je gebruik van Svelte’s speciale syntax die vrij snel te leren is en in de documentatie goed is uitgewerkt. Voor onze to-do app gebruiken we zogenoemde directives om functies en waarden te koppelen aan het script. Op deze manier kunnen we met heel weinig code op een overzichtelijke manier een applicatie bouwen! De mount functie van Svelte is bekend uit andere frameworks en zorgt dat we functies kunnen uitvoeren die alleen bij het initiële laden uitgevoerd wordt. Deze manier van werken voelt heel vertrouwd en is gemakkelijk te leren.

In slechts 22 regels code hebben we een compleet werkende to-do applicatie geschreven in Svelte, welke snel te leren en te begrijpen is. De syntax is gemakkelijk te lezen als je ervaring hebt in Javascript development. Het is dan ook niet vreemd dat zo veel developers die met Svelte hebben gewerkt enthousiast zijn. Het grootste nadeel van Svelte is dat er momenteel nog weinig ondersteuning te vinden is en dat je bij problemen vooral op je eigen skills moet vertrouwen, aangezien er op StackOverflow slechts een hele kleine community actief is.

Afbeelding 2: De volledige code voor een to-do applicatie in Svelte

Conclusie

Eén ding kunnen we volgens mij vrij snel concluderen, wanneer je een applicatie maakt die groter is dan alleen een simpel to-do lijstje is het beter om gebruik te maken van een Javascript framework.  De keuze tussen welk framework is hierin puur gericht op smaak, grootte van het project, tijd om te leren en voorkeur.

Ben je op zoek naar een klein framework die je snel in kan richten en waarbij je vrij zelfstandig aan de slag wilt gaan, dan is Svelte een goede keuze. Wordt je applicatie groter en zwaarder is de keuze voor React of Angular verstandig, voornamelijk vanwege de grote hoeveelheid kennis die online beschikbaar is. De leercurve bij React is lager, maar hier komen wel veel losse onderdelen bij kijken in de vorm van packages. Op zich geen groot probleem, want schaalbaarheid is hierbij wel een fijne manier van werken. Bij Angular ligt de leercurve een stuk(je) hoger, maar zodra je hier doorheen bent is het prettig ontwikkelen en zie je duidelijk de verschillen tussen een framework en een library, waarbij Angular een stuk completer , maar minder flexibel is ten opzichte van React.

Afbeelding 3: Uiteindelijk werkt de to-do applicatie met ieder framework, de een wat makkelijker dan de ander.

Daniel Vercouteren
Front-end Developer

Veraartlaan 12 
2288 GM Rijswijk (ZH)
t. +31 (0)85 13 00 730
e. info@pong.nl
w. www.pong.nl

kvk 63374641
btw nr. NL855208958B.01
bank nr. NL 25 ABNA 0596 7045 34