Headless CMS – Let’s understand in depth the concept, what problems it solves and how it compares to the traditional web CMS’s like WordPress, Joomla, Drupal and others.
TLDR:
As the name implies, it’s a backend only application (in most cases) that you host and setup. It comes with all the tradition cms content functionalities offering you the possibility to manage the content across multiple devices on the internet, deciding which device gets what content: apple watch apps, android watch apps, samsung watch apps, mobile applications, web applications, TV applications as far as IoT devices.
The definition of a CMS
The boring part: A CMS (content management system) is a web application software that allows users to create, manage, modify and style the content on their website using a friendly user interface without any specialized code/programming knowledge.
Introduction
If the first thing that comes into your mind when you hear CMS is wordpress you are not wrong. It’s one of the most popular website cms’ out there. With WordPress you can create static websites, blogs, ecommerce websites and many other web applications with no code knowledge (or minimal code knowledge), which makes it a very good and cost effective choice when developing certain websites.
It’s no surprise that it covers 43% of all websites, being suited for most of the website needs out there.
Although it is highly customisable and versatile, it is not perfect. If you want 100% customizable content without the limitations of a CMS, you can create your custom web applications using ReactJs, Angular, Vue, Svelt, NextJs or other javascript frameworks.
Hence, we’ll be using WordPress as the main comparison option to better understand what it is, the needs for a headless CMS and how it works.
The problem
As javascript world evolved enormously so did frameworks and libraries around it: from Typescript to fully fledged frameworks/libraries like Nestjs, Nextjs, Reactjs, Angular, Vue and others. Javascript is so widespread that it’s adopted in a crazy manner nowadays in every company, being the programming language used in almost all web applications one way or another. It is present in almost all websites on the internet.
This means that there is lots of demand for developers in these technologies, meaning increased costs of development (since demand is higher so is the offer).
When creating an application with one of the frameworks and libraries mentioned above, creating dynamic content that is editable from an administration panel is costly and it comes with a high maintenance price on the long term. It’s even worse if it’s not done in a professional and well planned process (this translates to lots of planning, architecture, structure, automated testing – translating to high development costs).
A solution to this problem would be to create a wordpress website and manage the content inside, opening it to your custom built applications using the RESTful API possibility. This means that you can create, edit and manage content while accessing the data in your react application using REST API.
Although you have to consider a lot of aspects such as: performance, optimisations, data security and others, it may be a viable solution.
Opening WordPress’s APIs means that your applications: mobile app, watch app, TV app and web app all can leverage the same content and consume it as they wish.
Now that we fixed our content management, we want to release content to different devices at different points in time. We may need to publish watch applications specially designed and formatted which differ from the mobile and web apps. We might also want a possibility to deploy posts on different devices at any point in time. This is where wordpress cannot help, everything gets so complicated that finding patches is not viable for big, complex products that have multiple devices applications.
So how do we solve this ?
The solution
Headless CMSs are, as the name implies, backend only applications that offer you the possibility to create and consume content as needed. There are some that come with a backend administration interface and others that come without.
What it offers is the REST/GraphQL API needed for creating and managing content, that’s it. You can extend and customise as you seem fit for any application.
The concept is to strip away the content and platform specific dependency and to focus only on content which can be anything you want. For example in the case of payloadcms you can create a Collection for any type of data. A Collection can be Users, Posts, Pages, Categories or any other data collection that you can dynamically manage. It is open source, comes with an administration panel and can be extended as per your will!
That’s the amazing thing about it, you are not dependent on any principle of displaying the data, there is no website, html, body or other concepts. You have universal concepts such as: ‘paragraph’, ‘table’, ‘section’ etc that can be translated and displayed as you like per each device independently.
Extra you can decide which content goes to what device and having the versatility to extend and manage the content as you want to, you have the option to create a smart CI/CD as well as having content deployable across each individual device independently!
Isn’t this the future ? argh sorry, the present ?
Traditional CMS is not made for this versatility of devices. When wordpress appeared there were mostly websites available and then appeared: mobile apps, smart tvs, IoT and watches. Managing the content across them in enterprise level is very hard.
Case Study: Headless CMS versus Traditional CMS (WordPress) case study
- Accessing the content from both mobile applications and websites
- WordPress: you can open the API so that you can query it from your mobile and web apps. The downside is that you have to translate the structure into the mobile rendering system. Which means that a <p></p> is not recognised in mobile applications because they are not using html.
- Headless CMS: you can query the data and since its generic structure focuses on universal availability, it focuses on content. It has attributes like: type: paragraph which can be then translated easily into the content view that is supported by any app.
- Having content only available to specific devices
- WordPress: you can come around this with different tricks. For example, you can assign a certain tag for each app (mobile, web, tv etc) and then in each individual app filtering the content that fits the device (inside the mobile app you filter the posts that have the tag ‘mobile’ or ‘all’). This is inefficient and costly from the response and rendering time point of view. It is slower and if you forget to set a tag, you are screwed.
- Headless CMS: here sky is the limit basically, you can manage it as you want to. You can have the content independent on the platform and have a deployable system which maps the post to the desired device applications, making it instantly available.
Final Thoughts
There is so much potential in headless cms, we should definitely start using and experiment with. In my opinion is the future of web development or at least it’s going to play an important role in it.
Don’t forget, content is everything nowadays.
If you have any other questions let me know and we’ll learn about them together. If you feel that the content is incomplete or if you liked it, let us know! We’re looking forward for your feedback.
