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

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.

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. 

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.

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 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.

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

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.