Headless Guide

Is your business ready for structured content?

Introduction to Headless

Tech

ELI5

Imagine you are building a LEGO structure, where the top part is a beautifully designed house and the bottom part is a platform on which it stands. Now, if you ever want to change the look of the house without changing the platform, you can easily swap it out for a different design because the two parts are not permanently attached.

What is headless?

Now, let’s relate this to software.

Headless is the complete separation of the frontend experiences from the backend services that provide data, functionality and business logic.

In traditional web development, the frontend (what you see and interact with, like the design of a website) and the backend (where all the data and logic are, like the foundation and the inner workings) are tightly intertwined, like a single LEGO piece. Check out Traditional vs Headless for a deeper understanding.

In a “headless” architecture, the frontend (the “head”) and the back-end are separated, like our two-part LEGO masterpiece. This means you can change the appearance and functionality of the front-end without having to mess with the backend, and vice versa.

Learn more about why is it called headless architecture?

What is a headless website?

While headless is a general architecture, a headless website is the application of that architecture to a website. Meaning, your CMS or other data sources would live on a different system than your frontend. For example, you might manage your website’s content on something like directus or Contentful (more on these later) and your frontend would be built using Next.js or SvelteKit.

Of course there are tons of other possible providers for data and for building your frontend but your individual project’s needs and a good development partner will help drive those decisions.

What is a headless CMS?

Everyone has probably heard of content management systems like WordPress or Hubspot CMS but what about a headless CMS specifically?

This is an ever changing landscape and most providers either offer a limited version served through an API or some SDK to consume the CMS.

Headless CMS were built specifically for omnichannel delivery. What the hell does that mean? Well instead of building content specifically for a website or mobile app, you might generalize the content and serve it up to multiple places from the same data source. More on the benefits and potential pitfalls of this later.

What is headless commerce?

The commerce store is really no different than the CMS. Shopify and Maginto have offered all in one platforms for a long time that both manage products, handle fulfillment logic and give users a way to build those stores. Headless commerce is the idea of moving the logic and storage of those products to an api and allowing frontend specific frameworks to do what they do best. Shopify is a good example of a traditional ecommerce platform that has really dove head first into headless commerce. They went and acquired a frontend framework (Remix) and now offer a first class citizen version of shopify in a headless form called Hydrogen.

Layers of a Headless Architecture

There are 4 layers of a headless architecture: User Interface, Communication, Application and Administration.

UI

This is the presentation layer, which could be multiple channels like a website, a kiosk, a native application or a watch.

Communication

This is the orchestration layer that combines all of the application data into a consumable language that UI can display.

Application

This is the API layer that is responsible for delivering content, data and functionality through macroservices, microservices, events and webhooks. This is what allows businesses to select best in class services.

Administration

The administration layer is responsible for allowing users to manipulate data, edit settings and see reporting.

What are the Benefits of Headless?

Flexibility: You can redesign your website or use different front-end technologies without changing the back-end.
Multiple Front-ends: You can have different “heads” (like a website, a mobile app, a smartwatch app, etc.) all using the same back-end data and logic.
Performance: Since the front-end only asks the back-end for data when it needs it, websites and apps can be faster and more responsive.

For a more in-depth look at the benefits, checkout Top Benefits of Going Headless

So, a headless architecture is like having a LEGO toy where you can easily swap out the design on top without changing the platform underneath. It’s all about flexibility and separation!