Blog

Een headless CMS, een trend of here to stay?

Wat zijn de laatste ontwikkelingen omtrent headless, moet ik (nu) overstappen op headless, en - de grote vraag - worden alle webshops in de toekomst headless? Daar geven we in deze blog antwoord op.

Headless commerce, hoe zat het ook alweer?

Samengevat spreken we van headless als de front- en back-end volledig van elkaar gescheiden zijn en onafhankelijk van elkaar functioneren. Bij een headless strategie is de frontend een op zichzelf staand stuk software. De communicatie tussen de front- en backend vindt plaats via API's, zo kunnen de voor en achterkant van de verschillende site makkelijk met elkaar communiceren. Onderdeel van die communicatie zijn onder andere: content, productinformatie en orders. Deze worden zoals gezegd uitgewisseld tussen verschillende applicaties, waardoor er een eenduidige weergave wordt gerealiseerd.

Een “headless” evolutie

Het traditionele CMS (coupled CMS) gebruikt één samenhangende codebase voor de front- en backend. Dit noem je ook wel een monolithische architectuur. In tegenstelling tot het traditionele CMS heeft een headless CMS een ontkoppelde front- en backend. Deze zijn beide onafhankelijk van elkaar. Tussen een coupled- en headless CMS vinden we nog één vorm: een hybride CMS. Hierbij is het mogelijk om de front- en backend (middels API's) van elkaar te scheiden maar is het tevens mogelijk om de frontend bij de backend te trekken.

Een hybride CMS biedt dus een traditionele mogelijkheid maar ook een headless variant. Een voorbeeld hiervan is Magento. Magento biedt namelijk een API zodat je een headless oplossing kunt gebruiken. Bij een headless CMS wordt er helemaal geen frontend geboden. De frontend zal hier zelf ontwikkeld moeten worden via de API’s die het CMS biedt.

Standaard versus maatwerk

Kies je voor een bestaand systeem zoals Magento, dan zit je vast aan de standaarden en functionaliteiten van dat systeem. Een hoop van deze functionaliteiten zijn voor de ene webshop niet gewenst of voldoen niet aan de eisen. Een goed voorbeeld hiervan is de standaard checkout van Magento. Sommige webshopeigenaren zien hier liever een one-step-check-out en anderen een checkout met vijf stappen.

Het kan voorkomen dat men functionaliteiten mist of wilt veranderen. Hierbij biedt maatwerk een uitstekende oplossing, zo kunnen de gewenste functionaliteiten toch worden toegevoegd. Een headless CMS heeft als voordeel dat je niet gebonden bent aan een CMS. Daar staat wel tegenover dat het platform vanaf nul opgebouwd moet worden. Een platform kan dan tot in detail worden uitgedacht en precies naar de wensen van de klant worden ingericht. Dit scheelt gesleutel aan bestaande functionaliteiten en het komt de stabiliteit ten goede. Dit betekent vaak wel dat er meer maatwerk benodigd is.

Ook functionaliteiten die standaard in een systeem zoals Magento 2 zitten, zitten niet meer standaard in de website. Een goed voorbeeld hiervan is het vergelijken van producten in Magento. Dit is een standaard functionaliteit in Magento maar als je voor een headless oplossing kiest zal de frontend vanaf nul ontwikkeld moeten worden. De frontend architectuur is hiermee wel een stuk “schoner” omdat developers de architectuur bepalen en je geen onnodige functionaliteiten hebt. Hier staat wel een hogere initiële investering tegenover.

Zo hebben beide strategieën voor- en nadelen. We zetten het nogmaals voor je op een rijtje:

Voordelen

  • Next-level omnichannel strategie

  • Flexibiliteit

  • Sneller werken

  • Snellere content

  • Maatwerk en gebruiksvriendelijkheid

Nadelen

  • Problemen met testen

  • Minder prettig werken voor marketeers

  • Versnipperde tech stack

Wat zijn de laatste ontwikkelingen?

Hieronder vind je de belangrijkste ontwikkelingen op het gebied van headless.

Moderne Javascript Frameworks

Doordat de frontend onafhankelijk is, is het eenvoudiger om je te onderscheiden in design. Frontend developers worden namelijk niet meer beperkt door systemen zoals Wordpress of Magento en kunnen een eigen frontend architectuur opzetten. We zien hierin een trend doordat er steeds meer gebruik gemaakt wordt van moderne javascript frameworks zoals VueJS, React en Svelte. Dit soort javascript frameworks zijn client-based. Dit betekent dat ze geen server nodig hebben. Ze staan volledig los van de backend en via API’s wordt dynamische content opgehaald.

Ideaal voor meer creatieve vrijheid dus!

Serverless

Een opkomende ontwikkeling zijn de serverless frameworks. Deze headless oplossingen hebben geen server nodig voor de frontend. Dit betekent dat er statische websites worden gegenereerd door middel van zogenaamde ‘static site generators’ (zoals Gatsby voor React of Nuxt voor VueJS). Met een serverless website is de performance vele malen beter doordat statische pagina’s en assets via een Content Delivery Network (CDN) getoond worden.

Daarnaast is het voor developers eenvoudiger om mee te ontwikkelen, omdat zij zich volledig kunnen focussen op de frontend en er geen databases of complexe installaties benodigd zijn. Verder hoef je zelf geen zorgen te maken over server of database kwetsbaarheden en is het hosten van statische bestanden goedkoop of zelfs gratis. Hiermee worden ook in een keer de verantwoordelijkheden en risico’s die gepaard gaan met devops geoutsourced.

Dit betekent wel dat voor ieder product een aparte pagina gegenereerd wordt en na elke wijziging pagina’s opnieuw gegenereerd moeten worden. Een nadeel hiervan is dat het genereren van de gehele webshop lang kan duren naarmate men veel producten heeft. De snelheid en de effectiviteit van het genereren van pagina’s blijft daardoor wel een uitdaging.

Microservices & micro frontends

Een microservices architectuur bestaat uit een verzameling kleine, op zichzelf staande functionaliteiten. Deze worden apart van elkaar ontwikkeld met een eigen codebase.

Binnen Magento maken we hier vaak gebruik van door losstaande functionaliteiten apart te ontwikkelen, denk bijvoorbeeld aan een productconfigurator. Een voordeel hiervan is dat het gemakkelijk te vervangen is zonder dat het impact heeft op de rest van de webshop. Daarnaast kun je dit soort micro frontends ook weer in andere applicaties gebruiken. Het idee van headless is namelijk dat je data vanuit meerdere systemen met elkaar kunt koppelen. Hierdoor passen microservices en micro frontends goed binnen het plaatje van headless.

De evolutie van content management systemen

We zien dat content management systemen evolueren. Bestaande traditionele content management systemen of e-commerce bieden steeds vaker een API waarmee je de frontend van je backend kunt scheiden, bijvoorbeeld bij Magento 2. Sinds het platform headless ondersteunt zien we ook vaker headless oplossingen voor e-commerce voorbij komen. Denk aan Vue Storefront, Deity, FrontCommerce maar ook Magento PWA studio.

We zien ook steeds vaker headless content management systemen die dit als een service aanbieden. De zogenaamde CaaS (Content-as-a-Service) waarbij je de content online beheert en hier dus zelf geen backend voor hoeft op te richten. Een goed voorbeeld hiervan is de headless oplossing 'Contentful'.

Meer informatie over headless commerce.

Moet ik (nu) overstappen op headless?

Het allerbelangrijkste is dat alles eerst goed in kaart wordt gebracht. Wat zijn de vereisten van mijn webshop? Welke functionaliteiten worden in mijn webshop gebruikt? Maak vervolgens een lijst van de standaard functionaliteiten die momenteel gebruikt worden van het huidige systeem. Als je overgaat op headless zullen deze standaard functionaliteiten vanaf nul ontwikkeld moeten worden.

Stel dat je een webshop wil maar de functionaliteiten die je in jouw shop wil hebben wijken erg veel af van een standaard Magento webshop. Je wil bijvoorbeeld een specifieke customer-journey dat bij jouw wensen past. Dan is maatwerk een goede oplossing. Wil je echter gebruik maken van veel standaard features dan raden wij een headless oplossing aan.

Als je juist heel weinig functionaliteiten wil hebben, dan kan het zijn dat een standaard Magento webshop misschien iets te veel biedt. Je wil bijvoorbeeld maar één storeview met alleen maar simpele producten en een simpele checkout. Ook dan kun je overwegen om headless te nemen. Juist omdat je weinig functionaliteiten in je webshop wilt, kan Magento je een onnodig aanbod aan functionaliteiten bieden.

Vervolgens is het goed om na te denken welke andere systemen gebruikt worden of welke je wil gaan gebruiken. Ga na of deze systemen binnen een headless strategie passen. Systemen en interfaces kunnen met een headless strategie aangepast worden voor ieder kanaal. Als beheerder bepaal je waar je content getoond wordt. Je zou bijvoorbeeld Pimcore of een ander PIM systeem kunnen gebruiken voor je product data en bijvoorbeeld Contentful gebruiken voor de content. Deze content kun je vervolgens gebruiken voor je webshop, maar ook in andere systemen of applicaties.

Is headless 'here to stay'?

We kunnen niet voorspellen of alle webshops in de toekomst headless worden, maar we zien wel duidelijk een trend. De markt van headless is in ieder geval sterk groeiende. Wij zien headless als een sterke oplossing maar kijken altijd per klant en per project welk soort platform het beste aansluit bij de uitdagingen zoals geformuleerd in het voorstel.

Future-proof

We kunnen headless breder trekken door het te betrekken in apps, smartwatches, narrowcasting of andere toepassingen in de wereld van het internet of things (IoT). Door middel van een headless architectuur is namelijk alle data toegankelijk via API’s. Je data wordt beheerd vanuit één plek en is ten alle tijden consistent.

Daarnaast ben je met een headless strategie flexibel en schaalbaar. Door middel van API’s wordt het eenvoudig om nieuwe producten en diensten toe te voegen aan het huidige platform. Nieuwe technieken en ontwikkelen rondom het web moeten het de gebruikers, web eigenaren en ontwikkelaars zo eenvoudig mogelijk maken. Headless is een stap in de goede richting, maar we gaan zeker nog een paar mooie uitdagingen tegenkomen! Met oog op de toekomst is de flexibiliteit en brede inzetbaarheid van headless wat ons betreft zeker future-proof.

Daarom is headless wat ons betreft: here to stay!