If you are using Drupal in your projects, you should know how slowly the UI department of Drupal is evolving. Also, it is common to hear about “Headless Drupal” among the Drupal community.

So, what exactly is “Headless Drupal”? Should you care about it? We will answer these questions and also cover it in-depth. So, let’s get started.

What is headless Drupal and how it is different?

To learn about headless Drupal, we first need to see what the current Drupal experience offers. Drupal has always been a powerhouse when it comes to customization and control from a developer perspective. However, lately, it has fallen behind the in its UI department.

The user interface, however, has been overhauled by other technologies including the amazing JavaScript frameworks such as Angular.js, React.js, Ember and so on.

Headless Drupal is simple. It is a Drupal without the default UI component.

Drupal is decoupled from its front-end UI which gives rise to the headless Drupal. This means that you can use the Drupal without utilizing the front-end UI components that come with it. Instead, you can utilize the other frontend frameworks such as AngularJS, Ember or React to make it work with the backend portion of Drupal.

This is done by removing the front-UI with another frontend framework. To ensure that the setup works, Drupal will now start to send JSON format instead of HTML output.

With headless Drupal, you can take advantage of Drupal back-end and the amazing JavaScript frameworks out there.

The front-end JavaScript framework works thanks to how Drupal stores data in the backend. Instead of using the normal Drupal interface, the data is served in JSON which is then read by the front-end frameworks.

What does Headless Drupal aim to do?

So, you might be thinking do we really need Headless Drupal? Well, Drupal made things clear by releasing a manifesto here. We recommend giving it a read and understand the reason behind its creation.

In short, they wanted to give their users more flexibility while ensuring that they can benefit from what Drupal has to offer. Developers can utilize the backend for its content management system and customize the front-end the way they want. This flexibility gives rise to impressive workarounds and makes developers the true artist when working with Drupal. They also emphasized the fact that client-side frameworks are the future of web and evolving Drupal to use them is a one-step forward. Drupal with this approach will become service oriented and not only stuck with the HTML approach.

How Headless Drupal is used to create sites?

Drupal architecture works well with APIs. All the features can be accessed through API which in turn enables it to work with other frameworks or services.

Drupal also uses JSON which enables easy integration. Any program or framework can work around JSON data. However, there is a limitation when it comes to older Drupal version. Drupal 8 comes with REST API support, but not Drupal 7. So, if you are using Drupal 7 then you need to use RestWS and Services.

To get a better understanding, let’s look at the following image.

Drawbacks and conclusion

Headless Drupal might look impressive, but in reality, it can be limiting especially when you are using Drupal 7. Also, it can lead to a loss of options in the admin area and might require a lot of work by the front-end developer to utilize all its features.

There are plenty of Drupal sites that use Headless Drupal including Weather.com (Angular.js), Proofread Bot (WordPress) and others.

So, where does it leave us? Headless Drupal is an evolving feature, and it does provide enough positives to be used. However, the complexity of the project is impacted due to its usage.

About the Author

Ankit is Technical Architect with 10 years of experience in delivering high end applications in various open source technologies. He is an expert in PHP, Drupal, WordPress, MVC (Zend, Laravel), MySQL, Oracle, JavaScript, JQuery, CSS 3 & HTML 5, Twitter Bootstrap (Responsive Sites), Linux (Ubuntu, Centos), Server (Apache and Nginx), AWS, Performance Optimization (Memcache, APC, Reverse Proxy Cache), Nodejs, GIT, SVN.
Drupal Profile: https://www.drupal.org/u/ankit-kumar-mfp