Het kiezen van een front-end framework is cruciaal wanneer je je project opzet. Het is een beslissing waar je gedurende lange tijd achter moet blijven staan. Een complete (web)app later omschrijven naar een nieuw javascript framework is namelijk veel werk. Het laatste wat je wil is een lang en vermoeiend migratie traject omdat je keuze voor je framework niet goed is geweest.

Daarom hoop ik je hiermee wat inzicht te geven in een drietal populaire frameworks, en waarom je wel of niet hiervoor moet kiezen. Ik neem Angular, Vue en React onder de loep.

Angular

Angular is een framework dat in 2010 door Google gepubliceerd werd onder de naam ‘AngularJS’. In 2016 werd Angular (ook wel Angular 2+) uitgebracht die enkele kinderziektes van het oorspronkelijke framework had opgelost. Intussen zitten we op versie 11, en elke zes maanden wordt er een nieuwe versie uitgebracht met verbeteringen. 

Het grote voordeel van Angular is dat je een hoop ‘building blocks’ al ingebouwd hebt wanneer je het framework installeert. Een HTTP client, Routing, Form validation en State management zitten allemaal in Angular, klaar voor gebruik. Dit betekent dat al deze elementen niet met een 3rd party library ingeladen hoeven te worden. Ze zitten al in het framework, en developers mogen er daarom van uit gaan dat het intensief getest is en er weinig dilemma’s zullen ontstaan over bijvoorbeeld libraries die niet meer (goed) functioneren wanneer je Angular gaat upgraden.
Dit gaat gepaard met de nodige filesize dus daarin legt Angular het af tegenover de twee concurrenten die ik zo ga bespreken.

(Mede) omdat Angular een framework is, heeft het een duidelijke mening over hoe applicaties gestructureerd moeten worden. Google heeft hiervoor een vrij uitgebreide styleguide geschreven met alle do’s en don’ts in hun ogen. Dit kan wat sterk aanvoelen, want ik bepaal toch zelf wel hoe ik mijn applicaties indeel. Maar als de de styleguide doorleest zie je dat er veel zinvolle dingen in staan, en dat het volgen ervan toegevoegde waarde heeft. In mijn ervaring kan het dus wat houvast geven binnen een development team over hoe een applicatie ingedeeld dient te worden. Ik zou het dus beschouwen als pluspunt. Zeker het werken in modules en het scheiden van HTML, Typescript en (S)CSS is een stap in de richting van cleane overzichtelijke code.

Een groot pluspunt van Angular is tevens de manier waarop het formulieren afhandelt. Toegegeven, React en Vue bieden hier ook oplossingen voor. Maar dit komt niet in de buurt van de reactive forms die met Angular gebouwd kunnen worden. Het is een ideale manier om complexe formulieren te bouwen waar velden conditioneel weergegeven moeten worden en de validatie afhangt van hoe het formulier is ingevuld.

Angular heeft historisch gezien een voorsprong op de concurrenten, omdat dit eigenlijk het eerste serieuze front-end framework is. Het heeft dus het meeste tijd gehad om zich tot een volwassen framework te ontwikkelen. In de banenmarkt zie je dit ook terug; De meeste vraag is (nog) naar Angular ontwikkelaars.

De banenmarkt voor Angular is van de drie grote frameworks het aantrekkelijkst.

De learning curve van Angular is wel een stukje hoger dan dat van de andere twee frameworks. Wanneer je voor het eerst met Angular werkt, duurt het even om een feel te krijgen voor de modules, routing en forms. Maar hoe meer je ermee werkt, hoe meer je in zult zien dat het allemaal toegevoegde waarde heeft.

En dan kom ik op mijn laatste punt: de community. Hoewel Angular in het begin stadium een flink aantal users voor zich heeft gewonnen, worden ogen nu toch ook gericht op de twee concurrenten die in vacatures, op github en op front-end conferenties meer en meer hun stempel drukken op de manier waarop we applicaties ontwikkelen.

Bottom line van Angular

Als bottom line zou ik kunnen stellen dat Angular zeer volledig is. Het heeft een duidelijke filosofie over hoe applicaties gebouwd moeten worden, wat zeker in het voordeel van de developers kan werken. Nadelen / risico’s van Angular zijn dat de filesize van het framework aanzienlijk groter is. Daarnaast heeft het voor beginners een wat hoge leercurve en moet ik toch vaststellen dat de community langzaam afneemt waar de populariteit van Vue en React toeneemt.

