Blog overzicht

Headless Drupal: de voordelen en nadelen.

De laatste tijd hoor je de term headless Drupal, ook wel Decoupled Drupal genoemd, steeds vaker. Een logische verklaring als je kijkt naar de populariteit van client-side frameworks. Wat zijn nou de voordelen van deze client-side frameworks in combinatie met Drupal?

Bijgewerkt:

October 17, 2015

Contents

De laatste tijd hoor je de term headless Drupal, ook wel Decoupled Drupal genoemd, steeds vaker. Een logische verklaring als je kijkt naar de populariteit van client-side frameworks. Wat zijn nou de voordelen van deze client-side frameworks in combinatie met Drupal en wanneer moeten we hier als full service internetbureau nu gebruik van maken?

Wat is headless Drupal?

Kort door de bocht is een headless Drupal website, een website waarbij de interactie tussen de gebruiker en Drupal niet direct plaats vindt omdat de front-end en back-end van Drupal worden gescheiden. Daar komen dan ook de termen headless en decoupled Drupal vandaan. In plaats van een traditioneel Drupal thema& wordt de presentatielaag gevormd door een client-side framework (javascript framework). Het client-side framework opereert volledig onafhankelijk ten opzicht van Drupal. De backend serveert de data en via een API krijg je die data aan de front-end beschikbaar.

Headless Drupal is geen nieuw concept. Het is al enkele jaren mogelijk in Drupal 7 met behulp van diverse modules die zo'n API tot stand brengen. Echter wordt het met Drupal 8 een stuk makkelijker gemaakt doordat alle benodigheden voor een headless Drupal website nu in de core geïntegreerd zijn.

Client-side frameworks

Het inzetten van client-side frameworks voor single page applicaties is de afgelopen jaren enorm gestegen in populariteit. Doordat steeds meer websites gebruik maken van deze frameworks is er een duidelijke toename in het aantal client-side frameworks dat wordt aangeboden vandaag de dag. Ook is het tegenwoordig mogelijk met libraries zoals jQuery een volledige front-end voor applicaties te realiseren.

De meest bekende frameworks zijn:

  • AngularJS
  • Backbone.js
  • Ember.js
  • React.js

Door de presentatie middels een client-side framework te laten verlopen, behoudt je 100% invloed op de front-end. Daar waar dat met Drupal of een ander CMS nog wel eens lastig kan zijn. Met deze volledige controle kan er een modulaire opbouw gerealiseerd worden waardoor de applicatie ook onderhoudsvriendelijker wordt. De bekende client-side frameworks genieten daarnaast een grote achterban en er zijn dan ook vele modules en add-ons beschikbaar om functionaliteit aan je front-end toe te voegen.

Met client-side frameworks kun je gemakkelijker een betere percieved performance na streven. Perceived performance refereert naar hoe snel de gebruiker denkt dat een website is. De essentiële elementen worden zo snel mogelijk geladen zodat de gebruiker op jouw site zijn gang kan gaan. Dit principe wordt non-blocking user interface  genoemd.

Doordat je met client-side frameworks single page websites kunt bouwen, kun je deze websites steeds meer als webapplicaties gaan zien. Omdat er voor de gebruiker geen reden is de pagina opnieuw te laden, kan de interactie met de gebruiker zeer soepel verlopen. Dit is zeer interessant wanneer er een grote hoeveelheid data wordt gepresenteerd in bijvoorbeeld een overzicht of een dashboard.

TomTom MySports, dat onder andere hardloopstatistieken bij houdt, is een goed voorbeeld van een interactief dashboard gebouwd met het framework AngularJS.

Volledige headless Drupal websites

Terug naar Drupal. Grof gezegd zijn er twee varianten van headless Drupal, namelijk volledig headless (fully decoupled) of gedeeltelijk headless (progressive decoupling). Geestelijk vader van Drupal, Dries Buytaert, benadrukte dit onlangs nog in zijn blog  en op de DrupalCon van Barcelona.

