Traditional, Headless or Decoupled: The New State of CMSs

Headless CMS is a term that has been on everybody’s lips recently, along with Content as a Service and Decoupled CMS. Actually, these three concepts are very closely related; you can’t talk about any of them without citing the others as well but, for a better insight on the topic, talking about the idea of Content as a Service is a good starting point.
Content as a Service (CaaS)
The first CMSs were born in the early 2000’s as authoring tools to create and manage websites: everybody surfed the web with a desktop computer or, to a lesser extent, with a laptop so the final output was the standard HTML page. As technology progressed and modern smartphones hit the market, some developers argued that the content had to be delivered to users in a mobile-friendly and optimized way. Taking a standard html page, with large images optimized for desktop view, and heavy-loading scripts and assets and therefore tweaking it for a good mobile view, is a waste of resources that are quite scarce on mobile phones (especially when the mobile hype started). But there are not just mobile phones out there; new devices enter the market even as we speak, like watches or smart-home devices and many more will add to that list in the very near future. This is what Content as a Service is about: have the content produced just once and then delivered to every device in the best individual format, namely breaking the strong dependency between the content creation and its output display.
Sever the head for more flexibility
If we apply the concept of Content as a Service to the logic of a CMS, we start figuring out what a headless CMS is about. In a standard CMS we have a content creation layer, a repository (a database) and a delivery layer. The latter has the purpose of turning the data from the repository into real HTML pages. In a Headless CMS we don’t have the delivery layer (the “head” of our CMS): the content is stored in and delivered from a repository as structured data (often JSON) using a RESTful API. One could wonder what happens to the data at this point, and that is the concept of a headless CMS: the data simply does not go anywhere, it’s fetched by the front-end client by means of the API provided, so that the output is optimized for every device instead of having a single output, tweaked and scaled in multiple versions.
Of course, building a custom front-end means more work but we make a huge leap in terms of flexibility, when we need the data to be displayed on different outputs (the terminals of an airport could use the same data on the website as well) or when a company has specific needs for the front-end and a traditional CMS’ approach would be too limiting. On the other hand, using a headless CMS does not fit every situation and can lead to a meaningless increase in costs and time: a company’s presentation website, even a complex and highly interactive one, can make a good use of the traditional CMS’ presentation layer with a good built-in responsive strategy.
Headless or decoupled?
So, we have now a separation between the content creation process and the delivery to one or several platforms by means of APIs: basically the headless CMS, once it has delivered the content that was queried, has completed its task. It's now up to the custom front-end to take care of what will be following. Sometimes it is better to extend this approach and take care of what’s happening after and, in this case, we are moving into the territory of decoupled CMSs
Why just one head?
Scrivito has a very nice and powerful content management interface (the delivery layer we were talking about before) and it spots a high degree of customization that perfectly fits in most of the cases when one could think about making a custom front-end (something that does not come lightly, from the costs point of view). But Scrivito supports multiple heads, therefore becoming the perfect solution for companies that want to build a dedicated front-end for a particular device (wearables, for example) without loosing all the advantages of a powerful and fully-customizable content management interface.

More great blog posts from Alessandro Loverde

A small investment early in the deployment phase can go a long way to creating a secure environment.
Fine tuning permissions
Every CMS allows administrators to set permissions for different users or groups and, for the sake of better security, one should check that editors can only do what they...

In the beginning, the World Wide Web was all about optimization. Standard speed was around 3 kb per second, and hosting space larger than 5 MB was expensive. Then broadband became available for everyone, and web designers grew less and less obsessed with image optimization. Nowadays, younger web...

In the previous part of this tutorial we explored components: the distinctive React feature. We did no magic because we wanted to focus on the basic structure of components, but now the time has come to explore the advantages of generating code employing external data.
Replacing hard-coded with...

There are many web apps around, some good, some bad, some are kind of life-changing while others lay almost forgotten, but making a SaaS app is something definitely bigger; a good programmer and a talented designer are not enough. The concept of Software as a Service looks far ahead and...

Having a website just in English may be okay for most businesses. In fact, even if you occasionally need to reach foreign visitors, you can expect that whoever is interested in your services has enough knowledge of English to clearly understand what you are offering. But if you sell something...

