Headless CMS for beginners

If you're into web development or doing business online, you may know about content management systems. Now, we want to speak about the cutting-edge solution related to this field — Headless CMS. To be more specific, we also reviewed Contentful, Storyblock, and Strapi, as the most popular portals UKAD works with.

Overview of web projects in the past and now

Before answering the question 'What is Headless CMS?' It should be said about the evolution of web projects and their modern structure.

How did you do web projects before?

Looking at the recent past, we can see a common approach for most web projects. A site or a web application was a large application that runs on a server. This application immediately covers all areas of responsibility, such as:

• Working with the Database: writing and reading information on the server side
• Validation and data processing: checking data, converting them from one type to another
• Rendering of the client side, mostly HTML.

Creating such a project usually requires lots of time, while the developers must have a broad expertise and high level to implement all the requirements.

In practice, this did not work very well. As a rule, in some situations, the product's quality goes down because the team doesn't always have sufficient competence in every single issue. In other cases, time-to-market grew disproportionately, as highly specialized specialists were involved, and the result of their work required a separate revision.

Other development issues include:

• The need for qualitative analysis and long-term planning
• The inertia of the project itself which becomes not flexible enough to change according to business requirements
• Large complicated systems are always difficult to maintain. This issue is partly solved by detailed documentation and standing by the developer for support, but it is always expensive for business
• Difficulties with introduction of the new functionality or updated project components.

Classic CMS

To simplify the development and deal with inconveniences, a content management system (CMS shortly) was invented. In fact, it became the engine for a web project. The CMS developers became responsible for the vital parts of the project, while on the customer side, it's required only to set up the engine and customize unified pieces of code.

Thus, the project requires a smaller development team for less time and efforts to be delivered. Also, most of the code is already systematized within the CMS, which greatly simplifies support, so the developer doesn't require in-depth knowledge of all the used technologies.

The CMS allows the creation of web projects quickly and with a relatively low budget. It greatly helps the business to start working on the Internet. I must also say that this does not solve all the problems. Even more, it creates new ones where the issues of customization and solving specific business problems become the most notable. They still demand specialists, and sometimes it's difficult to find a suitable solution.

Modern approaches in web projects

The leap in technology and the popularization of different platforms have led to the emergence of new approaches to web development. The main difference was the division of the web project into two parts: server (backend) and client (frontend). (We will not consider more complex structures like microservices in this article)

In real life, these are two independent applications that work together. The main advantage of this approach was the division of the responsibility where the backend developer works with the databases and the client part moves to the frontend. Validation and data processing became modular and shared between the developers of the project as needed.

At first glance, the structure became much more complex. But in practice, this proved to be much more effective. Firstly, this approach allowed experts of different profiles to work in parallel and with less dependence on each other. It's also possible to create a flexible development process where developers can adjust to the project at the development stage. Finally, the project code became modular, which means flexible and easy to maintain.

The next point is that a modern client application can work with several data sources and aggregate data directly on its side. At the same time, the server application can simultaneously work with different client applications. It is important when you have, for example, a website and a mobile application.

Switch to new

Very soon, the classic CMS became unable to meet the needs of today's business and provide a modern development approach.

First of all, there is a big problem with data. A classic CMS offers a specific pattern for data processing and thus severely limits users. As a rule, entities and their role are already defined in the system. Commonly, it's not enough for advanced tasks, and attempts to reconfigure it led to excessive efforts.

Another common problem related to the client part of the projects. In some projects, there is only part of the project requiring code work. There are several causes for this problem. First, every project wants to have a unique and memorable design. Secondly, in a classic CMS, data is directly related to the presentation, often at the kernel level. Thirdly, the capabilities of modern technologies on the client side have grown significantly.

You can add many other problems, such as: lack of opportunity to implement a modern approach to development, excessive complexity of the system, vulnerabilities and so on. But all this is largely due to outdated approaches and solutions. So, here we have a new kind of software product — Headless CMS.

What is Headless CMS?

First of all, it is also a software product designed to simplify and speed up the creation of web projects. But with a difference from a classic CMS.