Als je bereid bent de leercurve te overbruggen is Angular een uitstekende oplossing voor bijvoorbeeld een complexe applicatie die veel en ingewikkelde formulieren bevat. 

Vue

Vue is in 2015 uitgebracht door Evan You. Het onderscheidde zich op dat moment alleen al omdat het geen organisatie, maar een individu is die het framework uitbracht. Angular en React worden door grote software organisaties onderhouden en dit kan er in het geval van Angular bijvoorbeeld voor zorgen dat wijzigingen gebaseerd zijn op de nieuwe implementaties van Google. Een grote organisatie beslist de mogelijkheden en beperkingen van het framework. Omdat Vue een stuk onafhankelijker is wordt het meer gedragen door een opkomende community. Er zal bij Vue ook meer naar de community worden geluisterd bij het uitbrengen van features. Mocht je interesse hebben in hoe Vue tot stand is gekomen dan raad ik deze honeypot documentaire aan.

Evan You legt in de Vue.js documentaire uit hoe hij op het idee van Vue kwam.
Credit: Honeypot.io

Technisch gezien werkt Vue in componenten. Je kan hierin kiezen voor .vue bestanden (waarin template, logica en styling zich allemaal in 1 bestand bevinden) of voor een opsplitsing hiervan in HTML, (S)CSS en Javascript of Typescript. Typescript is trouwens optioneel in Vue. Hierin verschilt het van Angular, waar Typescript de default is, en er wordt verwacht dat je hier als developer gebruik van maakt. In mijn ogen zou Typescript de default moeten zijn. Het geeft de mogelijkheid om de applicatie beter te structureren en meer controle te houden over de flow van data binnen je applicatie.

Vue heeft iets minder features ingebouwd. State management is er wel, maar een ingebouwde HTTP Client ontbreekt bijvoorbeeld. Hiervoor wordt normaalgesproken gebruik gemaakt van Axios, en dit zal je in je project moeten importeren als je wil communiceren met een API.

Om Vue nog wat meer kracht te geven is het meta-framework Nuxt ontwikkeld. Ik gebruik voor mijn eigen Vue projecten altijd Nuxt. Het biedt hele heldere oplossingen voor situaties die anders vrij ingewikkeld waren geweest. Zo kun je de routing automatisch opzetten, puur door de mappenstructuur in je pages map. Nuxt detecteert automatisch hoe je routing er uit moet zien en genereert dit ‘onder water’. Je hebt de optie om dit uit te zetten en zelf je routes te definiëren. Maar tenzij je routes echt heel complex worden is dit niet nodig. Nuxt maakt bepaalde zaken als een event bus ook zeer eenvoudig. Emitten van component naar component is hierdoor een heel stuk eenvoudiger dan het bijvoorbeeld in Angular is. In Angular zou je hier een service voor moeten schrijven, of een aantal keer naar het parent of child emitten voor je bij het juiste component bent. Ook heeft Nuxt ook nagedacht over websites. In tegenstelling tot web applicaties is voor websites SEO (Search Engine Optimization) heel belangrijk. En Google heeft moeite om Angular, Vue en React applicaties te vinden omdat het Single Page applications zijn, en data dynamisch wordt ingeladen. Wanneer een Google bot langs een site komt is er nog geen data beschikbaar. Er kan dus ook niets geïndexeerd worden en dit gaat ten koste van de vindbaarheid. Nuxt maakt (optioneel) gebruik van ‘pre-rendering’ wat er voor zorgt dat je vrij eenvoudig vindbare websites in Vue kan bouwen.

De leercurve is tot slot een stukje lager voor Vue dan voor Angular en React. De syntax en opzet is erg helder, en een beginner zou er vrij snel mee aan de slag kunnen omdat er alleen een basiskennis van HTML, CSS en Javascript voor nodig is. Het is aan de developer hoe complex het gebruik van Vue wordt. In tegenstelling tot Angular, die met een bepaald stramien wel de nodige complexiteit met zich mee brengt.

Bottom line van Vue

