Skip to main content

Headless, zonder het hoofd te verliezen

Headless CMS

Bij het bouwen van een website heb je zowel een “back-end” als een “front-end”,dat is bij Drupal niet anders. De back-end is het CMS (Content Management System) waarin je als beheerder inhoud aanmaakt en bewerkt. De front-end is waar bezoekers terechtkomen en waar alle inhoud mooi visueel weergegeven wordt.

Zowel back-end als de front-end zijn een onderdeel van het Drupal systeem. De front-end werkt, in het geval van Drupal 8, met Twig templates die data uit de database gaan weergeven.

Het concept van “headless” houdt in dat het front-end gedeelte volledig gaat loskoppelen van het Drupal framework. Dit betekent dat je niet meer gelimiteerd bent tot het Drupal framework en alles dat daarbij hoort (vb PHP) om de site inhoud vorm te geven.

Hoe werkt dit nu precies?

Headless

Drupal 8 & REST

Sinds versie 8, heeft Drupal een ingebouwde REST API. REST is een gestandaardiseerde manier om gestructureerde data op te halen en te versturen.

Dit zorgt ervoor dat het zeer makkelijk is om met externe systemen data te gaan ophalen uit de Drupal database. Op die manier kan je Drupal enkel gebruiken als back-end systeem en kan je eender welk ander framework gebruiken voor de front-end (op voorwaarde dat deze HTTP requests kan maken).

Javascript frameworks worden hiervoor het vaakst gebruikt. Javascript is immers ontstaan als een browser scripttaal. Deze frameworks worden dan ook vaak “front-end frameworks” genoemd. Doordat deze frameworks meestal asynchroon werken, voelen ze sneller aan (want processen kunnen gelijktijdig lopen) en bieden ze ook meer mogelijkheden voor interactiviteit.
 

Angular 2 & Ionic 2

Op dit moment is AngularJS het meest populaire front-end framework (gevolgd door o.a. React en Backbone). Angular 2 betekende een grote verandering voor AngularJS en kan beschouwd worden als een volledig nieuw framework. Door al deze verbeteringen is Angular 2 een zeer krachtig framework dat uitermate geschikt is voor complexe websites en applicaties.
 

Ionic is een framework voor mobiele apps, meer specifiek hybride apps (zie ook onze oude blogpost). De eerste versie van Ionic gebruikte al het AngularJS framework als basis voor hun eigen framework.

Ionic 2 ging op hetzelfde elan verder en liet zijn development voor een groot deel samenlopen met die van Angular 2. Het gevolg is dat het Ionic 2 framework nog beter met Angular 2 geïntegreerd is als zijn voorganger. 

Hierdoor is het dus mogelijk om via Angular 2 zowel web applicaties als mobiele apps te gaan bouwen. En deze kunnen dus ook allebei op dezelfde manier de REST API van een Drupal applicatie gaan aanspreken.
Afhankelijk van use case
Een headless opstelling heeft zowel voordelen als nadelen, dus niet elke use case is hiervoor geschikt.

Uitgesproken voordelen

  • Meer flexibiliteit voor developers om de front-end laag te gaan bouwen
  • Javascript front-end, dus (wellicht) sneller en interactiever
  • Betere performance doordat berekeningen opgesplitst kunnen worden tussen 2 systemen

Enkele nadelen

  • Grotere complexiteit, dus duurder om te maken
  • Je moet verschillende out-of-the-box oplossingen van Drupal (bvb. meertaligheid) gaan herbedenken voor de front-end
  • Veel modules van Drupal vereisen custom werk om deze aanspreekbaar te maken via REST

Voor minder complexe websites is er weinig reden om voor een headless toepassing te gaan. Drupal 8 heeft zijn eigen front-end gedeelte (via Twig) dat zeker aan de eisen van de gemiddelde gebruiker voldoet. 

Headless gaan is daarentegen wel een goed idee voor o.a. interactieve dashboards, sterk interactieve websites of als je verschillende platformen wil die allemaal moeten communiceren met 1 backend systeem. Uiteraard heb je sowieso een headless opstelling nodig als je je applicatie als een mobiele applicatie wil aanbieden.

Closing off

Hopelijk is hiermee het concept van headless/decoupled een beetje duidelijker geworden. Wij zijn hier zelf actief mee bezig dus als je een project in gedachten hebt, helpen we je graag op weg om daarin de juiste keuzes te maken.