Headless Drupal Website

Om dit volledig te kunnen begrijpen, is het van belang om goed bekend te zijn met de traditionele structuur van Drupal. Deze zullen we hier dan ook nog eens uiteenzetten.

Zoals elk contentmanagementsysteem (CMS),  bestaat Drupal uit een frontend en een backend. Waar de  backend content opslaat  en organiseert en deze beheert, is het de frontend die die deze weergeeft zodat gebruikers deze kunnen bekijken en waarmee ze kunnen communiceren. Normaal gesproken gebruiken Drupal developers bij het bouwen van websites de zogenaamde traditionele (of unified) aanpak waarbij het Drupal CMS verantwoordelijk is voor zowel de frontend als de backend van de applicatie.

Bij Drupal als headless CMS is de frontend echter losgekoppeld van de backend (vandaar ook wel de naam "decoupled Drupal"). Bij deze aanpak is Drupal alleen verantwoordelijk voor de backend, terwijl de frontend wordt gebouwd met een apart framework (Vue.js, Angular, React.js, enz.). In dit geval dient Drupal als het ware als eenopslagplaats voor content, die gegevens opslaat en deze via API's beschikbaar maakt voor de front-end systemen van de developer naar jouw keuze.

Het headless CMS retourneert de pagina dan niet in de vorm van HTML-code, maar gebruikt de REST API om het antwoord in JSON, HAL of XML-formaat te genereren. Deze architectuur geeft front-end developers meer vrijheid, omdat ze niet beperkt zijn tot de Drupal tools en elk front-end framework kunnen gebruiken om het visuele gedeelte van de applicatie te vorm te geven.

Een ander belangrijk aspect  om in overweging te nemen als het om headless architectuur gaat,  is dat er twee soorten ontkoppeling zijn: volledige ontkoppeling en progressieve
ontkoppeling. Het verschil tussen de twee ligt in hoe nauw de front-end en back-end componenten geïntegreerd zijn binnen de architectuur.

Volledig ontkoppelde Drupal (volledig headless CMS) scheidt de front-end en back-end componenten dus volledig. In deze ontkoppelde aanpak dient Drupal alleen als opslagplaats voor inhoud en als API-provider. De front-end wordt dan gebouwd met behulp van een aparte technologie-stack, zoals een JavaScript framework. De frontend gebruikt gegevens van Drupal's API en zorgt zelfstandig voor de rendering en presentatie van de gebruikersinterface. De backend en frontend zijn volledig ontkoppeld, waardoor maximale flexibiliteit en vrijheid in front-endontwikkeling mogelijk is.

Progressief ontkoppelde Drupal (hybride architectuur) is, zoals je waarschijnlijk wel zal verwachten, meer een middenweg. Deze architectuur maakt het mogelijk om een mix van Drupal-gedreven en externe front-end componenten te gebruiken. Het stelt developers in staat om de door Drupal gegenereerde gebruikersinterface uit te breiden met dynamische of interactieve elementen met behulp van JavaScript-frameworks. In deze benadering worden bepaalde delen van de front-end ontkoppeld, terwijl anderen binnen Drupals controle blijven.

Je kunt bijvoorbeeld Drupal gebruiken voor het renderen van de primaire contentstructuur, terwijl je een JavaScript-framework gebruikt voor meer interactieve functies zoals formuliervalidatie of real-time updates. De front-end componenten en Drupal werken zo nauw samen en maken gebruik van Drupal's thematisering systeem en render mogelijkheden, naast  de eerder genoemde externe technologieën.

Nu je hopelijk een beter beeld hebt kunnen vormen van het verschil tussen de Headless en de traditionele architectuur, kunnen we ingaan op gevallen waarin Headless architectuur daadwerkelijk wordt gebruikt en onderzoeken hoe jij hier uiteindelijk je voordeel mee kunt doen.

De headless benadering heeft dankzij zijn veelzijdige toepassingsmogelijkheden de laatste jaren flink aan populariteit gewonnen. Dat is in principe ook logisch, als je je bedenkt dat deze uitermate geschikt is voor de volgende, uiteenlopende toepassingen:

• Het maken van websites met veel formulieren en dynamische interfaces, evenals sites die voortdurend interacties aangaan met de gebruiker (social media, CRM-systemen, chats, enz.).
• Het ontwikkelen van mobiele toepassingen.
• Het ontwikkelen van webapplicaties met geavanceerde systemen voor de verwerking van gebruikersgegevens.
• Het leveren van content aan meerdere kanalen, bijvoorbeeld: IoT-apparaten, VR-systemen, mobiele apps, spraakassistenten, metaverses, fitnesstrackers, enzovoort.
• Websites bouwen met veel integraties met derden (CRM-platforms, marketing automatiseringstools, e-commerce systemen, enzovoort).
• Het maken van progressieve webapplicaties (PWA's).
   

Voordat je één van deze genoemde toepassingen wil gaan realiseren aan de hand van de headless benadering, kan het handig zijn om eens goed op een rijtje te hebben wat precies de belangrijkste voordelen ervan zijn. Zo kun je immers beter afwegen of een eventuele overstap het waard zal zijn. We zullen deze daarom hieronder eens kort op een rijtje zetten:

Het headless content management systeem is flexibeler op het gebied van frontend development. Omdat de back-end en front-end in dit geval namelijk ontkoppeld zijn, hebben jouw  developers de vrijheid om elke front-end technologie of framework van hun voorkeur te gebruiken. Dit zorgt voor meer creativiteit en maatwerk in jouw gebruikersinterface. Bovendien hoef je zo, indien jij zelf geen inhouse Drupal developers in dienst hebt, alleen het bouwen van de back-end van jouw Drupal website uit te besteden aan een Drupal specialisatie bureau. De frontend kunnen jouw eigen developers op deze manier immers gewoon voor hun eigen rekening nemen!

Met Headless Drupal kun je de prestaties van de applicatie verbeteren, wat resulteert in snellere en responsievere gebruikerservaringen. Meer specifiek zal de ontkoppeling helpen om de content efficiënter te renderen, omdat de front-end applicatie gegevens rechtstreeks van de API zal ontvangen, waardoor de verwerking aan de serverzijde en de laadtijd van de pagina worden verkort.

Headless Drupal maakt horizontale schaalbaarheid mogelijk. Omdat de front-end en back-end gescheiden zijn, kun je elk onderdeel onafhankelijk schalen op basis van de vraag. Deze schaalbaarheid is vooral gunstig voor websites of applicaties die veel verkeer kennen of frequente updates vereisen. Is dit kenmerkend voor jouw website? Dan valt er met de Headless Drupal benadering voor jou in ieder geval veel te halen!

Door een headless architectuur te kiezen, maak je  jouw digitale platforms klaar voor de toekomst. Omdat de front-end en back-end ontkoppeld zijn, wordt het namelijk eenvoudiger om wijzigingen of upgrades aan te brengen in een van beide componenten, zonder dat dit gevolgen heeft voor de ander genoemde kant. Deze flexibiliteit zorgt ervoor dat je jouw webapplicatie gemakkelijk continu kan laten evolueren en  dat deze zich kan aanpassen aan veranderende technologieën en trends.