Vue is geschikt voor eenvoudige en ingewikkelde applicaties. En zeker met de toevoeging van Nuxt is het makkelijk te onderhouden, en breed inzetbaar. Het instapniveau is vrij laag dus de meeste developers zullen er mee aan de slag kunnen. De enige sidenote is het omgaan met formulieren. Waar eenvoudige formulieren goed af te handelen zijn in Vue, heeft Angular bij complexe formulieren een streepje voor. Daarnaast heeft Vue nog wel een duidelijke achterstand in de banenmarkt. De community doet met events en netwerken er veel aan om Vue op de kaart te zetten. Maar er moet in Nederland nog wat meer tijd overheen gaan voordat een aanzienlijk deel van de grote bedrijven durven over te stappen op Vue.

Op React Amsterdam is te zien dat de React community erg actief is.
Credit: Gitnation.org

React

React werd in 2013 uitgebracht door Facebook. Omdat Facebook zich tegenwoordig niet alleen beperkt tot Facebook zelf, maar ook platforms als Instagram en WhatsApp moet onderhouden, is besloten om hier een eigen front-end framework voor te ontwikkelen. Net als Google met Angular, zal ook Facebook met React als eerste prioriteit het framework zo ontwikkelen dat het aansluit op alle platforms die ze onderhouden. Desalniettemin is React wel erg populair onder javascript developers.

Componenten in React werken met JSX. Dit betekent eigenlijk HTML in Javascript. Het is de React manier om de data die je met javascript hebt vergaard naar je presentatielaag te krijgen. Dit is in het begin wat ongemakkelijk werken. Er zijn developers die HTML, Javascript en (S)CSS graag gescheiden houden. Maar dit is een kwestie van gewenning. Wanneer je meer tijd met React doorbrengt zal de JSX constructie je waarschijnlijk niet meer storen.

In tegenstelling tot Angular geeft React je een vrij blanco canvas. Je hebt de mogelijkheid om componenten te bouwen en hiermee te communiceren, en dat is de basis van elk React project. Hiermee is de library van React een stuk kleiner dan dat van bijvoorbeeld Angular. Vanaf hier kun je allerlei tools inladen die je voor je project nodig hebt. Daarom is React ook meer een library dan een framework. Het grote verschil in mijn ogen is dat een library je de gelegenheid geeft om iets te doen, en het verder aan jou is hoe je dit toepast. Een framework heeft een wat sterkere mening over hoe je je applicatie in zou moeten richten, en biedt hier de juiste mappenstructuur en tools voor aan. Geen van de twee is een betere optie. Het is net waar je voorkeur ligt.

State management werkt in React net een beetje anders. Angular en Vue werken met state op basis van een redux pattern. Dit is de filosofie van een stuk data, opgeslagen in een sessie, die op alle plekken op te halen is. Dit kan zinvol zijn voor bijvoorbeeld een login sessie die altijd valide moet zijn. Of je hebt een object van data dat in meerdere componenten op verschillende manieren gebruikt moet worden. 
React heeft een Context API, die in grote lijnen hetzelfde is als het redux pattern. De Context API is een van de weinige extra built-in features van React. Deze is voornamelijk gericht op niet frequente state wijzigingen. Onder water worden alle componenten namelijk geüpdatet bij een state wijziging. Redux in Angular zorgt ervoor dat alleen de componenten worden bijgewerkt die bijgewerkt moeten worden. 

Bottom line voor React

React heeft een boel facetten die de keuze voor dit framework interessant zou maken. Zo heeft het een cleane opzet wat het instapniveau vrij laag maakt. Mensen die al gewend zijn met Javascript te werken zullen React snel onder de knie hebben. Ook de community van React is erg actief. Dit is ook nodig, want zonder allerlei third party libraries is React vrij kaal. En ook de banenmarkt is een pluspunt want deze is voor React (net als Angular) een stuk groter dan dat van Vue. Een nadeel kan zijn dat er gebruik wordt gemaakt van JSX in plaats van traditionele HTML templates. En bij gebruik van de Context API dien je eerst goed af te wegen waar je allemaal je state voor gaat gebruiken, want te veel gebruik gaat ten koste van performance.

App development

Tot slot moet ik nog melden dat alle drie frameworks prima uit de voeten kunnen met App development. Angular en Vue kunnen beide gebruik maken van Ionic en React heeft React Native tot zijn beschikking. Ook kunnen de frameworks allemaal gebruik maken van NativeScript.