Wat is headless commerce?

Wat is headless commerce?

Headless commerce is de laatste tijd één van de buzzwoorden in e-commerce, maar het bestaat al bijna een decennium. Wat is het eigenlijk en waar komt het vandaan?

De technische architectuur van e-commerce is sterk veranderd sinds de monolithische architectuur halverwege de jaren 2000. Die was ontworpen voor desktop en was nauw gekoppeld aan backendcomponenten en zelfs aan technische infrastructuur. Halverwege de jaren 2000 klinkt misschien oud, maar nog steeds vertrouwen veel merchants op deze opzet. Na een aantal pogingen om verschillende architecturen en commerce en contentfunctionaliteit te combineren, zijn we op de echte API-first benadering gekomen die alle backendlogica en data met elkaar verbindt. Bedrijven kunnen eindelijk van het beste van beide werelden profiteren. Het idee is niet nieuw, maar dankzij de opkomst van de API-economie kan deze verandering steeds meer worden doorgevoerd.

Zonder dieper in te gaan op verschillende architecturen, kunnen we de verandering misschien duidelijker maken door de tijdlijn in twee perioden in te delen; vóór mobiele telefoons en ná desktops. Sinds de lancering van de eerste iPhone is de online verkoop enorm gegroeid. Consumenten brengen tegenwoordig veel tijd door op hun verschillende apparaten en gebruiken ze allemaal om via verschillende kanalen te winkelen. Dat wordt ook wel multichannel of omnichannel genoemd – klinkt wellicht verwarrend maar het beestje moet een naam hebben - laten we het gewoon commerce noemen. De afgelopen jaren is de DTC-trend enorm gegroeid en sinds de coronapandemie in maart 2020 begon, heeft de e-commerce een recordhoogte bereikt en tegelijkertijd de lat hoger gelegd voor hoe merken omgaan met consumenten.

Ná de desktop-tijdperk is de vraag van verkopers om hun klanten op meerdere plekken en via meerdere verkoopkanalen te bereiken aanzienlijk toegenomen. Niet alleen via desktop en mobiel, maar ook via andere online kanalen zoals social media, telefoon, berichten, apps enz. En zelfs in fysieke winkels.

De winnaar is degene die de data het beste gebruikt om de klant te begrijpen en het meest aansprekende merk opbouwt met een geweldige en naadloze klantervaring in alle kanalen en voor alle apparaten. Headless commerce-architectuur is uitgevonden om aan deze eisen te voldoen, zonder dat de ervaringen op elk kanaal en apparaat vanaf nul opgebouwd hoeven worden.

Maar wat betekent headless commerce? 

Headless Commerce verwijst naar een technische architectuur die de presentatielaag van een website - de frontend - loskoppelt van de commerce- en bedrijfslogica-laag - de backend - met behulp van een API. De architectuur geeft toegang tot alle backendfunctionaliteiten en gegevens via API's en stelt developers in staat om flexibele gebruikersinterfaces te bouwen voor alle klantcontactpunten met een frontendtechnologie naar keuze.

Headless commerce technische architectuur