Back in 2014, Google started to consider making the use of a secure connection (HTTPS) a parameter in their search algorithm. It began with just a 1% weight over all the other factors, but they pushed it further and further; and now, in 2018, every professional website must be served through a...

WordPress is often a popular choice for a website builder and it is appreciated by many because it gives the users a lot of freedom regarding tools and plugins. Unfortunately, this approach is not good for your SEO because WordPress does not offer many SEO tools out of the box and, if you don't...

In the previous part of this tutorial we have converted an existing HTML page into a React app, but we have not seen much interactivity so far. In this new chapter we start exploring one of the most interesting React features, the components.
Let's build something dynamic
We are going to create...

CSS is our friend; the relationship between it and web designers has been a bit turbulent over time, but near the end of the first decade of the new millennium, it settled down with mutual love and respect (in the meantime Internet Explorer has met its fate but nobody mourns the loss, right?)....

We already talked about SASS and how it can revolutionize your approach to writing CSS. We talked about variables and indenting; powerful features but easy to handle nevertheless. We mentioned that SASS has more advanced functions, and in this article we are going to explore a handy one.
The SASS...

TROX understands the art of handling air like no other company. It’s a dynamic firm and, through research and development, TROX became a global leader of innovation in ventilation systems. A business can be efficiently run only with efficient tools and TROX has chosen Scrivito to manage over 70...

One central guideline for a designer is to have a clear understanding of the medium, the way users will interact with our design. It can be a television, a computer, a book, or any number of things: design is everywhere. A mobile phone is not just a small computer; it has its own unique features...

We have already given an introduction to the jQuery library, showing how useful it can be for web designers and developers: it simplifies the JavaScript syntax for lots of useful DOM-related tasks and it can dramatically speed up the routines to select DOM elements. Now it’s time to expand your...

The concept of mobile apps has greatly evolved: with the first apps, developers tried to replicate the same experience of a desktop but, given the limited resources, the results were pretty different and, in some cases, disappointing. A more modern approach is to create mobile apps that offer the...

In the first post of this video tutorial series, the basics of React.js were covered. Now it’s time to move a bit forward: we will install React.js and configure it. Eventually, the web page of the standard web application will show up in the browser.
The installation process
The very first step...

Stumbling into one of those popular, so called “cyber cafès” means that nowadays you will probably find tables occupied by hipster-like web designers, delighting themselves into glorifying the moment when they embraced SASS, React.js, jQuery, Node JS, Ember, Bootstrap, Angular and others. Well...

The web is changing at a truly fast pace! New technologies break into the market more rapidly than before. The period of caution and skepticism grows shorter, as the IT world has finally understood the impact of being stuck for too long on technologies which are reliable but outdated. The time to...

CSS is great and there would be no web without it: if you have been involved enough to remember the state of the web in the late nineties, you will immediately get the point (probably, along with a couple of shivers). Unfortunately, CSS has its limitations and they are not easy ones; that’s why...

The Document Object Model (DOM) is an object-oriented representation of a web page which can be modified with a scripting language, like JavaScript: we can think of the DOM as a representation of an HTML page in a way JavaScript can understand. JQuery is a very popular JavaScript library that...

Mobile websites are not just a trend; they meet the user’s demand for a better and more rational use of their time. If we are already out of the office and need to check if the product we want to buy is effectively in the store we are confidently heading to, it’s nice to be able to check this on...

When the iPhone came out it started the mobile web revolution: for the first time, we could browse web pages on a mobile phone in a decent and usable way. As soon as people had started to do that, the limits of the resizing technology used became evident, accompanied by a high demand for a...

JavaScript has been around quite a while now and we can almost consider it part of the ”old wide web”. But the JavaScript we use now has evolved immensely since its first days. We could better say that what really evolved were the projects that had JavaScript as their core and that made the web...

Anybody interested in Javascript development has likely stumbled on MVC frameworks, a term that is pretty much going strong recently and defines a library built according to the “model - view - controller” design pattern. React.js is a Javascript library that acts as the “view” part of an MVC...