Wat is headless?
Een headless architectuur is een ontkoppelde architectuur waarin de front-end UI-laag volledig is gescheiden van de datapresentatielaag (CMS). Andersom: de CMS-laag hoeft zich niet bezig te houden met alle verschillende front-endtypen en de continue wijzigingen daarin. Dit heeft twee belangrijke voordelen:
- Het CMS en de onderliggende back-end hoeven alleen te worden aangepast als dat vanuit zakelijk oogpunt nodig is, bijvoorbeeld voor een ander type webwinkel, een andere marketingstrategie of een andere manier van productpresentatie.
- Een back-end ontwikkelaar hoeft geen kennis te hebben van UI-ontwikkeling en de front-end ontwikkelaar kan zich volledig concentreren op de gebruikerservaring.
Headless architectuur
De headless, ontkoppelde architectuur wordt gerealiseerd door middel van een API (Application Programming Interface) die door de CMS-laag aan de UI-laag wordt aangeboden. De API is een interface die bepaalt hoe de UI-laag informatie uit de CMS-laag kan halen, waarna de UI-laag bepaalt hoe deze informatie aan de eindgebruiker wordt gepresenteerd.
We kunnen zelfs nog een stap verder gaan: het is heel goed mogelijk om meerdere systemen in de back-end te hebben die allemaal hun API aan de front-end UI-laag aanbieden. Zo kun je bijvoorbeeld een systeem hebben dat goed is in contentmanagement, zoals WordPress, naast Magento, dat marktleider is op het gebied van webshopfunctionaliteit.Voordelen
Het is duidelijk dat dit soort architectuur grote voordelen biedt. De CMS-laag hoeft niet langer elke wijziging in de verschillende front-endkanalen af te handelen. Geen zorgen meer over nieuwe Android-versies of de release van de nieuwste smartwatch. En bijvoorbeeld, als eigenaar van een webshop creëer je optimale functionaliteit en flexibiliteit door ontkoppeling, omdat je voor elke functie het meest geschikte platform/framework kunt kiezen. Ook het uitwisselen van componenten is eenvoudiger. Stel dat een webshop-eigenaar al een WordPress-webshop heeft, maar niet tevreden is met de e-commercefunctionaliteit binnen dat platform. Hij kan het WordPress-platform dan behouden als contentmanagementsysteem en migreren naar Magento voor de e-commercefunctionaliteit van de webshop.
Progressive Web Apps
Omdat de back-end nu transparant is, hoeven front-end ontwikkelaars geen rekening meer te houden met een standaard die door de specifieke back-end wordt opgelegd. Dit betekent dat er momenteel veel innovatie en nieuwe oplossingen zijn die de gebruikerservaring enorm zullen verbeteren. Een van die nieuwe innovaties zijn Progressive Web Applications, ontwikkeld door Google. Waar we voorheen konden kiezen tussen een mobiele website en een native app (al dan niet platformonafhankelijk ontwikkeld), is er nu de PWA die zich gedraagt als een native app, maar is gebouwd met een JavaScript-framework en toegankelijk is via een website. De PWA is veel lichter dan een native app, maar gedraagt zich desondanks op dezelfde manier. De PWA is beveiligd (standaard https) en kan zelfs offline worden gebruikt. De PWA is progressief (en daardoor erg snel) omdat deze "lazy loading" toepast terwijl de gebruiker navigeert.
De PWA wordt al veelvuldig gebruikt voor mobiele webshops. Het biedt een ongeëvenaard snelle interface voor bezoekers, ongeacht het aantal producten (denk aan miljoenen). Als webshopeigenaar hoeft u zich niet langer bezig te houden met app stores en hoeft u geen aparte app te ontwikkelen voor elk front-end platform/apparaat. De gebruiker kan de "app" toevoegen aan zijn startscherm en dankzij de eigenschappen werkt deze in de volledige schermmodus op een mobiel apparaat. De app detecteert wanneer de gebruiker offline is, informeert hem hierover en toont het reeds doorzochte deel van de webshop.
Headless Magento
Magento zet vol in op een headless architectuur in combinatie met PWAʼs. Ze zijn ervan overtuigd dat dit de toekomst van e-commerce is.
In de beginjaren van e-commerce hoefden webshops alleen rekening te houden met een front-end voor desktops of laptops. Hierdoor kon een vrij statische full-stack (van voor naar achter) worden gebruikt. Maar naarmate de technologie zich ontwikkelde en het mobiele verkeer en de verscheidenheid aan apparaten toenamen, was er behoefte aan een snellere en flexibelere ontwikkelomgeving, waar componenten onafhankelijk van elkaar konden worden ontwikkeld en uitgewisseld.
Magento wil het voor haar klanten ook gemakkelijker maken om e-commercefunctionaliteit uit te breiden, toe te voegen of te wijzigen. Traditioneel moest een klant zijn volledige webomgeving opnieuw opbouwen als hij een nieuwe oplossing wilde implementeren. Dit resulteerde meestal in een zeer kostbaar en langdurig migratieproces. Tegenwoordig is het eenvoudiger omdat een e-commerce-module aan een bestaande omgeving kan worden toegevoegd, waarbij interfaces (via APIʼs) worden gecreëerd met de bestaande front-end en/of datapresentatielaag.
Magento biedt hiervoor momenteel Magento Commerce 2 aan, dat een zeer breed scala aan APIʼs heeft. Ze werken ook aan Magento PWA Studio voor ontwikkelaars, zodat ze lichte en supersnelle PWAʼs kunnen ontwikkelen die bovenop de Magento webshop gebruikt kunnen worden.
Een andere onafhankelijke open-source PWA is VueStoreFront die gebruikmaakt van Vue.js, Node.js, MongoDB en Elastic Search. VueStoreFront kan in combinatie met elke e-commerce oplossing gebruikt worden door middel van de meegeleverde APIʼs. Voor Magento is er echter al een API-adapter beschikbaar.
Conclusie
Headless architectuur, in combinatie met Progressive Web Applications, is een blijvende trend en levert een ongeëvenaarde gebruikerservaring. Bovendien biedt het webshops veel mogelijkheden om sneller, flexibeler en goedkoper met wijzigingen om te gaan. Het is veel eenvoudiger om onafhankelijke wijzigingen in specifieke componenten door te voeren zonder de gehele omgeving te beïnvloeden. Hierdoor bent u minder afhankelijk van één leverancier en/of één platform, wat uiteindelijk de kwaliteit en de prijs ten goede komt.