Bij een volledige headless Drupal website wordt Drupal uitsluitend gebruikt als opslagplaats voor het beheren van data. Dat betekend dus dat je de volledige controle over de front-end hebt, maar daarnaast alle functionaliteiten van Drupal over boord gooit. Functionaliteiten die je in Drupal gratis krijgt, moeten opnieuw worden ontwikkeld of zijn helemaal niet mogelijk. Een volledige headless Drupal website zal daarom in de praktijk misschien niet zo heel vaak gaan voorkomen. Een voordeel is dat er twee ontwikkel teams tegelijktijdig en onafhankelijk van elkaar kunnen ontwikkelen.

Wanneer je een volledige headless Drupal website overweegt, denk dan goed na over deze beslissing. Lost headless Drupal een kritiek probleem op, bijvoorbeeld op het gebied van interactie, en weegt dat op tegen de complexiteit die headless Drupal met zich mee brengt? Dan is een headless Drupal website waarschijnlijk de oplossing.

De gedeeltelijke headless Drupal websites

Bij gedeeltelijke headless Drupal websites worden er diverse onderdelen van de site nog wel door Drupal gerendered. Bijvoorbeeld de header, footer en het menu. Daarbinnen kun je vervolgens een applicatie draaien die geniet van de voordelen van client-side frameworks. Ideaal wanneer je een traditionele website hebt of wilt, maar wel een interactieve functionaliteit wilt hebben. Denk aan een winkelzoeker, afspraak maken tool of zoals eerder genoemd dashboards en interactieve overzichten. Vaak zijn dit soort complexiteiten wel te maken in Drupal met behulp van modules, maar die genieten weer niet van de voordelen van client-side frameworks.

Het mooie van gedeeltelijke headless Drupal is dat je zelf kunt bepalen welke componenten je los wilt koppelen van Drupal. Je kunt bijvoorbeeld slechts één onderdeel van een Drupal website in een client-side framework bouwen. Dat maakt de drempel om over te gaan naar headless Drupal een stuk lager.

Voorbeelden van client-side frameworks

Hoewel we steeds meer horen dat headless Drupal en er steeds duidelijk wordt wat we ermee kunnen, zijn er nog weinig voorbeelden van Drupal websites in combinatie met een client-side framework. Deze client-side frameworks worden echter al wel breed ingezet. Enkele Nederlandse websites die de voordelen van client-side frameworks goed weten te benutten zijn:

  • Paperflies  - Een website voor de beste vliegticket aanbiedingen.
  • ING  - De vestigingenzoeker van ING.
  • Videoland - Het film en tv aanbod van videoland.
  • Expedia  - De homepage van Expedia.nl

Conclusie

Er zijn nog weinig praktische voorbeelden van headless Drupal websites. Vooralsnog is het een technische uitdaging om alle soorten content binnen Drupal beschikbaar te maken voor client-side frameworks. Naast pagina's en artikelen zijn er bijvoorbeeld ook users en formulieren. Toch zijn client-side frameworks hot en zien we er alleen maar meer en meer van. De key is interactie, of het nou dashboards, overzichten, foto galleries, media players of zelfs browser games zijn. Daarbij zien we een verschuiving van traditionele websites naar meer applicatie gerichte oplossingen. Het zal dan ook niet lang duren voordat headless Drupal écht doorbreekt.

Wanneer standaard drupal oplossingen niet toereikend zijn kan headless Drupal een ideale oplossing zijn. Stel jezelf wel altijd eerst de vraag of een headless Drupal website nodig is. Verhelpt een headless Drupal oplossing kritieke problemen en in hoeverre weegt dit op tegen eventuele (extra) complexiteit ten opzichte van de standaard beschikbare Drupal oplossingen? Kortom, headless Drupal zou de ideale oplossing voor jouw probleem kunnen zijn!

Blog Categorieën

Kevin van Hengst
Tech Lead

Ken jij ons team al? Check hier al onze specialisten!

FRMWRK Podcast

Op Weg Naar 20 Miljoen is onze e-commerce podcast waarin je leert betere beslissingen te maken in jouw online groei.

Podcast
Ondernemen
HRMWRK
Webshop Ontwikkeling
Online Marketing
ROI Strategie