Headless Explained to a 5-Year-Old

You’ve probably seen the term “headless” used countlessly over and over again. There are so many platforms, services, and frameworks that use a headless architecture. An example of this is Medusa, a headless commerce platform.

But what is headless, really? And why is it becoming a trend?

In this article, I’ll simplify the meaning of “headless” as much as possible. I’ll also go over some of the benefits of headless architecture and some of the popular headless trends.

What is Headless

The formal explanation of a Headless architecture is the decoupling of the frontend and the backend. But what does that actually mean?

Real-life Example

Let’s take PlayStation (or any other console you prefer) as an example. When you buy a PlayStation, you buy the console or device that allows you to play games, handles your storage and settings, and more.

However, you’re free to connect it to whatever monitor or TV you want. You just need the correct cable that works for both your monitor and PlayStation, and you’ll be able to see the games and play them.

A headless server is the PlayStation console in this example. It holds all logic needed to perform certain functionalities and store and manage data. That’s its main focus. It’s not concerned with how these functionalities and data are presented to the user.

A headless server then exposes a set of APIs to get access to the server’s functionalities and data. Think of the APIs like the HDMI port in a PlayStation.

The APIs are designed in a way that’s optimal for the server. It’s not concerned with who or what is using them. Those who want to use it will simply have to follow its design to allow the user to perform the functionalities provided by the server or present data to the user.

What it Really Means

Traditional monolithic architecture tightly binds the frontend to the backend. This means that any backend decision can affect or be limited by the frontend, and vice-versa.

The headless architecture removes the binding between the two components. A backend should focus on processing and handling logic and data only. It’s concern shouldn’t be how to present it to the user.

Similarly, the frontend should focus on how to provide a good web design and user experience. It should allow the user to be able to perform a set of functionalities and interact with the data in an intuitive way.

This separation can be done by making sure the backend exposes well-designed APIs that the frontend can use to provide an graphical interface to the user. Whether the frontend is a website or an app, it should be able to access the backend just the same.

Why Use a Headless Architecture

A headless architecture provides a lot of advantages for both the backend and frontend. To keep it simple here are some advantages for each:

Backend

• You have more freedom in designing APIs or the internal architecture and logic. This removes a lot of hacky solutions that developers used to run into previously.
• Your backend will be more scalable and you can integrate it with third-party services hassle-free.
• Your backend is more secure as the user will be interacting with the frontend and as the backend and frontend are generally hosted separately.

Frontend

• You have more freedom in what framework, device, or programming language you use. You can use frameworks like Gatsby to create faster static websites.
• You can focus on the design and user experience of the front end without being weighed down by the backend.
• You can reduce costs on hosting your frontend as there are more flexible solutions for the frontend on its own rather than a tightly-knit frontend and backend.

Popular Headless Trends Explained

Currently, the most popular headless trends are headless Content Management Systems (CMS) and headless commerce.

These 2 concepts are gaining popularity as they bring so much power to developers and systems as a whole.

Headless CMS

A headless CMS is a CMS that allows you to manage content without worrying about how or what is going to present the content. This allows you to integrate CMS into any system or website of your own just by calling the APIs that the headless CMS exposes. An example of this is Strapi or Contentful.

Headless Commerce

Headless commerce is a platform that provides all basic checkout functionalities through its APIs. You can then build the storefront that the user interacts with using any framework you want or for any device. An example of this is Medusa.

You can also seamlessly integrate a headless CMS like Strapi with a headless Commerce like Medusa for an ecommerce platform with rich CMS features.

Conclusion

A headless architecture leads to a better developer experience, highly scalable applications, and better performant websites. Headless will only get more popular with time, and it's important you get a better understanding of it.

If you’re interested in getting started with headless commerce, check out Medusa’s Quickstart guide to get started in minutes.