Als iets wordt bejubeld als de toekomst van e-commerce, dan krijg je daar als bijvoorbeeld e-commerce manager in de webwereld onvermijdelijk vragen over. Bij Elephant horen we de termen ‘PWA’ en ‘headless’ dan ook steeds vaker vallen. Maar wat wordt er nu eigenlijk mee bedoeld en is al dat enthousiasme terecht? Tijd voor een nuchter advies, waarbij we kijken naar de huidige markt en mogelijkheden.
PWA: altijd bruikbaar voor iedereen
PWA is een afkorting die staat voor ‘Progressive Web App’. Een PWA is eigenlijk een website die functioneert als (offline) app. Volgens een checklist van Google Developers moet een app aan vele criteria voldoen voor je ‘m PWA mag noemen. Al deze criteria komen neer op de volgende punten:
- de app moet offline te gebruiken zijn;
- de app moet beschikbaar zijn voor elk type gebruiker (mobiel, desktop etc.).
Headless: van heel systeem naar alleen de data
Headless wordt vaak in dezelfde context gebruikt als PWA, maar is zeker niet hetzelfde. De term ‘Headless’ is een methode van werken. Er is tegenwoordig voor elke stap in je workflow wel een systeem. Je hebt bijvoorbeeld een WordPress-website, maar je voorraadbeheer regel je in Navision, voor je zoekcatalogus heb je een tool als Agolia, je betaalverkeer loopt via Mollie en je productcatalogus staat in Magento. En last but not least: orders schiet je in via Exact Online.
De benadering nu is om één framework te nemen (WordPress, bijvoorbeeld) en daar dan alle tools in jouw werkproces mee te laten ‘praten’. Met headless bouwen kies je niet één bestaand framework als jouw belangrijkste. Je hoeft geen voorkant in bijvoorbeeld WordPress te maken. Daar ‘hak’ je dus als het ware het hoofd van af – vandaar de term ‘headless’. In plaats daarvan bouw je jouw eigen verzamelsysteem, dat alleen de gegevens van de overige systemen gebruikt. Met andere woorden: je gebruikt alleen de data van de verschillende frameworks en niet het hele ecosysteem van één framework.
Heel interessant, maar alleen als je je hoofd erbij houdt.
Voordelen van headless werken
Door niet te kiezen voor één framework waarin je je andere tools en systemen integreert, heb je de volgende voordelen:
- Meer
vrijheid
Je zit niet vast aan de mogelijkheden en beperkingen van een bepaald framework. Je hebt voor wat betreft de voorkant van je systeem meer vrijheid qua vormgeving en functionaliteiten. - Minder
afhankelijkheid
Je bent niet afhankelijk van één systeem. Als er in een van je systemen iets misgaat in een update of op securitygebied, dan is dat slechts één schakel in je proces. De rest blijft bereikbaar. Dat is natuurlijk heel anders wanneer je wel een hoofdsysteem hebt en precies dat systeem eruit klapt. - Beter
schaalbaar
Jouw business groeit. Je wilt dus ook je werkproces kunnen uitbreiden met nieuwe tools. Normaal gesproken ben je dan afhankelijk van extensies. Is die extensie er niet, dan is het een tijdrovend en kostbaar klusje om er één te laten bouwen. Met headless bouwen is de enige vereiste dat de tool een API heeft.
Waar wachten we op?
Het klinkt tot zover allemaal veelbelovend. Wij vinden het ook heel vet en staan te trappelen om een headless PWA te bouwen. Iets met een WordPress / Magento-combo, zonder grenzen voor de front-end die we kunnen maken, in een tool als Vue Storefront. Elephant vuurwerk gegarandeerd! Maar…
Om headless te kunnen werken, moeten de tools die je gebruikt een API (Application Programming Interface) hebben. Dat is een code die bij een systeem geleverd wordt, zodat andere systemen ermee kunnen ‘praten’. Een API zorgt ervoor dat je data van tools kunt ontsluiten en ophalen in je eigen front-end. En daar zit ‘m het probleem.
Nog niet headless ready
Op dit moment is de markt er nog niet klaar voor. Vaag begrip, markt, maar in dit artikel bedoel ik daarmee de frameworks waarin wij werken: vooral WordPress en Magento. Beide zijn open source frameworks die best heftig op plugins en extensies leunen. Deze plugins en extensies hebben vaak nog geen API. En laten dat nou vaak nét de stukjes data zijn die je nodig hebt. Een voorbeeld:
Pas leverden we een Magento 2 shop op die zijn productsamenstellingen doet via deze extensie. En je raadt het al: die had geen API. Had de klant daar een headless shop gewild, dan had dat al niet gekund. Dan heb je twee opties: of op zoek naar een alternatieve extensie, of een flink geldbedrag investeren in het ontwikkelen van een API. Flink tijd- en geldrovend.
Juist de extensies en plugins zijn dus vaak nog niet ‘headless ready’. Steeds meer ‘frameworks’ en ‘extensies’ worden wel gereed gemaakt met API’s. Waardoor ze beter kunnen aansluiten op een headless workflow. Het is dus een kwestie van wachten en zo een lagere investering nodig te hebben om een headless systeem te maken, of nu direct headless kiezen, maar daardoor wel meer investeren in het laten opzetten van de nodige API’s
Er is ook de optie om niet de hele shop om te bouwen – als alternatief kunnen we kijken naar belangrijke componenten in je shop die we headless kunnen ontwikkelen, bijvoorbeeld de productcatalogus. Jisse Reitsma van Yireo schreef hierover en noemde het concept “Microfrontends“, eigenlijk een hybride versie van PWA’s. Erg interessant als je bijvoorbeeld alleen je productpagina’s als PWA wil laten werken.
Maar kan ik nu juist voorloper zijn?
Absoluut. Laat ons dan zeker met je meedenken! Zoals we al zeiden: we staan zelf ook te trappelen. We willen zorgen dat je e-commerce site niet meer zo afhankelijk is van Magento of wat voor framework dan ook, en we willen hem schaalbaar maken. Maar we zullen niet pionieren om te pionieren. Het moet bij je organisatie passen en bij je budget. Als wij denken dat jouw organisatie pas over 3 tot 5 jaar rijp is voor een PWA of headless oplossing, dan zullen we je dat eerlijk zeggen. Want headless bouwen is leuk, maar alleen als je je hoofd erbij houdt.
Overigens geven we je natuurlijk ook graag advies over je situatie als je geen klant bij ons bent. Neem dan eens vrijblijvend contact met ons op!