How to tackle the ‘head’ with Headless

A headless intermezzo

Before we dive into this, a short intermezzo. Because what exactly is headless again? In a traditional ecommerce solution or CMS, both frontend (design) and backend (content) together occupy a single system. A headless setup simply separates the frontend and backend from one another. The CMS only contains the content that can be placed on various platforms. The backend is primarily an API. This way, blogs can be put on the website via the backend, but also (for example) via mobile apps. Partially because of this, headless has now become the spearhead of ecommerce systems and digital experience platforms (DXP). Leading vendors such as Salesforce, Adobe and Optimizely are also taking the headless route, and if you want to be seen as innovative, you have no choice but to follow.

Less control over the user experience

The arrival of headless means that business logic, which used to be in the backend’s domain, is now found in the frontend layer more and more. There has been a power shift from content managers and merchandisers who had control within a CMS or ecommerce platform, to developers. If you want to change something about a website as a content manager, in a lot of cases you have to do so via a frontend developer. For the average platform implementation project, this has consequently increased the demand for frontend developers. So it’s no surprise that we’re seeing businesses struggle with the fact that they have less control over the user experience in frontend setups. Something that can be a painful realization, especially for mid-market to enterprise companies.

To the rescue

Many companies are at an impasse because their content teams have less control within the CMS, and preview functionalities are lacking. They need development for that, after all. Fortunately, a few parties are cleverly filling this niche. These solutions arose from the use of components and the application of Server Drive UI: a technique that brings control over the frontend more to the backend (CMS). The evolution of those components resulted in the frameworks mentioned below:

Frontastic 
Frontastic combines the speed and flexibility of headless with the simplicity of a so-called website builder. Via a page builder consisting of drag & drop components, Frontastic enables business teams to work without the complexity of code. In addition, it offers the possibility to create templates, add redirects, manage the URL structure, optimize SEO, and much more. In short, Frontastic offers a rich set of features compared to other frontend frameworks.

Salesforce Commerce Cloud PWA Kit
The Commerce Cloud PWA Kit is a kind of storefront technology for headless which utilizes the Salesforce Commerce APIs and React.js. This Progressive Web App makes it possible to smoothly transition your online shop to a headless commerce architecture/ De PWA Kit is built to run on Managed Runtime by Salesforce with 99.9% uptime, and is easy to adjust for a variety of brands and companies. Additionally the Kit is being developed according to an ongoing roadmap to integrate with more Salesforce functionalities.

Deity 
Just like the Commerce PWA Kit, Deity is an API-first headless ecommerce platform based on React.js. With Deity, you’ll get a single page app (SPA), but thanks to dynamic URL changes and extra server-side rendering, navigating via the browser feels natural. Beside that, Deity features connectors to Magento 2, to WordPress for CMS and blog functionalities, and to Algolia for catalog search. Other benefits can be found in the completely functional checkout via Paypal and credit card payments via Adyen.

Vue storefront
Vue storefront focuses less on page builder-like systems and more on headless and acceleration. For that reason, it’s dedicated entirely to headless e-commerce. Built on Vue.js, Vue Storefront functions as a Progressive Web App with functionalities that improve the ecommerce client experience. For example, the platform delivers a few default components so that companies don’t have to start from zero to build a website and they can focus on what sets them apart from their competition.

With the solutions described above (and even more frameworks we haven’t mentioned!) there’s bound to be something for you. Curious what works best? Please contact us!