React naast Drupal: wanneer het meerwaarde geeft
React naast Drupal: wanneer het meerwaarde geeft
React is geen standaard toevoeging aan iedere webapplicatie. Het wordt vooral interessant wanneer gebruikers veel handelingen uitvoeren binnen één scherm en direct resultaat verwachten. Drupal blijft daarbij verantwoordelijk voor content en beheer, terwijl React het interactieve deel van de interface kan verzorgen.
- 25+Drupal specialisten in loondienst
- 15+jaar ervaring
- PlatinumDrupal partner
- ISO 27001Gecertificeerd
Drupal & React
Wat is React?
React (of React.js) is een populair open-source JavaScript-bibliotheek wat speciaal ontworpen is voor het bouwen van dynamische, interactieve en snelle webapplicaties. Het is oorspronkelijk ontwikkeld door Facebook om de code van grote webapplicaties beter beheersbaar te maken. Sinds 2013 is het open-source en wordt het onderhouden door een wereldwijde community van developers en bedrijven.
Op deze pagina hebben we het over ReactJS – de variant van React die draait in de browser. Dat is dus iets anders dan React Native, dat wordt gebruikt voor mobiele apps.
Wat React toevoegt aan een Drupal-platform
Om duidelijk uit te leggen wat het voordeel is van React in combinatie van Drupal gebruik ik graag het voorbeeld van een restaurant.
Drupal is de keuken, hier wordt het zware werk gedaan. De ingrediënten en recepten worden hier veilig bewaard. En er is strikt bepaald wat iedereen mag aan de hand van een functie, de kok mag koken en de afwasser doet de vaat. Drupal is een absolute expert in het veilig organiseren van alle informatie. Maar de gasten van het restaurant zien de keuken niet.
React is de ober en zorgt voor de presentatie. De ober is verantwoordelijk voor de sfeer, de menukaart en hoe het eten aan de gasten wordt gepresenteerd. Met React wordt de voorkant van de website mooi en modern weergegeven en is efficiënt in gebruik.
React kan Drupal aanvullen op plekken waar veel interactie nodig is, terwijl Drupal verantwoordelijk blijft voor content en beheer.
Bij het Nieuwsbegrip-platform van CED Groep speelde dit letterlijk. Leerlingen doorlopen lessen met tussentijdse vragen; in de oorspronkelijke opzet zorgde elke controleer- of volgende-stap voor een volledige paginaherlading.
Sinds React die stap overneemt, blijft de leerling op dezelfde pagina en verdwijnt die herlading volledig, merkbaar prettiger bij een matige schoolnetwerkverbinding, waar een witte laadpagina eerder een lange onderbreking is dan een korte vertraging.
Dat maakt de kernvraag voor elk platform: gaat het vooral om lezen, of vooral om doen?
Wanneer heeft React wel zin en wanneer niet?
React is sterk als een website zich meer gedraagt als een applicatie dan als een verzameling pagina’s. Denk aan een klantportaal, dashboard, configurator of leeromgeving. De gebruiker voert iets in, maakt een keuze of past een filter aan en verwacht direct resultaat.
Bij de Grow Guide van Canna gebeurt dat bijvoorbeeld bij het berekenen van een kweekadvies. De gebruiker vult onder meer het bodemoppervlak, het aantal planten en de kweekduur in. De tool berekent direct een advies en toont dit in een tabel. Verandert een invoer, dan verandert het resultaat mee zonder dat de hele pagina opnieuw hoeft te laden.
In dit soort situaties komt React goed tot zijn recht. Het maakt het mogelijk om veel interactie in één omgeving te verwerken en toch een snelle, rustige gebruikerservaring te houden.
React is vooral interessant bij:
- Portalen en Mijn-omgevingen waarin gebruikers gegevens bekijken, aanpassen en acties uitvoeren.
- Dashboards met filters, grafieken en gegevens die regelmatig veranderen.
- Configurators en rekentools waarbij invoer direct invloed heeft op het resultaat.
- Webapplicaties met veel interactie waarbij steeds een volledige pagina laden onnodig traag of storend zou zijn.
- Headless Drupal-platforms waarbij Drupal de content en het beheer verzorgt en React verantwoordelijk is voor de gebruikersinterface.
Dat laatste kan interessant zijn bij grotere digitale platforms. Drupal blijft dan sterk in zaken als contentstructuur, rechten, workflows en beheer. React kan daarbovenop een interface bieden die meer aanvoelt als een applicatie.
React toevoegen omdat het kan, is geen goede reden
React maakt niet ieder Drupal platform standaard beter.
Een corporate website, kennisplatform of blog draait meestal vooral om het publiceren, structureren en vinden van content. Drupal kan dat zelfstandig uitstekend afhandelen. Een extra React-laag maakt zo'n platform technisch complexer, terwijl de bezoeker daar vaak weinig van merkt.
Daar komen ook extra keuzes en werkzaamheden bij kijken. Het front-end moet apart worden ontwikkeld en onderhouden. Bestaande Drupal-functionaliteit kan niet altijd rechtstreeks worden gebruikt en moet soms opnieuw worden opgebouwd. Ook onderwerpen als caching, toegankelijkheid, SEO en formulieren vragen in een losgekoppelde architectuur extra aandacht.
Voor een website die vooral informatief is en geen interactie van de gebruiker nodig heeft, is React dus vaak niet nodig. Focus vooral op wat de bezoeker op je website moet doen.
React.js vergeleken met Vue.js en Angular
React is niet de enige keuze voor interactieve webapplicaties. Vue en Angular lossen veel van dezelfde problemen op, maar doen dat ieder op een andere manier. Het belangrijkste verschil zit vooral in de vrijheid die je als ontwikkelteam krijgt, de hoeveelheid techniek die standaard wordt meegeleverd en de schaal waarop je wilt bouwen.
| Aspect | React | Vue | Angular |
|---|---|---|---|
| Type | Flexibele bibliotheek voor interfaces | Licht en toegankelijk framework | Uitgebreid framework met vaste structuur |
| Leercurve | Gemiddeld | Relatief laag | Hoger |
| Sterk bij | Interactieve platforms en maatwerk | Kleine tot middelgrote applicaties | Grote, complexe enterprise-applicaties |
| Vrijheid | Veel vrijheid in technische keuzes | Goede balans tussen vrijheid en structuur | Meer vaste regels en conventies |
| Ecosysteem | Zeer groot | Kleiner, maar volwassen | Groot en sterk gericht op enterprise |
| Drupal | Veel gebruikt in combinatie met headless Drupal | Goed mogelijk | Goed mogelijk, maar minder gebruikelijk |
Waarom Atom meestal voor React kiest
Voor Atom zit de kracht van React vooral in de combinatie van flexibiliteit en volwassenheid. Het werkt goed voor interactieve onderdelen binnen grotere Drupal-platforms, terwijl Drupal verantwoordelijk kan blijven voor content, rechten en beheer.
Angular biedt meer structuur uit zichzelf. Dat kan een voordeel zijn bij zeer grote applicaties en ontwikkelteams, maar maakt het framework ook zwaarder en minder vrij in de technische opzet.
Vue is eenvoudiger om mee te beginnen en past goed bij kleinere toepassingen. Voor grotere en langdurige platformen weegt voor Atom het grotere React-ecosysteem en de ruime beschikbaarheid van kennis en tooling vaak zwaarder.
Wat React niet automatisch oplost
React maakt een website niet automatisch sneller of beter. De grootste winst ontstaat op plekken waar gebruikers veel interactie hebben. Denk aan filteren, rekenen, gegevens aanpassen of stappen doorlopen zonder dat steeds een nieuwe pagina hoeft te laden.
Op een gewone contentpagina is dat voordeel veel kleiner. Daar kan React juist extra techniek toevoegen zonder dat de bezoeker daar iets van merkt.
Een aparte React-laag vraagt bovendien om extra aandacht in ontwikkeling en beheer. Het front-end krijgt een eigen technische opzet en het team heeft specifieke React-kennis nodig. Ook zaken als formulieren, caching, toegankelijkheid en koppelingen met Drupal moeten goed op elkaar aansluiten.
Daarom kiest Atom niet standaard voor React op een volledige website. We kijken per onderdeel waar de techniek echt iets toevoegt.
Wanneer Drupal de content beheert en React verantwoordelijk is voor een losse gebruikersinterface, spreken we meestal van een decoupled of headless opzet. Daar bestaan verschillende varianten van. Op onze pagina over headless Drupal gaan we uitgebreider in op die keuzes.
Wat React betekent voor vindbaarheid in Google
Bij publieke pagina's is vindbaarheid een belangrijk onderdeel van de technische keuze.
Wanneer content pas in de browser door JavaScript wordt opgebouwd, moet een zoekmachine extra stappen uitvoeren voordat die content volledig kan worden verwerkt. Google kan JavaScript renderen, maar een eenvoudige HTML-pagina blijft technisch gezien eenvoudiger te crawlen en indexeren.
Voor een klantportaal, dashboard of andere omgeving achter een inlog is dat meestal geen probleem. Die pagina's hoeven doorgaans niet in Google te verschijnen.
Bij publieke pagina's die wel via zoekmachines gevonden moeten worden, ligt de afweging anders. Atom laat de belangrijkste content dan bij voorkeur direct beschikbaar zijn voor de bezoeker en zoekmachine. React zetten we alleen in waar de interactie daar echt om vraagt.
Dat hoeft niet te betekenen dat React slecht is voor SEO. Met technieken zoals server-side rendering kunnen React-pagina's ook goed indexeerbaar worden opgebouwd. Wel vraagt zo'n opzet meer technische keuzes dan wanneer Drupal de pagina zelf rendert.
Bepaal vooraf welke delen van het platform goed vindbaar moeten zijn en welke delen vragen om interactie. Op die manier kun je beslissen of React wel of niet de oplossing is.
