The Drupal Headless Series

For some time now, there is a new hype in CMS land: it's called headless or decoupled. You’ve probably heard about it at events or read about it in marketing articles, but what is it exactly? And why is Drupal 8 going all-in on headless? In this Drupal headless series, we'll explain you what it is, why it can bring enormous benefits to you and your business and how Drupal is leading the market.

First up: the concept of Headless and why it's a little like your phone charger. You heard that right, your phone charger. 



In the old days (think Nokia 3310), every phone had their own charger. It consisted of a socket plug, a cable and a phone connector. If your battery was dying, you’d better find that exact charger or all hope was lost.


Fortunately, phones have evolved a lot since then. So, did chargers. They still consist of a socket plug, cable and connector (wireless charging aside), but their design is much more flexible.

Say, you’re at a friend’s and your phone is running out of battery. No worries: just use your friend’s charger, which has the exact same connector. Your friend has an iPhone and you have an Android? That’s okay, use your own cable and plug the USB end in his charger. Say you and your friend forgot your chargers and are on holiday in… New Zealand? Still no problem. Find any Kiwi charger and plug your cable in its USB end. Or even straight in the electricity socket that has a USB port these days. It’s really that easy.


In short: it doesn’t matter anymore which phone you use. You can charge it anyplace, anytime thanks to the flexible design of modern chargers.



Ok, back to websites. Most of them have a front end (the HTML, the CSS and the Javascript) and a back end (a Content Management System, such as Drupal). The back end manages the content, while the front end displays that same content to the visitor. In a visual attractive way. Until a few years ago, front end was dependent on the backend. The CMS provided the HTML code, which was then made visually attractive by the front end. 


Through the years, websites have evolved a lot. We now have a bunch of different front end technologies (Vue, Angular, React, …), all with their own benefits. Each of them also has specific accents and requirements. If you want to use them, your CMS needs to provide compatible HTML. Considering that front end technologies pop up like mushrooms, this can be a challenge. To say the least.

If we can find a way to send content from the CMS to the front end, without the front end being dependent on the CMS, specific HTML, we have the robustness of the CMS plus the freedom of using any front end technology. That is truly a huge benefit!


Introducing headless

Within this concept, content is exposed by the CMS through an API. Too technical for you? Let's try this again.

Think of the CMS as your phone charger and the API as the universal USB plug-in in your charger. Your front end technology is the cable and your phone is the final website. You provide your phone with electricity through a flexible designed charger. In the same way, you can feed content to your website(s) and by extend any digital channel you want, through a flexible headless CMS.


Side note: did you know for example that the real-time digital signage boards in the NYC subway are powered by Drupal?



The advantages?

- Content as a service concept
Think outside the page based mentality. Separate content management from content display. Front end is no longer dependent on your back end.

- Unleash your front end developers
They are free from CMS constraints which ensures their creative vision can be realized. 

- Change the look, change the experience
Redesign or re-skin an experience, without worrying about the content in the CMS. That makes it so much more efficient.  

- One CMS, multiple channels
Content can flow from the CMS to multiple channels such as websites, apps, digital signage, ....

- Future proof
Your backend is ready for when the next front end technology pops up (which is now… and now…. aaaaaand now).



The one thing you should remember when someone asks you about a headless Drupal CMS:

“It’s Drupal, exposing its content in a flexible way through an API”
(a little like phone chargers, remember)

Hooray, you've made it to the end of part 1! Now that you know the concept of headless, we'll elaborate on the different headless approaches within Drupal in our next post.

Next up in the Drupal headless series part 2: 
- Monolith, progressively decoupled and fully decoupled Drupal.
- Decide which approach fits you and your organization best

Can’t wait for the next post or want to know more about what Drupal can do?

Contact our experts now


Don't miss out

It's more than digital, it's your business
The Reference is nothing without its customers. Carglass is the car window repair and replacement specialist for whom we've built a fully responsive Sitecore website. Read more about this client.