Wat is React?
React is een populaire JavaScript-bibliotheek die wordt gebruikt voor het bouwen van interactieve gebruikersinterfaces voor diverse online toepassingen zoals webapplicaties.
React is ontwikkeld door Facebook met als doel het eenvoudiger maken van de ontwikkeling van interactieve interfaces voor online toepassingen en gebruikerservaringen. React wordt nog altijd actief doorontwikkeld en onderhouden door zowel de open-source community als Meta (voorheen Facebook).
Technische noot: In dit artikel spreken we over React, maar bedoelen we specifiek ReactJS, de JavaScript-bibliotheek bedoeld voor online toepassingen, en niet React Native, dat gericht is op mobiele ontwikkeling. ReactJS en React Native maken beide gebruik van dezelfde onderliggende React-syntaxis en zijn verwant, maar richten zich op verschillende platforms en zijn daardoor niet 1-op-1 uitwisselbaar. Met de juiste architectuur is het echter wel mogelijk om veel logica tussen beide omgevingen te hergebruiken, wat een belangrijk voordeel kan zijn bij de keuze voor React als basis voor zowel je online applicatie als mobiele uitbreiding.
Waarom React?
Online toepassingen (ook wel webapplicaties of online software genoemd) zijn digitale programma’s of systemen die via een webbrowser worden gebruikt, in plaats van dat je ze installeert op je computer of apparaat. React is perfect voor online toepassingen die juist niet als zodanig moeten aanvoelen. Geen gevoel van een statische website maar die van een applicatie, een webapplicatie.
Een webapplicatie of andere online toepassing die in de browser draait maakt gebruik van andere technieken dan een traditionele applicatie die lokaal op je computer of mobiel is geïnstalleerd. Plat gezegd is een webapplicatie eigenlijk een website die zich gedraagt als een applicatie en met behulp van React zou je kunnen zeggen: een website on steroids.
Een belangrijk verschil tussen een traditionele website en een moderne webapplicatie is hoe ze omgaan met gebruikersinteracties. Bij klassieke websites wordt bij elke klik of invoer vaak de hele pagina opnieuw geladen, wat zorgt voor vertraging en een minder soepele ervaring. React maakt het mogelijk om alleen de onderdelen van de pagina te vernieuwen die daadwerkelijk veranderen. Hierdoor voelt een webapplicatie gebouwd met React veel vloeiender en meer als een ‘echte’ applicatie, vergelijkbaar met wat je gewend bent op je desktop, tablet of smartphone. Hiervoor gebruikt React een slimme techniek genaamd de Virtual DOM.
Wij combineren Drupal met React omdat we bij Atom voornamelijk grotere en complexere online oplossingen creëren die voor gebruikers aan moeten voelen als een echte applicatie.
React, online toepassingen en voordelen:
Wat levert het nou precies op React integreren met Drupal? Nou, allereerst een veel snellere en soepelere gebruikerservaring. Met React laad je niet telkens een hele nieuwe pagina, maar alleen de onderdelen die veranderen. Gebruikers ervaren je website als sneller, vloeiender en meer als een applicatie, een webapplicatie! Dat is natuurlijk niet nodig als je website vooral uit statische content bestaat en weinig interactie bevat, maar wel dus als gebruikers veel klikken, filteren, slepen of real-time updates verwachten.
React kan je heel gericht inzetten, voor bepaalde elementen zoals formulieren, dashboard, kaarten of live componenten maar React kan ook handig zijn als Drupal niet alleen de website van content voedt maar meerdere kanalen zoals web, mobiel of schermen die gebruik maken van dezelfde content. We spreken dan van Drupal, ingezet als headless CMS. Een volledig Drupal headless opzet met React vraagt om een grotere investering voor de opzet, onderhoud en extra tooling zoals SSR (server-side rendering) voor SEO en performance.
React is erg veelzijdig en wordt online op grote schaal ingezet voor allerlei online toepassingen en oplossingen. Dankzij de mogelijkheid om componenten te hergebruiken, kan de ontwikkeling aanzienlijk worden versneld.
React wordt naast webapplicaties met veel interactie en Headless omgevingen ook ingezet voor andere online toepassingen zoals:
Single Page Applications (SPA’s), waarbij de gebruiker één keer een pagina laadt en daarna alles dynamisch binnen die pagina gebeurt.
Klantportalen / Mijn-omgevingen: Gebruikers loggen in en beheren daar hun gegevens, bestellingen, afspraken, etc. Denk ook aan dashboards, CRM’s, boekhoeding en projectmanagementtools.
E-commerce platforms: Voor een snelle en vloeiende winkelervaring (productfilters, winkelwagens, checkouts).
Progressive Web Apps (PWA’s): een slimme manier om een online toepassing om te zetten naar een app op mobiel die kan worden geinstalleerd, snel, gebruiksvriendelijk, en (deels) offline werkt.
Live functionaliteiten / real-time apps zoals chatapplicaties, samenwerkingstools en live dashboard maar ook complexe formulieren, productconfiguratoren of berekeningstools.
Sneller en paralel ontwikkelen & creatieve vrijheid:
Een extra versnelling in de doorlooptijd is mogelijk doordat React het mogelijk maakt om de back-end (Drupal) en de gebruikersinterface los van elkaar, en dus ook parallel, te ontwikkelen. Dit maakt het bovendien makkelijker om Agile te werken, omdat de front end-ontwikkeling niet hoeft te wachten op de back-end. Daarnaast is de creatieve vrijheid erg belangrijk, je zit niet vast aan de beperkingen van Drupal’s themesysteem (Twig) en kan echt de front-end helemaal naar wens inrichten, vormgeven en van animaties voorzien.
Alternatieven voor React
React is momenteel de populairste keuze onder ontwikkelaars, ook onder Drupal partners en ontwikkelaars en wint het daarmee ruim van alternatieven zoals Angular of VueJS.
Uitgebreide informatie over Angular en Vue.js, ook in vergelijking met React, is online volop beschikbaar. Hieronder vatten we de belangrijkste punten daaruit, én uit onze eigen ervaring, kort samen:
Zowel React, Angular als Vue.js hebben een sterke gebruikersgroep en een actieve community. React en Vue zijn over het algemeen eenvoudiger te leren, terwijl Angular als framework completer is. Het biedt standaard meer structuur, tooling en ingebouwde functies. Diezelfde functionaliteit kun je bij React of Vue toevoegen via extensies, wat meer flexibiliteit geeft maar ook om extra keuzes vraagt.
Angular is strikter en leunt sterk op standaarden en design patterns. Het verplicht gebruik van TypeScript maakt het krachtig en gestructureerd, maar daardoor ook complexer om mee te starten en te leren, zeker voor kleinere teams of minder ervaren ontwikkelaars. Binnen de huidige arbeidsmarkt is het belangrijk om te werken met een team waarin verschillende niveaus vertegenwoordigd zijn. Op die manier houd je ontwikkel- én opleidingskosten beheersbaar.
Vue.js staat bekend om zijn eenvoud, lage instapdrempel en fijne developer experience. Het is zeer geschikt voor kleinere projecten, proof of concepts of snelle MVP’s, en biedt toch veel mogelijkheden. Wel is de community iets kleiner en meer gefragmenteerd dan die van React en Angular, wat invloed kan hebben op de beschikbaarheid van plug-ins, tools en ondersteuning in grote projecten.
React zit qua benadering tussen Angular en Vue in: het is krachtig maar niet te complex, flexibel maar goed gestructureerd. Dankzij het enorme ecosysteem, de brede adoptie, goede documentatie én actieve ontwikkeling is React op dit moment een van de veiligste keuzes en ook toekomstbestendig. Bovendien wordt React veel gekozen in combinatie met Drupal waardoor er veel techniek, documentatie en andere informatie beschikbaar is wat de waarde van ontwikkeltijd optimaliseert.
Kortom: er zijn sterke alternatieven, maar wij kiezen bewust voor React. Het sluit perfect aan op onze technische visie, de behoeften van onze klanten en de manier waarop we Drupal inzetten. Dankzij de ruime beschikbaarheid van kennis en tooling kunnen we snel schakelen, schaalbaar ontwikkelen en nieuwe Drupal developers inwerken en opleiden. React is volwassen en toekomstbestedig.