DEV Community

Jake Lumetta
Jake Lumetta

Posted on

Headless CMS: Learn the What, Why, and How

What is a Headless CMS?

ButterCMS 1.png

headless CMS is a content repository system that allows control of website content, has no presentation layer and displays data on any device.

Let’s start at the beginning of the CMS’s history to discover why and when the term headless CMS was born. Later, we’ll explore why it’s a valuable alternative to the traditional CMS and why you should consider a headless approach when delivering personalized content to your user.

Learn CMS - The definition of CMS

CMS is short for Content Management System, a software application that allows websites to be managed easily by both technical and non-technical people. The main idea behind the CMS is separating the content layer from the presentation layer. The most popular solution of this type is Wordpress  (which can also be used as a decoupled CMS), which is mainly used for blogs as well as for online stores, informational websites, and more complex projects.

Why CMS was invented

As the internet and IT technology evolved, it became possible to create more advanced websites. Non technical people needed a content creation process that was easy, available and not reliant on technical skills. Content management systems (CMS) allows users to control the website’s content and appearance from a panel that is easily accessible to everyone.

The history of CMS—from CMS to headless

Why standard CMS needed an alternative

At some point, technology shifted away from the desktop as more and more people began consuming content via mobile devices. The traditional CMS started to suffer from technical debt. Providing an API as a quick fix for standard CMS also didn’t work well because it didn't convert the monolithic architecture into a solution that would satisfy both ways of using CMS: modern and old-school.

Why the headless CMS is considered a better approach for modern solutions

Content delivered from the headless CMS is pure, which means that it can be used to display data on any device since it doesn’t have a presentation layer. You can also manage all content for all platforms from one single place. The standard CMS is not able to provide such a flexible, universal format for distributed content and centralized management.

What Does “Headless” CMS Mean Anyway?

headlessCMS

Headless CMS explained

We already know the definition of a headless CMS, but what does “headless” really mean for technical and non-technical people? What is the main difference between systems with and without a “head”? Let’s take a look at the answers below.

What headless means for non-technical people

For website visitors, there is no perceived difference between a CMS-powered app built with a head versus one that is headless, except that they are more likely to view consistent content across multiple platforms. If you are currently using a standard CMS, you can transition to the headless version and your visitors won’t notice it. As for the content creators, such as marketers, copywriters, editors, etc., they will experience significant improvements in their work, which will be covered later on.

What headless means for technical people

For developers, product owners, consultants, and others with some technical knowledge about content systems, the term headless means that the application is built with an external API. The main difference between a standard external API provided by some service and the API coming from a headless CMS is the full control over the contents that are coming in. Besides this, there are no other differences. If you are a technical user with experience using any other API, you will be able to easily adapt a headless CMS for your needs.

The difference between head and headless

The main difference is the “head.” With the headless version, the “head” is usually under active maintenance and development, which means that bugs are quickly fixed and any requests are answered in a very short amount of time. In the case of the standard CMS, the development process is slower, especially when it comes to the open source. You have to wait for the new CMS release in order to use the system without experiencing bugs while it updates. On the other hand, new features and enhancements for the headless version are frequently published, and you can begin enjoying these improvements as soon as they are released without any effort on your part.

Why Use a Headless CMS?

The good technical leader is not the person who sticks to the technology he or she knows the most, but rather the person who chooses the technology that is the best option for the given situation, even if it requires learning new things. This is also the case with the CMS for your company or your clients. The way we consume content has changed over the years. We no longer visit websites only via desktop internet browsers—we do this everywhere: on a bus, in a restaurant, and on the couch in front of the TV. If you want to be present on multiple content channels and deliver the same high-quality content everywhere, the headless CMS is the best option for you.

Why the headless CMS was born

The Headless CMS was a result of more and more available content channels and it became harder to be present everywhere using the standard CMS. Content delivery on the web, mobile, or other channels with the same system required a lot of knowledge and money becoming challenging for companies to keep up.

With the headless CMS alternative, it became easy to stay ahead with the newest content presence opportunities. The head was the same for every channel, so the only thing you had to do was to take care of the presentation layer using any technology that was supported on the given channel.

Why headless is better than standard CMS

You can consider the headless CMS as classic outsourcing where you pass some duties to external companies so you no longer have to take care of certain tasks. Fewer tasks mean more time for other important tasks in which you are an expert.

Choosing the right technology and then implementing it can be a headache, especially when there are so many technologies out there. With the alternative solution of a headless CMS to the standard CMS, you can focus on the presentation, which is easier to implement even without hiring any developers.