Om de terminologie duidelijk te maken: headless betekent niet dat je commerce-oplossing geen "head" heeft. Traditionele commerce-architecturen hebben een standaardwebsite waar klanten terechtkomen die als het enige “head” fungeert. De nauw gekoppelde "body" eronder bevat de e-commerce-logica, -data en -processen. Bij headless commerce blijft de "body" bestaan, maar biedt deze ook een aantal diensten (API's) waarmee je het gewenste type "head" kunt selecteren.

Wauw! Lost dat dan al mijn problemen op? Is dit het geheime recept? Nou ja, het heeft zeker veel voordelen, maar laten we wat verder kijken dan de geschiedenis en de definitie. Hoe kan headless commerce je bedrijf helpen? Het probeert in de basis eigenlijk twee grote problemen op te lossen: 

  1. Hoe je een groeiend aantal klantcontactpunten kunt ondersteunen (frontend) en
  2. Hoe de onderliggende bedrijfslogica en -data consistent kunnen worden gehouden (backend).

Hoe werkt headless commerce? 

Omdat alles losgekoppeld is, heb je (in theorie althans) de vrijheid om de backend- en frontendcomponenten en -technologieën te kiezen die het meest geschikt zijn voor jouw behoeften. Met een headless-benadering kunnen bedrijven vervolgens klantervaringen op meerdere contactpunten wijzigen en uitbreiden zonder de functionaliteit in de backend te verstoren.

Maar deze grote vrijheid brengt ook een grote verantwoordelijkheid met zich mee. Terwijl moderne en SaaS-gebaseerde e-commerceplatforms veel technische aspecten van commerce hebben vereenvoudigd, brengt headless commerce weer hoge technologiekosten met zich mee. Headless commerce architectuur heeft zeker zijn elegantie en veelzijdigheid, maar dit betekent niet dat je het goedkoopste systeem gebruikt.

Gelukkig zijn er verschillende e-commerceplatforms die de backend kunnen aandrijven en je tegelijkertijd de vrijheid geven om een ​​unieke klantervaring op te bouwen met moderne frontend-tools. Sommige platforms zijn volledig gebaseerd op headless architectuur en sommige ondersteunen dit met speciale headless-API's.

De backend-laag van headless commerce architectuur kan worden opgebouwd uit bouwstenen die een beetje lijken op Lego. Hoofdcomponenten kunnen bijvoorbeeld een e-commerceplatform, Headless CMS (Content Management System) en een reeks aanvullende platforms en diensten zijn, zoals een CRM, aanbevelingsengine, zoekmachine, loyaliteitssysteem, beoordelingen en recensies, enz.

Om de zaken te versnellen, kun je je architectuur aanvullen met zogenaamde ecosysteem-apps die al geïntegreerd zijn in het backend om data uit te wisselen - zodat je data niet volledig in aparte backendcomponenten terechtkomt. Maar zorg ervoor dat alle apps die je selecteert de benodigde headless API's bieden, zodat je het type "head" kunt bouwen dat jij wilt.

Voorbeeld van headless commerce architectuur met Shopify Plus en Contentful

De frontend-laag met headless commerce architectuur is zeer flexibel en aanpasbaar, maar het kan ook wat lastiger zijn omdat deze altijd min of meer custom built is. Er zijn goede tech stack-frameworks om te volgen en ook enkele frontend-platforms beschikbaar, maar niet dezelfde kant-en-klare en volledig functionele templates die moderne SaaS-platforms tegenwoordig kunnen bieden.

Wat zijn API's?

 

API's zijn application programming interfaces waarmee ontwikkelaars de frontend-functies aan de backend-logica en -data kunnen koppelen. API's worden traditioneel gebruikt in backend-integraties, bijvoorbeeld voor het integreren van orderdata of voorraadinformatie tussen verschillende backend-systemen. Deze API’s zijn er in allerlei vormen, van XML- of CSV-bestandsoverdrachten tot modernere REST-API's, enz.

De vereisten voor headless API's zijn totaal verschillend. Headless API's moeten veel flexibeler zijn en vaak beter presteren wanneer ze rechtstreeks worden verbonden met de frontendtoepassingen van de klant. En nog belangrijker, headless API's zijn niet ontworpen om alleen gegevens over te dragen om backendprocessen te verbinden, maar ook om de backendfunctionaliteit beschikbaar te maken voor de frontend. Terwijl traditionele integratie-API's soms maar één keer per dag werden uitgevoerd en het verwerken van grote hoeveelheden gegevens soms enkele minuten in beslag nam, moeten headless API’s kleinere acties in realtime kunnen uitvoeren, vaak in milliseconden.

Een ander belangrijk punt is de API-dekking. Het commerce-platform dat wordt gebruikt voor headless commerce, moet worden gebouwd met een API-first benadering. Dat betekent dat alle, of in ieder geval de meeste functionaliteiten worden weergegeven via API.

Nieuwe soorten API's, zoals GraphQL, zijn handig bij headless commerce. GraphQL is een querytaal voor API's en een runtime-omgeving om deze query’s uit te voeren met je bestaande data. GraphQL biedt een volledige en begrijpelijke beschrijving van de data in je API, zodat klanten meerdere bronnen tegelijk kunnen opvragen en precies krijgen wat ze nodig hebben. Dit maakt het gemakkelijker om API's in de loop van de tijd te ontwikkelen en om krachtige developertools te maken.

Voordelen en veelvoorkomende gebruiksscenario's bij headless commerce

Oké, laten we dit technische verhaal eens omzetten in zakelijke voordelen. Wat kan ik verwachten en wat zijn de meest voorkomende gebruiksscenario's?

Hoewel dit artikel voornamelijk het grote plaatje van headless commerce uitlegt, zijn er ook enkele veelvoorkomende gebruiksscenario’s beschikbaar voor bedrijven met specifieke behoeften en een of twee klantcontactpunten.

1. Je bouwt een unieke klantervaring

Omdat je zelf het type "head" kan kiezen dat je wil, kun je ook de beste en modernste frontend-technologieën gebruiken om de best mogelijke ervaring voor je klanten te ontwerpen en te bouwen. Met headless kun je ook meer specifieke functies gebruiken op verschillende apparaten, zoals camera's.

2. Je haalt meer uit je content

Met headless commerce kun je het beste uit je contentmanagement halen, door commerce- en contentfunctionaliteiten naadloos met elkaar te verbinden. Je kunt dus volledig gebruik maken van een headless contentmanagementplatform met al zijn functies om een prettige winkelervaring te bieden, vooral wanneer je te maken hebt met een grote hoeveelheid gepersonaliseerde content.

3. Mobiele apps en niet-traditionele touchpoints

Heb je een app nodig? PWA-implementatie (Progressive Web App) kan een voordelig alternatief zijn voor mobiele SDK's. Of wil je producten verkopen in een videogame? Dan biedt een headless en API-gestuurde architectuur je de tools om je webshop in de game in te bouwen.

4. Hoge prestaties

Onderzoeken tonen aan dat snelle laadtijden belangrijk zijn je conversieratio. Google is ook begonnen met het gebruik van laadtijden als criterium voor hun mobiele zoekresultaten en heeft bevestigd dat Core Web Vitals (Loading (LCP), Interactivity (FID) en Visual Stability (CLS)) vanaf mei 2021 zullen fungeren als ranking-signalen voor zoekresultaten. Facebook laat ​​ook trage laadtijden zien wanneer content wordt geopend binnen de browser van de app. Als de hoge prestaties die moderne SaaS-platforms kunnen bieden niet voldoende zijn, geeft de headless architectuur je de tools (PWA = Progressive Web App met gedeeltelijk statische content) om extreem snelle laadtijden te bereiken wanneer ze correct zijn gebouwd.

Maar als je van plan bent de algehele schaalbaarheid van het platform op te lossen met headless frontend-implementatie, dan is dit misschien niet de juiste oplossing voor je probleem.

5. Verschillende soorten backend-logica aansluiten

Headless commerce ondersteunt niet alleen meerdere klantcontactpunten, maar het verbindt ook verschillende soorten backend-logica in één en dezelfde webshop. Bijvoorbeeld het verkopen van merchandise via één platform, tickets of digitale materialen met een ander, en het beheren van content met het derde platform enz.

6. Snellere development en uitrolcyclus

Dit wordt vaak gezegd over headless architectuur, maar het tegenovergestelde is waar. De standaardimplementatiemodellen die moderne SaaS-platforms kunnen bieden, zijn hoogstwaarschijnlijk sneller te ontwikkelen en bij te werken dan headless-implementaties. Maar headless geeft je wel snelle implementatie-opties en development gaat meestal sneller dan bij traditionele of verouderde e-commerceplatforms.

Ik gebruik (of overweeg) Shopify Plus, wat zijn de voordelen voor mij?

Allereerst is Shopify Plus een geweldig voorbeeld van een platform dat het backend-gedeelte van headless commerce kan draaien en een API biedt die de headless-implementaties ondersteunt, de Storefront API. Het heeft ook het ecosysteem met de meeste aanvullende technologieën om uit te kiezen, die vaak al vooraf zijn geïntegreerd op het backend-niveau, wat een zeer groot voordeel is. Shopify is ook groot genoeg om een interessante partner te zijn voor alle soorten headless platforms. Maar of headless commerce de juiste keuze is voor jouw bedrijf, is nog steeds een zeer belangrijke vraag.

Vraag: Het platform ondersteunt al alle contactpunten en verkoopkanalen die ik op dit moment nodig heb. Moet ik nog steeds overstappen op headless commerce?

Antwoord: Headless commerce architectuur voegt zelf geen waarde toe als de contactpunten en verkoopkanalen al eenvoudig te ontwikkelen en te onderhouden zijn. Shopify maakt al op een efficiënte manier onderscheid tussen de bedrijfslogica en frontend. De logica in vloeibare templates (thema's) kan bijvoorbeeld al apart worden aangepast, zonder dat dit invloed heeft op de bedrijfslogica die wordt aangepast met openbare of custom apps of de communicatie met Shopify via API's. Mijn advies is om goed na te denken over wat je uit headless commerce zou willen halen.

Vraag: Kan ik het ecosysteem en de apps van Shopify gebruiken zoals ik gewend ben?

Antwoord: Backend apps wel, maar bij frontend apps kun je geen simpel installatieproces meer volgen. Je moet de app in je frontend-oplossing implementeren met behulp van API's of de functionaliteit helemaal opnieuw bouwen als de app geen API's levert. 

Vraag: Ondersteunen alle apps headless commerce?

Antwoord: Nee, de meeste niet. Het komt vaker voor bij grotere apps, maar je moet ze één voor één controleren.

Vraag: Bespaart headless commerce tijd of geld?

Antwoord: Hoogstwaarschijnlijk niet, eerder het tegenovergestelde. Headless voegt een extra laag complexiteit en behoefte aan begrip van algemene technische oplossingen toe in vergelijking met traditionele Shopify-implementaties.

Vraag: Moet ik mijn team uitbreiden met nieuwe technische skills?

Antwoord: Je zou het kunnen uitbesteden aan je Shopify-partner, maar om je business verder te ontwikkelen en je eigen systeem te begrijpen, kan het nuttig zijn om het op zijn minst op architectuurniveau te begrijpen. Headless-implementaties verschillen veel meer van elkaar dan traditionele implementaties, dus het kan zijn dat je daarom afhankelijk wordt van je partner..

 Wil je verder praten over headless commerce en Shopify Plus? 

Contact us

 

GESCHREVEN DOOR TERO JUNTTILA, CTO & MEDEOPRICHTER VAN WOOLMAN