A classic CMS took all the responsibility for the project and provided an administrator interface, which leds to numerous restrictions in working with it.

A headless CMS refused to take full responsibility for the project. Instead, the developers focused on solving the complex and, at the same time, the most structured part of the project — the server part of the project (backend). And to be specific, the data and the database.

By their nature, all headless CMSs are built for two main purposes:

• creating entities (models). Anything can be an entity: a page, a post, a product, a comment, a tag, a banner, a detail, a place, a category, or anything else with no restricts
• creating content based on an entity (model). This is already a specific instance of an entity: a specific page, a specific post, a specific product, etc.

The output of Headless CMS provides a programming interface for user data. It can be used within any other client or server application. With this interface, data operations are performed: read, create, edit, delete, list, sort, filter, and search.

Edge

In summary, Headless CMS is essentially a database add-on that allows the creation of entities of different types, and thus provides a convenient interface to work with them. It is a real revolution, as it once was with a classic CMS. Now, a business can easily and quickly create web projects based on its features and needs without driving itself into the so-called ready-made solutions.

Anatomy of Headless CMS

Today, there are many Headless CMS. They are different and have different features, but it is worth talking about the main parts of most of them to build a complete understanding.

Entities (Models)

An entity is a basic unit that any Headless CMS works with. An entity can be anything. And as a rule, even for an average project, this can be quite a large list of them. For example:

• pages
• contact persons
• news
• cases
• products
• categories
• reviews
• Contact Information
• orders
• users
• and much more for your project

Commonly, it's possible to create as many entities as you like, edit and delete them, that gives more flexibility to your project in the future.

Fields

It is a single entity property with several default automatically generated fields such as: id, creation date, update date, publication status. All other properties to be defined by developers. Usually Headless CMS has a huge list of field types: text field, numeric value, boolean value (flag), large text field, image or files, and many others.

While fields of the link type require more attention because they are designed to connect different entities between each other, for example, news and categories, or order and user. It is a powerful tool providing lots of possibilities, but it also requires a strong knowledge of chosen CMS.

Content area

Often, most of the interface is devoted to working with content. It is the most obvious and the simplest part of the CMS. Content is usually grouped by entity. It is easy to customize the sorting and filtering of lists and to edit any instance or create a new one.

API/GraphQL

Any Headless CMS provides a convenient software interface to work with other applications, commonly Rest API and GraphQL. Frequently, there are ready-made packages for a specific CMS, which make working with data even more difficult. Developers can familiarize themselves with these interfaces on the Headless CMS's official documentation page.

We also recommend carefully reading the API documentation before launching the project. It may greatly affect the development process.

Webhooks

Usually, a CMS has built-in tools for working with webhooks. Shortly, it is an ability to send a request to a specific address when some data in the system changes. Thus, a developer can sign another application to change data or launch additional services, for example, sending messages.

Role system

Often, a CMS provides some system of roles for working on a project. Each role has its own capabilities and limitations. If the project requires a lot of content managers, CMSs with a branched role structure suit better, while different platforms deal with it in a different ways.

File storage

Some field types allow adding multimedia and other types of files. It is a useful feature, but commonly files take up too much space. Therefore, CMSs can put strict restrictions on processing files. So, it's one more reason to read the documentation carefully.

Plugins

Extensions and plugins are common for many CMSs. They greatly expand the functionality, but at the moment, it is still a new field with many changes. Also, some systems allow users to develop their own plugins, which can be a good idea for a project. Anyway, this is a subject for another article to be written.

Edge

Each CMS has its own characteristics and additional features. Thus, it may be a good idea to pay more attention to the documents while starting a project.

How to work with Headless CMS?

Although Headless CMS is a good software product designed for fast and convenient work, it is quite a large and complex tool. Therefore, we have collected several recommendations on how to work with it.

Structure, structure again

Since the code is already written, you can work with everything from the other side. First of all, start with the structure of your project. Use a google sheet or electronic documents, spreadsheet, or mind map. Think over and display your entities and the relationships between them.

