Blogs | Srijan

Decoupled Drupal with React

Written by Team Srijan | Feb 23, 2016 8:00:00 AM

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   https://t.co/zWWdXP88kn pic.twitter.com/tmKGJn44vh

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.

    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.
View full post