In de wereld van webdesign zijn er constant ontwikkelingen die dingen sneller/beter/makkelijker maken. Een van de belangrijkste trends van afgelopen 2 jaar is Headless WordPress. Wat is dit en wat zijn de voor- en nadelen.

Je hebt waarschijnlijk gehoord van WordPress: een content management systeem waarmee je makkelijk teksten, afbeeldingen en video’s kunt toevoegen aan jouw website. In “traditionele” vorm biedt WordPress een totaalpakket aan voor websitebouwers, waarmee zowel de content als het uiterlijk van de website ingericht kan worden. Ook is het relatief makkelijk om uitbreidingen toe te voegen in de vorm van plugins.

Een nieuwe manier om WordPress te gebruiken is Headless. Dit betekent dat een bepaald gedeelte van WordPress niet meer gebruikt wordt, maar in plaats daarvan op een andere manier wordt ingericht. Om dit te begrijpen moet je iets begrijpen van hoe een website in elkaar zit.

Hoofd en lichaam: Front-end en Back-end

Je  kunt een website grofweg opdelen in een Front-end en een Back-end. In de Front-end gebeurt alles wat te maken heeft met wat de bezoeker direct krijgt te zien. Denk aan opmaak, een uitklapmenu, een slider, etc. Alles wat je op je scherm krijgt te zien wordt weergegeven in de Front-end.

De Back-end is waar de data is en eventuele dataverwerking plaatsvindt. In de Back-end kun je teksten en afbeeldingen toevoegen en bijvoorbeeld een inzending van een formulier versturen naar iemands emailadres.

De Front-end en de Back-end “praten” met elkaar middels zogeheten API’s. Dit is een soort tussenlaag waarmee het mogelijk is om makkelijk data op te vragen en data te laten wijzigen. Je kunt dat ongeveer zien als een 1-2tje waarbij de Front-end en Back-end samenspelen om het juiste resultaat te creëren: een functionele website. De Front-end wordt ook wel eens de Head genoemd en hier komt de term Headless dan ook vandaan.

Wat is Headless WordPress?

WordPress fungeert normaliter als zowel de Front-end als de Back-end. Het is echter mogelijk om deze twee dingen van elkaar los te koppelen en WordPress alleen als Back-end te laten fungeren. Wanneer je dit doet spreek je over Headless WordPress. Maar waarom zou je dat doen?

De wereld van Front-end en Back-end zijn, als het gaat om technische ontwikkeling, van elkaar gescheiden. Dit betekent dat ontwikkelingen in de Front-end niet per se ook gelden voor de Back-end en vise versa. Omdat WordPress beide onderdelen onder zijn hoede neemt loopt deze nogal achter als het gaat om deze ontwikkelingen en de bijbehorende voordelen. Door de onderdelen los te koppelen van elkaar kun je gebruik maken van de nieuwste ontwikkelingen op het gebied van Front-end en toch gebruik blijven maken van het oude vertrouwde WordPress voor alles wat met je data te maken heeft.

De voordelen van Headless WordPress

Maar, wat zijn nou de voordelen hiervan?

De ontwikkelingen op het gebied van de Front-end bieden vele voordelen. Hier een paar van de belangrijkste.

Betere performance

De snelheid van de de Front-end, dus hetgeen de bezoeker van de website krijgt te zien, gaat enorm omhoog. Dit komt omdat door een heel aantal technische optimalisaties die binnen een WordPress omgeving veel lastiger zijn door te voeren. Voorbeelden hiervan zijn:

• Het leveren van pagina’s via een CDN. Een CDN is een netwerk van servers die geoptimaliseerd zijn om snel pagina’s te leveren aan de gebruiker.
• Afbeeldingen optimalisatie. Betere compressie (dus kleinere bestanden) en het alleen laden van afbeeldingen wanneer deze nodig zijn.
• Code splitting. Alleen de code die noodzakelijk is voor de pagina wordt geladen.
• Vooraf laden van pagina’s. Wanneer je naar een andere pagina gaat is deze al vooraf ingeladen.

Lees hier meer over waarom het belangrijk is om een snelle website te hebben.

Veiligheid

De nieuwe Front-end techniek zorgt ervoor dat pagina’s statisch worden opgeleverd. Dat betekent dat het niet mogelijk is om met bepaalde hacks de inhoud van de website te veranderen. Deze staat veel meer ontkoppeld van de Back-end waardoor er meer veiligheid ontstaat. Ook als de Back-end eruit vliegt zal de Front-end blijven werken, omdat deze dus los staan van elkaar.