Without the headless CMS, being present on the next channel is hard. You have to choose the right technology, hire good developers, design the system, and then wait for a long time before you are able to see the result.

With the new headless CMS approach, you are usually able to switch to the new channel using the same technology you are using for the other channels. We are living in a time of JavaScript, and nowadays, more and more JavaScript technologies are suitable to use everywhere, from mobile and web applications to TV and smartwatches. This API-based CMS can be dropped into any tech stack within minutes!

Advantages of a headless CMS

Advantages of Headless CMS.png

The headless CMS comes with many great features that make content modeling processes simpler, cheaper, and faster. Here are some of the most important:

  • Multiple channels - Content coming from the headless CMS is pure, which means that you can use it to build any kind of application or to show it on any kind of device.
  • Lower costs - In contrast to the monolith systems, building a system based on the headless CMS is cheaper because you don’t have to pay for the full setup like a large database, background job processing software, or a search engine.
  • Reduces time to market - You can release your website faster since developers and content creators can work at the same time without blocking each other’s work.
  • Compatibility - From a single place, you can control all the content that is displayed on all devices.
  • Easy redesign - Usually, when you want to redesign your website, you have to update the CMS structure. With the headless option, you don’t have to do this because you always have the same useful and flexible interface available to deal with your data on the back-end.
  • Easy deployment - To design a correct and fast deployment process, you have to hire DevOps experts, but by using a headless CMS, this process is reduced to the minimum since you usually have to deploy only a simple app.

These are the main advantages, but each person using it will find their own benefits strictly related to their given project or application.  In addition, Headless CMS active developments and new features are continuously being released adding to the list of benefits.

Processes that are simpler with a headless CMS

Using a headless version of CMS doesn’t just make things easier for developers, it simplifies the process. Let’s discuss.

Modeling and authoring content

No longer do you have to worry about the way the content should be created. Most of the headless CMS providers come with text editors that have many built-in features to make writing easier and faster.

Another thing that is very important is content authorization; not everyone should be able to create content. With roles and a permissions system, it’s easy to control this matter.

Looking for a powerful CMS that scales with you and makes your team happier? Learn more.

Benefits for everyone

Not only the product owner will get benefits from using a headless CMS, the change will be visible to everyone.

Benefits for marketers

Marketers can create content just once without worrying about different channels, administration issues, or technical aspects. Usually, with the headless CMS, a handy text editor is available out of the box that allows you to format the text properly and focus on the user experience.

Benefits for developers

No more back-end restrictions or obstacles caused by the lack of expertise in a given programming language. Developers can use the tools they love and focus on building beautiful interfaces without worrying about performance issues. Creating different content delivery channels has never been so easy.

Benefits for users

Users experience faster and more responsive applications. They don’t have to worry that they will miss some information when using different channels for the same application.

Headless Architecture: How a Headless CMS Works

The main difference between the monolith and headless version is the way that content is fetched to be presented on the frontend layer.

Technical details

The headless CMS is a kind of CMS, but it does not provide the presentation layer. Instead, the API is exposed, so customers can fetch the contents they previously created on a given platform. Content presented in API responses is not formatted specifically to the given device, so such data can be displayed on any device without any problems.

Common features

There are some common features that almost every headless CMS has, so it's easy to tell if the headless option is best for us. If so, then later we can focus on selecting a certain provider that offers more advanced features.

RESTful API

Your developers can easily access API via RESTful routes. Such architecture speeds up the development process and makes the software itself simpler. Each API endpoint usually has the same set of actions:

  • Get all records
  • Get only one record by the given ID
  • Update a given record
  • Delete a given record
  • Create a new record

Editor interface

Non-technical people can easily create rich content containing images or other non-text elements without the knowledge of HTML or other technologies.

Roles and permissions

You can define which person has access to the given section of your CMS.

Types of applications you can create with headless

There are several types of applications that you can create using a headless CMS. Here are the most common ones.

Standard websites

You can build a standard website using whatever technology you want, like the one you have the most experience with. There are no limits because you’re working with an API, so as long as the technology you choose can send HTTP requests and parse the responses, you can use it successfully.

Web apps

You can build a modern web app using any of the JavaScript frameworks available nowadays.

Websites created with the static site generators

With tools like Jekyll or Middleman, you can generate static websites that do not need access to the database. These can be easily hosted on any server almost without any costs. This kind of website is popular among developers, and the usage of the headless CMS API should be no problem at all in most of these cases.

Native mobile apps

