1. PROGRESSIVELY DECOUPLED DRUPAL
UNDERSTANDING…
PROGRESSIVELY
DECOUPLED
DRUPAL

2. ABOUT US VISHAL CHANDNA JAIDEEP SINGH KANDARI JS Developer, QED42
Drupal Developer, QED42
@chandnavishal
@JayKandari

3. OVERVIEW Evolution of Websites Decoupling
Progressively Decoupled Drupal
JS Advantages and Usage
Demo - Pure Drupal vs Decoupled Drupal
Q&A

4. EVOLUTION OF WEBSITES Static Documents (HTML)
Styled Websites (CSS, JS)
Rich Dynamic Websites (CMS)
Single Page Apps (JS Frameworks)

5. DECOUPLING - WHAT & WHY? Separate Drupal Backend and Front-End.
SPA and Rich UX.
Multiple Applications from single BE.
Independent BE & FE development.
Eg: gaana.com, clasifika.com

6. FULLY DECOUPLED MIGHT NOT BE THE BEST SOLUTION :(
Drupal Layout management
Drupal Security
Drupal Caching
High development cost and hours

7. PROGRESSIVELY DECOUPLED DRUPAL

8. DECOUPLE COMPONENTS OF PAGE RATHER THAN THE WHOLE PAGE
Best of Drupal & JS
Component based approach
Drupal provides skeleton.
JS handles Individual components.
Control how much to Decouple.

9. PROGRESSIVELY DECOUPLED DRUPAL
Drupal Blocks
Decoupled Blocks
Drupal Layout

10. WHY PROGRESSIVELY DECOUPLE DRUPAL?
Advantage of Drupal’s Advanced Features:
Content Management & Workflow
Drupal Caching
Layout Management
Theme hook suggestions
SECURITY (XSS, CSRF)
Advantages of FE frameworks/libraries:
Data-Binding
API Request/Response
Rich UX
Separate FE Logic
Non-Blocking Front end

11. CHOOSING AND INTEGRATING A JS FRAMEWORK/LIBRARY
A lib/framework should offer a modular UI/Interface.
Choose a library instead of a framework to drop off extra luggage.
Integration with Flux and Redux architectures.
Integration with Drupal is pretty easy, use it as any other JS dependency

12. PURE DRUPAL VS
DECOUPLED DRUPAL
DEMO

13. Understanding Progressively Decoupled Drupal
Questions?