Developer gemak

Ook als developer kun je gebruik maken van de nieuwste technieken en workflows om je werkzaamheden in de Front-end uit te voeren. Dit zorgt ervoor dat je kunt voldoen aan de nieuwste standaarden welke het ontwikkelproces efficiënter en robuuster maken. Denk hierbij aan:

• Javascript in plaats van PHP. Javascript is de meest populaire programmeertaal van dit moment. Moderne Front-ends worden bijna altijd in Javascript geschreven en kan met Headless WordPress ook worden gebruikt.
• Er is een grote bibliotheek aan extensies die makkelijk geïntegreerd kunnen worden. Dit geeft je veel flexibiliteit in het ontwikkelen van de Front-end. Je bent niet beperkt met WordPress plugins.
• Werken met componenten. Het is veel makkelijker om met componenten te werken in de nieuwe Front-end. Dit maakt herbruikbaarheid eenvoudiger. Je kunt bijvoorbeeld een stuk code makkelijk hergebruiken in een ander project zonder daar veel aan te hoeven veranderen.
• Versiebeheer met automatische deployment. Je kunt makkelijk verschillende versies van je front-end naast elkaar hebben staan en makkelijk wisselen tussen verschillende versies. Dit zorgt voor een stuk archivering en een backup als er iets mis gaat. Als je een aanpassing doet aan een versie wordt deze automatisch verwerkt in de website.

Zitten er ook nadelen aan Headless WordPress?

Zoals met alles in het leven “hept elk voordeel se nadeel”. Wat zijn de nadelen van het loskoppelen van het hoofd van het lichaam van WordPress?

Minder goede plugin integratie

WordPress is normaliter een geïntegreerd systeem van Front-end en Back-end. Dit zorgt ervoor dat bepaalde plugin van WordPress ook invloed hebben op de Front-end van de website. Denk bijvoorbeeld aan een meertaligheidsplugin. Deze moet het niet alleen mogelijk maken om teksten in Back-end aan te passen, maar zorgt ook voor een taalselectie widget in de Front-end. Deze widget zal niet zomaar werken wanneer je een Headless WordPress systeem gebruikt. Je moet dan zelf vervangende code schrijven om deze functionaliteit toe te voegen. Zoals gezegd zijn er gelukkig veel extensies beschikbaar in het nieuwe systeem om dit probleem te tackelen.

Leercurve is stijler

Als developer moet je een stuk meer expertise in huis hebben om een Headless WordPress systeem te kunnen bouwen. Dit komt omdat er naast PHP (voor de Back-end van WordPress) ook veel Javascript gebruikt moet worden in de Front-end en dat is een andere taal. Ook zijn de codeerstandaarden wat complexer, zoals versiebeheer, werken met componenten, API’s en authenticatie. Anderzijds bieden deze nieuwe standaarden een veel robuuster code die makkelijk aangepast kan worden in de toekomst en herbruikbaar is.

Vooral geschikt voor maatwerk websites

Er zijn momenteel een stuk minder standaard templates beschikbaar voor een Headless WordPress opzet dan voor een klassieke opzet. Het is daarom minder makkelijk om met een template oplossing te werken. Wanneer er een maatwerk website wordt gemaakt zal er altijd een Front-end moeten worden geschreven voor het specifieke project. De loskoppeling is in dat geval daarom ook makkelijker mogelijk.

Waarom wij Headless WordPress gebruiken

Zout&Dijk maakt gebruik van de nieuwe ontkoppelde techniek, omdat ik geloof dat de voordelen zwaarder wegen dan de nadelen. Snelheid en veiligheid zijn juist onderdelen waar een klassiek WordPress aanpak vaak in tekort schiet. Door Headless WordPress te gebruiken kan ik het beste van 2 werelden pakken: het gebruiksvriendelijke Back-end systeem van WordPress i.c.m. de technische voordelen van de nieuwe Front-end. Wij bieden uitsluitend maatwerk websites aan waarvoor deze aanpak in het bijzonder geschikt is.

Wil je meer informatie over onze werkwijze? Vraag dan een gratis en vrijblijvende demo aan, waarin wij kunnen laten zien wat deze techniek voor jou te bieden heeft!