By: Akshita
February 27 2018

Everything Is Better With Some JS on The Head: Progressively Decoupled Drupal

Web development has sure seen a sea of trends in past 2 decades. Starting from static websites to monolithic dynamic websites to the decoupled frameworks, now. Decoupled CMS is perhaps the one that has the ability to make a significant impact in the way web development practices are followed.

And lately, there has been a lot of commotion around "Headless” or “Decoupled” Drupal in the community, adding to it is the latest article by Dries.

Decoding The Decoupled Drupal

Decoupling a website implies that the front end is completely separated from the backend. The front end which is accountable for the presentation and display is detached from the backend which stores and assesses the information.

This way, we remove the (so-called) head of the Drupal and de-couple it with a different front-end framework.

Adding a new dimension to the story is ‘Progressive Decoupling’. In this case, even though you detach the front end from the backend, you can still leverage the backend’s abilities while concurrently also using a JavaScript framework in the front end to deliver quality user experience.

You don’t completely remove the “head” but add new dimensions in the form of partial decoupling through small components -- or block-like structures -- which are developed with advanced front-end frameworks such as React or Angular. This enables better control on the front-end as well as quality and presentation.

Progressively Decoupled Drupal - Is it good enough?

important points of decoupled Drupal

Progressive decoupling enables the developer to use any technology for the front-end with Drupal. This procedure uses Drupal as Content-As-A-Service. Unlike other CMS, Drupal as a content-service lets different content coexist as reusable chunks. As a result, content becomes future-proof.

Progressive decoupling means different things to its different stakeholders. For front-end developers, it means assigning a particular portion of the page to JavaScript framework, while letting others work smoothly without any blocker.

On the other hand for content editors, it allows a contextualized interface with an integrated workflow.

The workflow is clearly defined and divided while giving greater flexibility without crossing over into others territory. To change a certain component or block of the website which hampers the performance, you can opt for Progressively Decoupled Drupal.

It likewise strengthens an already robust system supporting the core with GraphQL, JSON, and REST API in addition to SDKs like JavaScript and Swift. Integration becomes a part of the core process of decoupling, as content authoring and publishing is inherently involved with the remote delivery system.

All in all, these diverse approaches to progressively decoupled Drupal have one thing in common: their close attention to each use case’ specific requirements.

How Effective Is Progressively Decoupled Drupal For My Website?

Even though Drupal can easily fit your expectation criteria, there is always a scope for improvement. As progressive decoupled CMS architecture is rising in popularity, you would also want to know what qualities it provides against a traditional decoupled Drupal.

In simple words, with progressive decoupling, you get the best of both the worlds.

Pros of Drupal


Pros of decoupled Drupal as the frameworks

Here are the benefits of progressive decoupled Drupal:

  • It is easy to scale high traffic websites, and easier to handle the multi-site arrangement. 
  • Scale only the components that you need. This lowers the cost and complexity involved.
  • As two different frameworks are involved, code complexity is reduced by a margin within each of the two components of authoring and delivery. Every segment can be as simplified or complicated according to the requirement without impacting the other.
  • Security is a cross-cutting concern, with de-coupling you also get a boost in your security. 
  • Content migration and sharing require less time, as the architecture of different frameworks is much more naturally supported with the core CMS.
  • It is easier to develop and deploy rich features.
  • Integrating with DevOps is so much easier. Integrating development tools and source code repository is easier when authoring and delivery systems are separated.
  • In the end, it also helps you support your SEO and boost your ROI.

Should I opt for Progressive or Traditional Decoupling?

When concerned with such a choice it is important to know your needs before aiming for the solution. Going back to Dries’ article, here is a diagram which can help identify your needs before opting for any sort of decoupling.

Diagram to assist in understanding Decoupled Drupal; Diagram by Dries
So what do you intend to build?

If you aim to build a simple website, decoupling will largely not be a right choice, except for when your editor’ needs override a developer’s.

If you aim to build a website involving complex features while offering multiple experiences (including web, native mobile, IoT, etc.), perhaps you can utilize Drupal as an API to provide content to other web services as a content repository with no public facing component.

Taking examples of, let us discuss the scope of progressive decoupling.

Drupal blocks have been replaced with “React Snippets” to perform most of the operations. Here, the ‘search’ functionality is part of a decoupled CMS. Built on Drupal, the search is passed to Drupal view which displays the result.

This approach works fine for a small database, but in case of a large database, it tends to go slow as it takes up a lot of RAM on the server.

User’s information is preferred to improve search speed and search experience. Fetching of results and displaying them can be done using front-end technologies in the browser itself. It decreases the server’ response time to get results faster.

It also allows for more interactivity by immediately responding to users' actions.

  1. Users can quickly filter out results on the basis of venue, date, meeting duration and strength.
  2. Resources shown from external libraries are also fetched directly from their API server instead of getting them from Drupal.  

In this case, the block has been replaced with React code which accepts the user’s inputs and renders the result retrieved from the server in the user’s browser. home page page; temperature and information for New Delhi and nearby areas completely relies on location for showing the homepage content. Using the geolocation API via client side scripts, it fetches the important as well as related information of the user from code repository without refreshing the page. In this way the viewer is served with most relatable content in lesser time.

Decoupled CMS is the great paradigm shift changing the way websites are seen and built.

While the concept of progressive decoupling offers the best of both worlds, we should be equally cautious when approaching such projects keeping in mind the complexity involved.

Planning to make a shift? Talk to Drupal 8 experts to solve any query, drop a mail at [email protected] and learn how decoupled Drupal can help you improve your bottom line.