What is a headless cms anyway?

The term ‘headless cms’ has been rising in popularity for a while now. But why the hype and what is it all about?

Plunge headfirst into the sea of ECMS’s

What is a headless CMS?

We’ll get to that. But first, it’s worth mentioning how traditional “monolithic” cms’s work. Wordpress or Drupal are usually included in this category. At monolithic cms’s, the modal layer is tightly coupled with the view, and the creators of the platform provide you with a templating engine with which you can implement your frontend. So in this model you’d have:

  • a Database at the “bottom”, where you store your content
  • an App, with a UI that lets you Create, Read, Update and Delete this content
  • and a View layer which displays the content (usually by using templates)

Older versions of sensenet ECM are also following this philosophy, although the platform is more geared towards enterprise features, such as content versioning and collaboration. Thus, the ‘E’ in ECM is for Enterprise.

This is why you could do something like this in sensenet 6.x, or using sn-webpages 7.x:

fig 1. ~ The template is tightly coupled with the data it needs to present.

In a headless CMS (or ECMS for that matter), though, the backend does not care about how the content is displayed. It just returns with the data needed for the frontend through a RESTful API.

fig 2. ~ Traditional (coupled or monolithic CMS) model vs. Headless CMS

So is sensenet ECM a headless or a coupled CMS?

As mentioned earlier, using sn-webpages, you can have a full-featured ECMS solution, complete with a built-in UI. We are also working on a new UI, using React and Aurelia while fully utilizing sensenet ECM’s OData layer, which provides a complete, flexible and extendable RESTful API.

In the meantime, you can either start writing your own library to latch on the OData endpoints of a sensenet ECM instance at hand, or you can try out our fabulous and open source sn-client-js, the javascript client library for sensenet.

In the end, what you get is something like this[1]:

After installing our library from npm, you can import it and connect to your sensenet ECM instance.

fig 3. ~ Configuring the repository object.

Once done, you can start working with content e.g. fetching them for using the results as a sn-client-js Collection

fig 4. ~ Configuring and creating a Collection object and fetching data with its read method.

The collection is ready, so you can start working with your favourite framework to render the article list.

fig 5. ~ Rendering article list with a Reactjs component.

As simple as that. We are at the beginning of our roadmap and we need your feedback in making a better ECMS development platform. So feel free to chime in either through e-mail, gitter or by sending a homing pigeon. We are eager to hear your voice.

[1]: You can achieve a similar experience using the .NET client for sensenet ECM.

Disclaimer: Since I am not a developer, my initial code examples were not as fabulous as they are now. Many thanks to @tusmester and @herflis for providing me with meaningful snippets.

This post was originally published on the official blog of Sense/Net Inc.

Like what you read? Give Zoltan Borsos a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.