{"id":4269359,"date":"2022-07-13T11:25:41","date_gmt":"2022-07-13T09:25:41","guid":{"rendered":"https:\/\/www.deptagency.com\/insight\/how-to-tackle-the-head-with-headless\/"},"modified":"2025-12-08T13:40:44","modified_gmt":"2025-12-08T11:40:44","slug":"how-to-tackle-the-head-with-headless","status":"publish","type":"article","link":"https:\/\/www.deptagency.com\/en-au\/insight\/how-to-tackle-the-head-with-headless\/","title":{"rendered":"How to tackle the ‘head’ with Headless"},"content":{"rendered":"
\n\t\n\t<\/svg>\n\t\t\t\n\t\t\tBack to all articles\t\t<\/span>\n\t\n<\/button>\n\t\tHow to tackle the ‘head’ with Headless\t<\/h1>\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t<\/picture>\n\t\n\t<\/div>
\n\t\t\t\n\t\n\t
\n\t\tTim de Kamper\t\t
\n\t\tVP eCommerce, Europe\n\t\t\t<\/div>\n<\/div>\n\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tDate\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t13 July 2022\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n
\n\t
\n\t\t

\n\t\t\tMet de komst van headless zijn de projecten die we doen bij DEPT\u00ae\u00a0een enorme transitie ondergaan ten opzichte van een aantal jaar geleden. Enerzijds zien we dat bedrijven meer vrijheid krijgen in het ontwikkelen van websites, anderzijds raken contentmanagers autonomie kwijt wat betreft de invulling van die websites. Maar niet getreurd: er zijn genoeg partijen aan de horizon verschenen die in de vorm van pagebuilders en frameworks content weer de lead geven.\t<\/h2>\t<\/div>\n<\/div>\n\n
\n\t
\n\t\t\t<\/div>\n\n\t
\n\t\t
\n\t\t\t\n

\n\t\t\tEen headless intermezzo\t<\/h2><\/div><\/div>\n\n

Voordat we de diepte induiken, een kort intermezzo. Want wat is headless ook alweer precies? In een klassiek CMS of e-commerce oplossing zitten zowel de frontend (design) als de backend (content) gezamenlijk in \u00e9\u00e9n systeem. Een headless setup scheidt simpel gezegd de frontend en backend van elkaar. In het CMS zit alleen de content die op verschillende platformen geplaatst kan worden. De backend is namelijk een API. Zo kunnen blogs vanuit de backend op een website worden geplaatst, maar bijvoorbeeld ook in mobiele apps. Onder andere om deze reden is headless inmiddels het speerpunt van e-commerce systemen en digital experience platformen (DXP). Toonaangevende merken zoals Salesforce, Adobe en Optimizely gaan ook op de headless tour en wie als innovatief wil worden gezien moet mee.<\/p><\/div><\/div>\n\n

\n\t\t\tMinder controle over de user experience\t<\/h2><\/div><\/div>\n\n

De intrede van headless betekent dat de business logica die voorheen door backend werd opgepakt, nu steeds meer in de frontend laag gaat zitten. Er heeft een machtsverschuiving plaatsgevonden van contentmanagers of merchandisers die alles in een CMS of e-commerce platform konden beheren naar developers. Wil je als contentmanager iets veranderen aan de website, dan moet je dat via een frontend developer doen. In een gemiddeld project wordt de behoefte aan frontend developers dus groter. Het is daarom niet verrassend dat we bedrijven nu zien worstelen met het feit dat zij minder controle hebben over de user experience in frontend setups. En dat is, met name voor bedrijven in mid-market tot enterprise, soms een pijnlijke constatering.<\/p><\/div><\/div>\n\n

\n\t\t\tRedders in nood\t<\/h2><\/div><\/div>\n\n

Veel bedrijven lopen dus vast omdat hun contentteams minder controle hebben in het CMS\u00a0 en preview functionaliteiten ontbreken. Daar hebben ze namelijk development voor nodig. Gelukkig zien we een aantal partijen die hier slim op inspringen. Deze oplossingen komen voort uit het gebruik van componenten en toepassing van Server Driven UI: een techniek die controle over de frontend meer naar de backend (CMS) brengt<\/a>. De evolutie van die componenten zijn de hieronder genoemde frameworks:

Frontastic<\/em>
Frontastic combineert de snelheid en flexibiliteit van headless met de simpliciteit van een zogenaamde website builder. Middels een pagebuilder bestaande uit drag & drop componenten stelt Frontastic business teams in staat om te werken zonder de complexiteit van code. Daarnaast biedt het de mogelijkheid om templates te cre\u00ebren, redirects toe te voegen, de URL structuur te beheren, SEO te optimaliseren en nog veel meer. Kortgezegd biedt Frontastic een zeer rijke set aan features ten opzichte van andere frontend frameworks.

Salesforce Commerce Cloud PWA Kit
<\/em>De Commerce PWA KIT is een storefront-technologie voor headless die gebruik maakt van Salesforce Commerce APIs en React.js. Deze Progressive Web App maakt het mogelijk om je online shop soepel over te zetten naar een headless commerce architectuur. De PWA Kit is gebouwd om te draaien op Managed Runtime van Salesforce met 99.9% uptime en is makkelijk aan te passen aan verschillende merken en bedrijven. Daarnaast wordt de Kit dankzij een doorlopende roadmap verder ontwikkeld om te integreren met meer Salesforce functies.

Deity<\/em>
Net als de Commere PWA Kit is Deity een op React.js gebaseerd API-first headless e-commerce platform. Met Deity krijg je een single page app (SPA) maar dankzij dynamische URL-wijzigingen en extra server-side rendering voelt de navigatie in de browser natuurlijk aan. Deity komt daarnaast met connectoren naar Magento 2, naar WordPress voor CMS en blogfunctionaliteiten en naar Algolia voor catalog search. Andere voordelen zitten onder andere in de volledige functionele checkout met Paypal en creditcardbetalingen via Adyen.

Vue storefront
<\/em>Vue Storefront focust minder op pagebuilder-achtige systemen en meer op headless en acceleratie. Het is dan ook volledig toegewijd aan headless e-commerce. Gebouwd op Vue.js, opereert Vue Storefront als een Progressive Web App met functies die de e-commerce klantervaring verbeteren. Zo levert het platform standaard een aantal componenten zodat bedrijven niet vanaf nul hoeven te beginnen om een website te bouwen en kunnen focussen op datgene wat hen onderscheidt van concurrenten.
<\/em>
Met bovenstaande oplossingen (en nog meer frameworks die we nu niet genoemd hebben!) zit er vast iets tussen voor jou. Benieuwd wat het beste werk? Neem gerust contact met ons op!
<\/p><\/div><\/div>\n\t\t<\/div>\n\n\t\t<\/div>\n<\/div>\n\n\n\t

<\/div>\n\t
<\/div>\n\n\t\t
<\/div>\n\n\t\n\t<\/svg>\n\t\t\t\n\t\t\tClose\t\t<\/span>\n\t\n<\/button>\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tJust Say Hi\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tNew Business\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tPress Inquiries\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tWorking at DEPT\u00ae\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t<\/form>\n\t\t<\/iframe>\n\t
\n\t
<\/div>\n\t
<\/div>\n<\/div><\/div>\t<\/div>\n\n\t\n\t<\/svg>\n\t\t\t\n\t\t\tBack\t\t<\/span>\n\t\n<\/button><\/div>\n\n
\n\t
\n\t\t

\n\t\t\tQuestions?\t<\/h2>\t<\/div>\n\n\t
\n\t\n\n\t\t\t
<\/div>\n\t\n\t<\/div>\t\t\t
\n\t\t\t\t

\n\t\t\tVP eCommerce, Europe\t<\/p>

\n\t\t\tTim de Kamper\t<\/h3>\t\t\t<\/div>\n\t\t\n\t\t\n\t
\n\t\t
\n\t\t\t\n\t\t\t\tGet in touch\t\t\t<\/span>\n\t\t\t\n\t<\/g><\/svg><\/i>\t\t<\/div>\n\t<\/div>\n<\/button>\t<\/div>\n<\/div>\n\n\n\t
<\/div>\n\t
<\/div>\n\n\t\t
<\/div>\n\n\t\n\t<\/svg>\n\t\t\t\n\t\t\tClose\t\t<\/span>\n\t\n<\/button>\n\t
\n\t\t
\n\t\t<\/iframe>\n\t
\n\t
<\/div>\n\t
<\/div>\n<\/div><\/div>\t<\/div>\n\n\t\n\t<\/svg>\n\t\t\t\n\t\t\tBack\t\t<\/span>\n\t\n<\/button><\/div>\n\n
\n\t
\n\t\t

\n\t\t\tInsights\t<\/h2>