It may not work the first time — it is OK. You may need several iterations before creating a strong structure. It seems very simple and superfluous, but saves lots of time later. And it also helps keeping the little things in mind.

Learn different Headless CMS

It's good if you already have experience and clearly understand which Headless CMS is your choice. If not, it's time to choose.

At this step, the project structure helps you a lot. It makes it easier to pay attention to the requirements. Then, it's a good idea to study the topic even if it is not your first project. Now, there is always something new coming out.

Make some 'blanks'

Since it is very easy and fast to make several entities knowing their structure in any system, we recommend making several prototypes close to your data. It is especially relevant for data with complex relationships.

Create a test version. Try to create some complex entities with relationships, like in your structure. Create multiple test entities with data and play around with the requests, check server responses. In many cases, this discovery may lead to edition of the structure or changing the CMS.

Prepare the start of the project carefully

Pay close attention to the preparatory stage. These relatively simple steps can help you a lot, save many hours, and bypass some issues in future.

CMS don't like editing fields in entities (models)

It is worth noting that many CMSs enable editing the entity schema itself at any time, because it can be a painful procedure in the middle of a project leading to conflicts in the database. That's why you have to prepare well in advance, and in case you need to make a change to the entity, it is better to edit only new fields. We recommend always creating new fields in this situation, while the old ones are either hidden or used as spares.

Edge

Headless CMS is a powerful and fast tool for any business. It is so fast and easy to do anything with it, that the main scope of development may be lacking attention. As it can cause difficulties, better ask professionals.

Some examples of a Headless CMS

Contentful

One of the most popular and simple Headless CMS. It runs as a web service, so you have only to register an account to create a project. Contentful is very easy to use, stable and has a free version. In addition, there are lots of plugins and a package for working with this CMS.

But there are some shortcomings. First of all, it's a limitation of entities (models) and fields in the model. Also, like many Headless CMS services, the size of uploaded files is limited.

Despite the great popularity of Contentful, it could be a challenge to create even a small project due to limitations. Therefore, we recommend using it only for very simple projects.

Storyblok

Storyblok is also a web service, so you only need to register an account to create a project. It is more difficult to use than Contentful, but has more room for customization. In addition to the main entities, here it's possible to make auxiliary ones to use as components of the main entities. Storyblok allows grouping entities and content independently.

Also, this CMS has a unique feature. It can include your code on the frontend to see a preview of the content being created, which is important for content managers.

Of course, Storyblok has some flaws. It's not beginner-friendly, so a bit of learning is required to understand its interface. Then, it is only available in the paid version. Storyblok also has restrictions for entities, content, and files, but they are much wider than in Contentful.

Finally, Storyblok is a good CMS if you have fairly complex data structures in your project and want to fine-tune them.

Strapi

Strapi seems to be the CMS with the most potential in this review. Unlike previous ones, it requires hosting, so you need your own server to work with it. But in fact, it's not a big deal. Even the free version has practically no restrictions, so only hosting will take the main costs.

Strapi is a simple and at the same time functional CMS. It has an optimal balance between the simplicity of the interface and the flexibility in configurations of entities. It is possible to create components and signal-type entities, working with files is limited only by your hosting, and external storage for files can be installed.

This CMS works on the Node.js platform. It is open source and has good documentation. And most importantly, it is possible to add your own parts of the code, creating them to solve specific business problems. Other advantages include extensive API capabilities, as well as a built-in mechanism for working with users which makes this CMS a good back-end solution for more complex MVP projects.

The disadvantages include the requirement for basic knowledge of the operation of the Node.js server and the need for your own server. Also, CMS requires some competence from the user.

Strapi is perfect for both simple and complex projects. It has incredible flexibility and significantly fewer restrictions compared to other CMS. We can recommend it for a large number of projects, especially if you've already encountered restrictions in other Headless CMS.

Conclusion

Headless CMSs can be a good helper for everyone conducting business online. They can adapt to a large number of tasks, serve as a complete project, or as part of a larger and more complex project, and as an indispensable tool for MVP.

I hope we helped you deal with Headless CMS.

Author: Viacheslav Malykhin