Most native mobile apps connect with some back-end application, so there is no reason why you can’t use the headless CMS API instead of the back-end API you would need to create without using any CMS.

Architecture from different perspectives

One of the main differences between standard CMS and the headless version is the technical architecture.

User perspective

Visitors or users of your website should not experience any technical differences between two versions of the site. Your website will look the same, and the structure of site links will also be the same if you don’t decide to change it intentionally. A website built with the headless API will be faster because you don’t have to connect to the database.

Product owner perspective

Many technical decisions will be taken off the product owner's shoulders. As a product owner, you will feel comfortable because you will no longer be responsible for the back-end maintenance. Now someone else will deal with fixing the bugs, hiring proper developers, and improving performance.

Developer perspective

Most of the developer’s work will be done because they will no longer be responsible for the business logic of the app. With the headless CMS API, the main task is to design the presentation layer and display information for the end-user.

When to Use a Headless CMS

We already know a lot about the headless version of CMS, but there is more information that may convince you to use it with your business.

Multiple channels

As users, we spend less and less time sitting in front of the computer browsing websites via an internet browser. No longer are websites the only communication channel for brands. These days, more and more users are consuming content using various channels such as mobile phones, smartwatches, and TV.

Building a separate application for mobile phones, smartwatches, or other devices may be a very difficult thing, and not only because of costs. Choosing the right technology is a critical aspect of any company that is present on the internet. If you want to be present on multiple channels and always serve high-quality content and a pleasant experience for your visitors, a headless CMS is the right choice and lets you focus on the final outcome.

Lack of know-how

Building fast, well-working applications requires a lot of knowledge and experience, and this won’t change in the future. Whether you hire your own developers or outsource your work, people you are working with may not have the required know-how to build the back-end system that suits your needs. With the headless version of CMS, they don’t have to learn new technologies; instead, they use the tools they have loved and known for a long time.

Security

The data of your users is one of the most valuable assets in your company. You may have a beautiful application with many interesting features, but if the security is at a low level, it may be a disaster for both sides—your company and your users.

Nowadays, attacks that are performed on internet applications are becoming more and more dangerous. When a specialist finds a solution about how to prevent a certain attack, a new one is invented. That’s why it’s so important to always stay up to date with the latest information about good security practices in the software world. If you are using a headless CMS, you can sleep well because the security of your app is in good hands.

Outsourcing

Outsourcing is a part of many modern companies. In the past, it was normal to hire people whose skills were not needed all the time. Such an approach produces costs. If you outsource your work, you don’t have to worry about this. You pay for something only when you need it, and you don’t worry about many side aspects.

Headless means outsourcing the head. You no longer have to worry about database issues or the technology you should learn in order to be up-to-date with the latest changes in software development. You only focus on what’s important and things you have experience with.

Reducing costs

Hiring developers to build the back-end for your application is very expensive. The market still needs more experienced developers, so having a good HR team is necessary to catch the most valuable talents available. Once you have the right people, you have to choose the right technology, which is also a difficult decision to make. When using a headless CMS, the only decision that needs to be made is choosing the way you want to serve your content and the channels where you want to be present.

Headless CMS Examples: Actual Usage in the Wild

There are multiple ways you can use a headless CMS. Here are some real-world examples:

eola.jpg

Eola.co has been able to quickly launch beautiful, high-quality blog posts with great SEO that work well across multiple platforms.

keyme.png

Key.me uses ButterCMS to build a stellar back-end (thus eliminating tedious work inside their app) to define content regions and help scale their SEO landing pages.

happyfresh.png

HappyFresh.com’s implementation of ButterCMS powers their mobile app for ordering groceries, covering multiple countries and languages with ease.

The headless CMS is a great choice not only for blogs but also for e-commerce sites and SaaS platforms because it provides good performance, is a clear API, and is easy to use.

The Headless CMS is the Future of Content

These days we want to consume high-quality content—everywhere and as soon as possible. That’s why it’s important to provide the best tools for both content and software creators. In a modern world, every product owner has to be proactive and use every opportunity to serve content on a new device as soon as it is available for a larger audience.

For the first time, content quality is as important as its availability. It’s good to have experts who will take care of the business logic for your application, but it’s better to have them and pay less. Outsourcing is the key to outstanding performance and lower costs, and the headless CMS is the best solution for this. Having a well-maintained back-end for an application is not that expensive if you decide to use the headless CMS instead of doing everything on your own, and the peace of mind you’ll get from it will be priceless!

Oldest comments (0)