Maikel Janssen
Team Lead
React. Facebook lanceerde het JavaScript framework als reactie op de bestaande complexere varianten. React won snel terrein bij front- én back-enders. Dit is onze ervaring, na 2 projecten, inclusief balans en eindoordeel.
“React, a javascript library for creating User Interfaces” – wat betekent dat? Wat maakt React anders dan andere frameworks? En waar is dat precies goed voor? De antwoorden, voordat we projectervaringen en eindoordelen bespreken:
Wat is React?
React (of ReactJS) is een relatief nieuw en succesvol JavaScript framework, ontwikkeld en open source gelanceerd door Facebook in 2013. React loopt voorop in structuur, flexibiliteit en performance. Het is daardoor erg geschikt voor interactieve webapplicaties met grote steeds veranderende data aan de achterkant en veel intelligentie aan de voorkant.
Nog een bijzonder feit: React werkt headless (losse back- en frontend). De server-side complexiteit wordt ontwikkeld door de back-end developer, client-side complexiteit door de front-ender.
Bekende bedrijven met een React application als platform zijn:
Waarom React? - onze keuze voor 2 projecten
Als front-ender heb je tegenwoordig keuze uit best een aantal verschillende JavaScript libraries, zoals het bekende Angular (van Google), het nieuwe Vue (waarover later meer) en sinds 2013 het populaire React (van Facebook).
We zitten bij Exitable niet vast aan één library, dus is de keuze vrij per project. Op basis van de learning curve, de mogelijkheden, en toepasbaarheid kozen we er bij 2 projecten voor om React een kans te geven (in combinatie met headless Drupal CMS). Eens zien wat het ons te bieden had. Ten eerste als productconfigurator voor de radiator-experts van Vasco, en ten tweede als Static Site Generator voor de website van Exit Communicatie.
ReactJS als productconfigurator
De productconfigurator voor Vasco. Stap voor stap leiden we de gebruiker hier door de productconfigurator, en voor elke stap verwerken we de data met API calls naar de back-end.
Hier merkten we al dat React een aardig setje voordelen heeft. Vooral van het lokaal opslaan en verwerken van data die van extern geladen wordt, stonden we te kijken. Met React ging het binnen no-time, op 1 enkele pagina.
Oordeel:
De snelheid, flexibiliteit, maar ook de overzichtelijkheid, en uitbreidbaarheid van het project maakte het zeker. React in combinatie met een API is de juiste keuze – ten opzichte van een volledige Drupal PHP oplossing (onze andere optie).
ReactJS als Static Site Generator
Even vooraf: een Static Site Generator compileert complexe code en maakt er statische HTML bestanden van. Het voordeel hiervan is dat dit enorm simpele code is waarbij de browser of de server vrijwel geen denkwerk meer hoeft te doen. Dit is namelijk vooraf gedaan.
Door een tool tussen front- en back-end te plaatsen (in dit geval Netlify) wordt bij een wijziging van content in het CMS een seintje gegeven aan Netlify, waardoor het een nieuwe ‘build’ maakt. Bij het maken van een build worden de complexe bestanden gecompileerd naar de simpele HTML bestanden en online geplaatst.
Uitkomst is een Drupal CMS dat van alle gemakken is voorzien voor de klant, met een front-end die zo snel is als het licht, en die bovendien (omdat het geheel statisch is) superveilig is.
Oordeel:
React was ook hier een goede keuze, maar maakte minder het verschil dan bij de productconfigurator. Het werkt prima, maar er gaat relatief gezien meer werk in zitten, vergeleken met een front-end opzet in Drupal.
Een aantal onderdelen - zoals het omgaan met URL’s en routing - wordt in Drupal namelijk standaard afgevangen. In React is dit een stukje maatwerk. Het eindresultaat is beter dan een op Twig, PHP of Drupal gebaseerde front-end, maar dit moet in een project wel opwegen tegen de extra kosten. Ik denk dat dit gezien de uitbreidbaarheid wel het geval is.
De balans
React heeft een heel indrukwekkende set voordelen. Een aantal verwachtten we van tevoren, en wogen mee in de keuze om überhaupt te starten met React. Een aantal waren nieuw en (positief) verrassend. Maar: React heeft ook nadelen, is gebleken. Een balans, plus eindoordeel, onder de streep.
De 10 voordelen
- Makkelijker samenwerken – Waar eerst front- en back-end naar elkaar toe moesten werken en de verantwoordelijkheden en grenzen van de type werkzaamheden onduidelijk waren, maakt het headless werken van React dit een stuk duidelijker.
- Werkt snel – Websites werken “zo snel als het licht”, op 1 pagina, terwijl ze complexe werkzaamheden uitvoeren. Indrukwekkend!
- Makkelijk te leren – React is makkelijker te leren dan z’n grootste collega Angular bijvoorbeeld. Het zit namelijk een stuk minder complex in elkaar. Geen gedoe met TypeScript aanleren hier.
- Enorm flexibel en responsive.
- 100% open source – React is een volledig openbare JavaScript library die veel dagelijkse updates en verbeteringen krijgt van developers over de hele wereld.
- Hergebruik van componenten.
- Werkt met ES6/7 – Gecombineerd met ES6/7 kan ReactJS met gemak omgaan met zware belasting.
- Absoluut lightweight – React kan ook partial ingezet worden.
- Migreren is makkelijk – Migreren tussen versies is over het algemeen erg makkelijk, doordat Facebook “codemods” aanbiedt, die het grootste deel van het proces automatiseren.
- Superveilig – want geheel statisch (in het geval van een Static Site Generator).
De 4 nadelen
- Stijle leercurve – Er komen toch wel wat dingen bij kijken als je een geheel project opzet in React. Denk aan API calls, routing, data handling, SEO en integratie van frameworks.
- Geen officiële documentatie – De supersnelle ontwikkeling van ReactJS maakt dat er weinig tijd is voor zorgvuldige documentatie, wat het nogal chaotisch maakt nu zoveel developers er individueel aan bijdragen zonder systematische aanpak.
- Unopinionated – Wat wil zeggen dat developer soms iets té veel keuze hebben. Kan een nadeel zijn.
- Soms meer maatwerk – Zoals ontdekt bij het Static Site Generator project, zijn een aantal onderdelen noodgedwongen maatwerk in React, zoals omgaan met URL’s en routing. Het resultaat is beter, maar kost meer werk.
Het eindoordeel: Javascript ? One love
React is absoluut een goede keuze. We blijven het zeker gebruiken in toekomstige projecten.
Maar...
Gezien de impact die het toch op een project heeft qua investering, moet de overweging wel bewust gemaakt worden. Heeft het voldoende meerwaarde voor het eindproduct en de doeleinden? Dan is React ongetwijfeld de moeite waard.
Eens? Niet eens? Laat het horen!