De 3 populairste JavaScript front-end frameworks, een uiteenzetting: #1 React

Met populairste frameworks wordt hier gedoeld op React, Angular en VueJS. Voor alle drie wordt eerst wat voorinformatie gegeven, waarna de voor- en nadelen op een rijtje worden gezet. Het eerste framework dat aan bod komt is React.

De voor- en nadelen van React

React is in 2013 uitgegeven door niemand minder dan Facebook en heeft op tijd van schrijven 174k sterren op GitHub.

React is eigenlijk geen volledig framework, maar een bibliotheek. Dit lijkt misschien wat semantische prietpraat, maar er is wel echt een duidelijk verschil. React bevat van zichzelf minder functionaliteiten dan je van een uitgebreid framework gewend zou zijn. Dit lijkt nadelig, maar het maakt de oplossing juist meer lichtgewicht en voor elke hiaat bestaat wel een derde partij bibliotheek (ofwel extensie) om het op te lossen.

1. Geen steile leercurve
Eerste voordeel van React is dat de leercurve niet zo steil is. De documentatie is erg duidelijk en omdat de bibliotheek van zichzelf niet een scala aan uitgebreide functies bevat, is het concept van de werking van React makkelijker te vatten.

2. Gemakkelijk SEO vriendelijk maken
Het tweede voordeel is dat een Progressive Web App gemaakt in React gemakkelijk SEO vriendelijk gemaakt kan worden. Oftewel, wanneer de web app marketingtechnische doeleinden heeft, kunnen deze gemakkelijker worden bewerkstelligd met React. Voor applicaties die openbaar (of voor een groot publiek) benaderbaar moeten zijn is het uiteraard altijd aan te bevelen dat deze goed vindbaar is. Een goede kanttekening hierbij is wel dat het nodig is om Server Side Rendering te gebruiken. Gelukkig kan ook dit relatief eenvoudig middels bijvoorbeeld NextJS of Gatsby.

3. Goeie performance door de Virtual DOM
React werkt met een Virtual Dom. In het kort is dit een soort virtueel tweelingzusje van de volledige HTML DOM. In plaats van dat een verandering van een object in het scherm (hoe groot of klein dan ook) direct in de HTML structuur plaatsvindt, wordt dit eerst toegepast in de virtuele DOM. Dit wordt vervolgens vergeleken met de HTML structuur en waar deze verschilt, wordt een onderdeel opnieuw gerenderd. Dit alles gebeurt in milliseconden onder water. Dit heeft als voordeel dat onderdeel niet onnodig opnieuw gerenderd worden, wat de applicatie een stuk reactiever maakt (zou daar de naam misschien vandaan komen? Ik denk het ook niet).

4. Mogelijkheid tot Native ontwikkeling
Met een bibliotheek als Capacitor is het eenvoudig om middels een hybride oplossing van je Web App een Native App (een daadwerkelijk mobiele applicatie) te maken. Zo tover je binnen een handomdraai je applicatie om tot eentje die kan distribueren in de Apple App Store of Google Play Store.

Om een klein uitstapje te maken naar Native, is het ook mogelijk om middels React Native een app te bouwen die daadwerkelijk compileert naar een mobiele applicatie. Zo schrijf je zonder kennis van Swift of Java een mobiele applicatie in JavaScript. Deze bibliotheek gebruikt een zeer soortgelijke syntax en opbouw als React, wat de leercurve hiertoe nog minder steil maakt.

5. Alles wordt in JavaScript geschreven
Een nadeel (als je het nadeel kunt noemen) van React is dat letterlijk alles kan worden geschreven in JavaScript. In plaats van HTML templating wordt gewerkt met het zogenaamde JSX. Hierin kan in een JavaScript component HTML syntax worden gebruikt. Het nadeel hier is dat alle logica en structuur op één plek staat. Dit kan initieel verwarrend zijn voor beginnende ontwikkelaars.

6. Geen Scoped CSS
Toen ik in de vorige alinea zei dat letterlijk alles in JavaScript wordt geschreven, loog ik een beetje. De styling kan nog wel buiten de JavaScript componenten worden geschreven. Een nadeel hier is dat scoped CSS hierdoor moeilijk tot niet te bewerkstelligen is. Styling die je hier schrijft is van toepassing op de gehele web app. Gelukkig zijn hier ook oplossingen voor, welke dan uiteraard weer wel in JavaScript worden geschreven. React biedt de mogelijkheid om middels JS objecten inline styling mee te geven aan alle verschillende onderdelen. Tevens kan dit proces vergemakkelijkt worden door externe bibliotheken als Styled Components of Material-UI. Wederom een goed voorbeeld dat voor elke tekortkoming wel een bibliotheek bestaat.

7. Geen duidelijke projectstructuur vereist
Een laatste nadeel van React is dat er geen duidelijke projectstructuur vereist is. De ontwikkelaar heeft een volledige carte blanche van hoe hij zijn project wilt indelen. Dit kan ervoor zorgen dat een repo erg rommelig wordt, vooral wanneer een groter team aan een project werkt. Om dit te tackelen is het zaak om met het team alvorens een project start een duidelijke structuur af te spreken. Hoe meer een team op elkaar raakt ingespeeld, hoe kwalitatiever deze structuur zal worden.

Dit blog is geschreven door Steve Jonk.