• Expertises

    Door middel van welke expertises we jouw organisatie ondersteunen

  • Hoe we met succes voor een scala aan klanten van betekenis zijn geweest

  • Over Application Innovation, onze werkwijze en wat we voor je kunnen betekenen

  • Nieuws, events en artikelen van Application Innovation

  • Nieuwsgierig geworden? Kom werken bij Conclusion Application Innovation

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

In deze blogreeks vertelt collega Steve Jonk je alles over drie verschillende front-end frameworks. Wat houden de frameworks in, wat zijn de voor- en nadelen en welke past nu het beste bij jouw situatie. In blog #1 vertelt Steve je alles over React.

6 september 2021   |   Blog   |   Door: Conclusion Application Innovation

Deel

Blog #1

Wanneer over front-end ontwikkeling wordt gesproken, wordt vaak in dezelfde adem ook gesproken over JavaScript frameworks (of in elk geval eentje ervan). Soms is het moeilijk om door de framework-bomen het bos nog te zien. Elke oplossing heeft uiteraard zijn voor- en nadelen, maar welke past nou perfect bij de applicatie die je voornemens bent te bouwen? Deze serie van blogs is bedoeld om de drie meest populaire frameworks tegen elkaar uit te zetten, om zo te helpen in het maken van jouw keuze!

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.

Mijn naam is Steve Jonk en ik ben Front-end Developer bij Conclusion Application Innovation. Ik werk mee aan een aantal projecten en naast dat ik erg van development hou, ben ik ook gek op praten over development. Daarom heb ik het genoeg jullie de komende paar minuten een en ander te vertellen over de voor- en nadelen van verschillende front-end frameworks.

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.

Meer weten over React of de andere frameworks of een goed App idee?  Vraag één van onze specialisten om hulp! 

Terug naar het nieuwsoverzicht
Bekijk onze vacatures
Vond je dit interessant?

Neem contact met ons op. We vertellen je er graag meer over!

Conclusion Application Innovation

+31 (0)30 219 38 00
Spaklerweg 52c, 2e verdieping gebouw zuid
1114 AE Amsterdam-Duivendrecht
Business Done Differently Powered by Conclusion
© Conclusion 2021   |  De kleine lettertjes  |  Privacy & Security
  • Expertises
© Conclusion 2021   |  De kleine lettertjes  |  Privacy & Security