22 January, 2021
8 MIN

Choosing a Headless platform: Save costs and gain flexibility

At Burst, we like to work with modern technology because we want to offer our customers a great and sustainable solution. Keeping this in mind, we design and create Headless platforms for almost all our customers. Even though this is not a new concept, the spotlights are on it now more than ever. In this article, we will explain to you what a Headless platform is and why we use it for our customers.

 

 

What is ‘Headless’?

In short, a Headless platform separates the front-end of a website or web application from the back-end. The front-end is the part of a website that you see on your laptop, phone or tablet as a user. This is the part where you interact with the website, the outer layer. The back-end is the software behind it all, like a Content Management System (CMS), that feeds this front-end (this can also be other systems like a booking system).

why headless?

When using a Headless website or web application, the front-end operates separately from the back-end. This creates a couple of advantages:

1. It is possible to connect more than one front-end to the back-end. This way, you will be able to control all the content in one place while publishing it on multiple different channels. Handy for websites, but also for a native app, voice assistant or even a dashboard on the big screen in cinemas at the International Film Festival Rotterdam. Before showing the feature film, visitors are able to see a dashboard with the latest Social Media posts, the current top 10 of the audience awards and other information, which is all taken from the same back-end as where the website gets its content. We are also working with a Headless design for Mentos and Hero. The Mentos brand websites have the same look and feel at the front-end in all 80+ countries. At the same time, the local marketeers have the option to fill in and adjust the Drupal CMS to their own liking. This means a reduction in costs because there is only one central system that needs to be implemented and maintained.

2. It is possible to combine multiple specialistic back-end systems. A prime example is combining a commerce solution like Shopify or Shopify Plus with a CMS (like Drupal, Contentful, Prismic or Sanity) and using the power of the individual systems optimally. This way, product information (whether from a Product Information Management (PIM) system or not) can be combined and enriched with multilingual content from the CMS when necessary.

  

3. A well-executed Headless integration leads to high performance and better user experience (UX). The digital product is more scalable and of higher quality. This is how the Headless platform for ‘Natuurmonumenten‘ is able to easily handle 10 million visits per year. 

4. It is easier to use and integrate a ‘design system‘. A design system offers components that are used by different teams in different products. It makes for a single source of truth and a consistent brand experience throughout all digital products.

5. The platform is easier to maintain and expand because the individual components are smaller and less complex.

6. Cooperation between two parties or teams is faster because front-end and back-end are two separate systems. Developing components parallel leads to faster delivery of software and means they can go live faster, so you can test it in practice and to then keep developing further.

If your only tool is a hammer, everything looks like a nail

As with all trends, it is important to steer clear of tunnel vision. The choice for a Headless system is not per se better than a traditional Monolith system.

To create a well-performing Headless website or web application, you will need developers with a different skillset. The architecture of the product – making the different components work together well – requires more time and attention.

A Headless solution can also mean losing functionalities that you would have out-of-the-box with all-in-one solutions. Think about a preview function for example, where you want to see from your CMS how a certain choice comes to life in the front-end. This is a standard option in almost every CMS but when you use a CMS in a Headless environment, you could lose this. In most cases, this can be fixed, but will cost extra time and therefore money.

In the end, it is not necessary for all websites or web applications to publish on multiple channels or to integrate with other systems. When you can work well with standard options to run your content- or commerce platform, it may be better to choose a SaaS solution (Shopify, Contentful and so on) or open-source solutions (Drupal, WordPress, Magento).

Burst: Headless since 2016

At Burst, we have been working intensely with the open-source CMS Drupal. In 2016, Drupal 8 came out, including a Rest API. With this, we were able to connect our own front-end to the Drupal back-end and this is when the first Headless websites within Burst were born. From that moment on, we have expanded our knowledge and expertise and built dozens of Headless platforms. Not based only on Drupal but also with Shopify (Plus), Magento, Sanity and Contentful as back-end systems.

Standardise

To build a Headless architecture as efficiently as possible, we have made standardising our tech stack a priority over the last few years. Standardising creates routines and that leads to less exceptions and mistakes. We have developed our own tooling and functionality that optimises and speeds up our development workflow with Headless architectures.

A part of our standardisation was compensating for the functionalities that come with all-in-one packages. This is why we created our own (open source) CMS modules for Drupal, a standard Headless setup for Shopify and tooling that optimises the performance of our platforms (Static Site Generation).

Because of this knowledge and these innovations, we are able to build Headless platform in about the same time as a Monolith platform.

Our current stack consists of Node.js, Apollo, GraphOL, Gatsby, React, Next.js and TypeScript among others. ”
Jeroen van den Berg, CTO at Burst

What’s next? Headless as a gateway to MACH

The developments in the world of tech never stop. In June of 2020 the MACH Alliance was founded. The MACH Alliance fights for the development and promotion of future-proof enterprise technology. MACH stands for ‘Microservices based, API-first, Cloud-native SaaS and Headless’ and represents the next phase in web architecture.

This architecture consists of different (micro)services, out of own development or as a SaaS service, that together form a greater whole. Seeing as the digitalisation of society will only keep increasing for a while, online environments will become larger and more complex. And it is this trend where it is a welcome idea to separate the complexity into smaller, separate components.

An example of this is the digital ecosystem of IFFR, that consists of many back-end systems, external tools and touchpoints. We will go more in-depth about this in a different article.


Conclusion

Creating a website or web application with a Headless design offers many advantages compared to the traditional systems where back-end and front-end are one. Content can be published on different channels for example, all the while maintaining the power of the individual systems. This makes the final product scalable and of high quality. However, a Headless system does not always have to be preferred over a Monolith system, because it does require a different skillset for the developers and it will take more time to build the architecture. Through standardisation of the development process of Headless systems you can give yourself less room for mistakes and build a high-end quality digital product super efficiently.

Do you want to know more about Headless or our way of working?
Please contact [email protected].

Back to overview