Decoupled Drupal with React

By Team Srijan Feb 23, 2016

Preston So hosted a session on 'Decoupled Drupal with React' on Day 2 of DrupalCon Asia 2016. He started off on a humourous note by asking in Hindi, "किस पर चर्चा करेंगे?"(What are we gonna talk about?); before getting down to business. 

Presenting on decoupling front-end   @prestonso   #DrupalCon   India

ReactJS is a trending technology in web development. React is a library, not an MVC framework; and is an intriguing candidate for use as a lightweight front-end paired with decoupled Drupal. He talked about the various ways in which decoupled Drupal can be put to use:

  • Decoupled Drupal: This implies that Drupal is being used as a back-end content repository with at least one non-Drupal front-end. When using this approach, Drupal exposes APIs that you can use in a mobile app, a single-page JavaScript-driven app, or any other front-end.

  • Fully decoupled Drupal: This means that Drupal only serves JSON payload to your application.

  • Progressive decoupled Drupal: This means that Drupal renders and serves pages before handing React control over CMS-rendered page components.

    Decouple Drupal with React

    Preston also touched upon the problems with decoupled Drupal:

    • Cross-orgin request, authentication, password: Decoupled drupal only serves JSON payload. So it might be hard to handle cross-origin request and authentication of user.

    • Form validation: Rendering of views is being handled by JS libraries like Angular, React etc. So server side form validation becomes a bit tricky.

    • Content workflow and management: Content heavy website require some form of content workflow and management. In such cases, handling complex workflow logic with these JS frameworks requires more effort.

    • Layout and display management: Fully decoupled Drupal does not serve any markup directly to client. Markup is handled by the frontend JS framework. So Layout and display capabilities of Drupal can not be utilized.

    • Multilingual and localization: Utilizing Drupal's multilingual and localization capabilities require integration with these JS frameworks.

    • Accessibility and user experience: Pages generated by Drupal handle accessibility issues and user experience very well. But with headless Drupal; JS framework should be able to handle all the accessibility issue of a page.


     Do not forget to check out our video on The Fundamentals of ReactJS.

Shared Success

Building a Drupal-based content collaboration tool
How We Helped a Leading Biopharma Company Streamline their Publishing Cycle with a Drupal CMS
How We Helped 8world Deliver New Digital Experiences Through A Hybrid CMS
How We Helped A Telecom Giant Shorten The Time-To-Market For APIs

Let’s start our conversation

  • Business Inquiry
  • Career
  • Others

Business Inquiry