In the web development stack, the front-end UI layer is the most dynamic and has a very short lifecycle. The user interface and -experience is constantly subject to innovation and changes. Therefore, it is very useful if this layer can be developed independently of the rest of the stack. And that is exactly what happens in a headless architecture.

What is headless?

A Headless architecture is a decoupled architecture in which the front-end UI layer is completely separated from the data presentation (CMS) layer. The other way around: The CMS layer isn’t bothered with all the different front-end types, and the continuous changes to them. This has two major advantages:

• The CMS and the underlying back-end only need to be changed if there is a need from a business drive perspective such as a different type of web store, different marketing strategy or a different way of product presentation.
• A back-end developer doesn’t need to have any knowledge of UI development and the front-end developer can fully concentrate on the user experience.

Headless architecture

The headless decoupled architecture is realized by means of an API (Application Programming Interface) that is offered by the CMS layer to the UI layer. The API is an interface that determines how the UI layer can extract information from the CMS layer, after which the UI layer determines how it presents this information to the end user.

We can even go one step further: It is quite possible to have multiple systems in the back-end that all offer their API to the front-end UI layer. So you can have, for example, a system that is good in Content Management, such as WordPress, next to Magento, which is market leader in webshop functionality.

Advantages

It should be clear that this kind of architecture has great advantages. The CMS layer no longer has to deal with every change in the different front-end channels. No more worries about new Android versions, or the release of the latest Smart Watch. And, for example, as the owner of a webshop, you create optimal functionality and flexibility through decoupling, because you can select the most suitable platform/framework for each function. Also the exchange of components is easier. Suppose that a webshop owner already has a WordPress webshop, but is not satisfied with the e-commerce functionality within that platform. He can then keep the WordPress platform as a content management system and migrate to Magento for the e-commerce webshop functionality.

Progressive web apps

Since the back-end has now become transparent, the front-end developers no longer have to take a standard into account that is enforced by the specific back-end. This means that there is currently a lot of innovation and new solutions that will give the user experience a huge boost. One of those new innovations are Progressive Web Applications, developed by Google. Where we previously could choose between a mobile website and a native app (whether or not cross-platform developed), there is now the PWA that behaves as a native app but is built in a JavaScript framework and is accessible through a website. The PWA is much lighter than a native app, nevertheless, it behaves in the same way. The PWA is secure (standard https) and can even be used off-line. The PWA is progressive (and therefore very fast) because it is “lazy loading” while the user navigates.

The PWA is already frequently used for mobile webshops. It offers an unparalleled fast interface for visitors, regardless of product numbers (think of millions). As a web shop owner, you no longer have to deal with app stores and you don’t have to develop another app for every front-end platform/device. The user can add the “app” to his home screen and because of its properties, it works in full screen mode on a mobile device. The app detects when the user is offline, informs him and presents the already searched part of the webshop.

Headless Magento

Magento puts heavy bets on a headless architecture in combination with PWA’s. They are convinced that this is the future of e-commerce.

In the early days of e-Commerce, the webshops only had to take a desktop or laptop front-end into account. This allowed a fairly static full-stack (front-to-back) to be used. But as technology evolved and mobile traffic and the variety of devices increased, a faster and more flexible development environment was needed, where components could be developed and exchanged independently.

Magento also wants to make it easier for its customers to expand, add, or change e-commerce functionality. Traditionally, a customer had to rebuild his entire web environment if he wanted to implement a new solution. This usually resulted in a very expensive and long-term migration process. Nowadays it is easier because an e-commerce module can be added to an existing environment while it creates interfaces (by means of API’s) with the existing front-end and/or data presentation layer.

For this, Magento currently offers Magento Commerce 2, which has a very wide range of API’s. They are also working on Magento PWA Studio for developers, to enable them to develop light and super-fast PWAs that can be used on top of the Magento webshop.

Another independent open source PWA is VueStoreFront that uses Vue.js, Node.js, MongoDB and Elastic Search. VueStoreFront can be used in combination with any e-commerce solution by means of the included APIs. For Magento however, an API adapter is already available.

Conclusion

Headless architecture, in combination with Progressive Web Applications, is here to stay and delivers an unrivalled user experience. In addition, it offers many opportunities for webshops to deal with changes faster, more flexible and less expensive. It is much easier to implement independent changes in specific components without affecting the entire environment. This makes you less dependent on one supplier and/or one platform, which ultimately benefits the quality and price.