DEV Community

loading...
Cover image for Why go Headless?

Why go Headless?

matias2205 profile image Matias Arabolaza ・6 min read

We've heard a lot about "Headless" in the last year. Headless CMS, Headless Commerce… but what are they exactly? Which are the main benefits and drawbacks?
Let's go through all the pros and cons of this amazing architecture that is here to stay.

First of all, what’s a Headless CMS/Commerce?

In short, a headless platform is an e-commerce/cms that works without a front-end layer at all. Basically it delivers functionalities in isolation. The front end (or the head in this case), is totally decoupled from the backend.
That way, backend developers can use APIs to deliver things like blog posts, products, cart details, etc, while frontend developers can focus only on how to present that content using whatever framework they like. This seems like a dream!
On the other hand, traditional commerce/cms platforms have both the backend and the frontend tightly tied. This means that they are built with a monolithic architecture. As a consequence of this, we have a frontend that is super coupled with the backend layer.

Headless architecture works with a RESTful API that has a back-end data model and a cloud-based infrastructure. Since the platform is not coupled with the back-end, ecommerce brands can deliver things like content, products and payment gateways to smartwatches, Alexa Skills, and everything in between. (A really omnichannel experience)

How headless platforms work

Headless CMS and commerce work in a very similar way, sending requests between the presentation and application layers using web services or APIs.
For instance, when the user clicks “Add to cart” button, the frontend sends an API call to the backend layer that is in charge of adding that product to our cart and then we get a success or error message so we can notify the user if the product has been added correctly to his cart.

Ok, now that we know what is a headless CMS/Commerce and we know how they work, let’s check some key benefits.

Benefits:

Focus on business

Back when the only option was the traditional CMS/Commerce platforms people had to spend a lot of time setting up the platform, installing it, taking care of a server, and ensuring other critical aspects such as security.
Headless platforms allow you to focus on the business, to build real solutions for your customers and deliver high value features to the end user. All of this because you don’t have to spend time and money in all the chores mentioned above.

Agility and shorter time to market

Nowadays, with digital transformation impacting all industries, agility is a real necessity and not just an advantage.
Businesses need to be able to launch new products, ideas, and initiatives faster than ever before. Say goodbye to those super long projects that may take one or two years to hit the market.
With a headless platform you don’t have to wait to have the entire ecosystem finished. You can launch a static website with just a homepage and product page and then add more pages to your site.
In addition to this, having a better separation between the CMS/Ecommerce and your custom code is a real benefit when it comes to deployments, allowing for smooth CI/CD that only deploys your custom code and not the entire platform.

Omnichannel experience

A headless solution will help you ship your content anywhere and everywhere. That means that you, as a brand, can deliver your products on several channels at the same time. You can sell products on a website, mobile, TVs and any device that has a screen and internet connection.
Because we have a totally decoupled solution between backend and frontend, we can have several frontend projects and one backend providing the same information about products, carts, blog posts, etc to all the devices that we want.
Furthermore, you can add new touchpoints easily without building a new backend every time you want to add a new frontend. This opens the door for easier integrations. (We will talk about this later below 👇 )

Technology freedom (flexible Frontend development) and innovation

I think this one is one of the most important benefits of a headless solution: Technology freedom.
First of all, you can chose the technology that fits you or your company. You can chose the technology depending on your team. They use React? Vue? Angular? No matter what you chose, you can go ahead with total freedom. Do you want to use a preprocessor like SASS/SCSS? Or why not a super modern framework like Tailwind? Everything is a yes!
Frontend developers can create a user experience from scratch depending on business needs. They don’t need to worry about databases for example, they only need to do is a simple API call.
The only drawback that they have here is there is not presentation layer at all, in comparison with a traditional CMS where you have out of the box pages, like homepage, product page, etc. They have to build everything.

Easier integrations

A headless commerce/CMS solution must have an API which makes our life easier to integrate and communicate with other platforms, such as Payment methods.
What happened when your team wanted to add a new payment method in a traditional platform? It was a nightmare: you either had to go through plugin hell or integrate it yourself.
In a modern solution, integrations by APIs are super easy and straightforward to do. That’s because you have the control and the tool has an API to integrate, with documentation and steps to follow.

Scaling your application effectively

Since we are in a decoupled architecture, the front-end and back-end teams can work separately and simultaneously.
In a traditional platform they are tightly coupled, so if you want to scale one part of the application you have to scale everything. But in moderns headless solutions, our frontend or backend can be scaled independently. If the marketing team wants to create a promotion or discount for a product, we only need to scale our frontend! We have the control!

Some drawbacks

Time, ongoing costs and responsibility

Like the word says, “Headless” means that we don’t have a presentation layer in the front end at all.
We were talking about this like a big benefit, of course it is. But on the other hand, developers have to build the frontend layer from scratch. Create templates, user interfaces, maintain and support their creations, etc.
In traditional platforms you have the frontend layer working out of the box.

Marketing team can be affected

With headless solutions we don’t have a way to create content using WYSIWYG (What you see is what you get) and they can no longer preview the content to see how it looks like on the end user screen. But some moderns solutions are working on a way to preview the content before you publish it.

Do I need a headless commerce/CMS?

To answer this question I would recommend checking your requirements.

Some important use cases to have in mind for Headless platforms:

  • Build a website with a technology you or your team know
  • Use static site generators it’s a possibility because of headless
  • You need to go omnichannel. With a headless platform you can provide your content where you need it

In conclusion, Headless platforms (CMS and Commerce) are not a silver bullet. But definitely going headless is the way to go! It provides several benefits and very few drawbacks.
This architecture gives you the ability to distribute your content anywhere and everywhere.
Also the shorter time to market and the freedom to choose any technology that fits better for your business is a key benefit that this solution gives us.

Thanks for reading!
Follow me on Twitter: https://twitter.com/matias2205

Discussion (0)

pic
Editor guide