Across the spectrum different approaches to progressively decoupled drupal (acquia webinar) (1)

©2016 Acquia Inc. — Confidential and Proprietary

Across the SpectrumDifferent Approaches to Progressively Decoupled Drupal

Preston SoDevelopment Manager, Acquia LabsOctober 20, 2016

©2016 Acquia Inc.

Welcome!

Preston So (@prestonso) is Development Manager of Acquia Labs. He has been a web developer and designer since 2001, a creative professional since 2004, and a Drupal developer since 2007. Previously, he led the Entertainment Weekly development team at Time Inc., co-founded the Southern Colorado Drupal User Group (est. 2008), and operated an award-winning web and print design studio. Most recently, Preston delivered keynotes at DrupalCamp Connecticut 2016 and, in Portuguese, at DrupalCamp Campinas 2016 in Brazil.

– drupal.org/u/prestonso– [email protected]

©2016 Acquia Inc.

What we’ll cover

– The JavaScript renaissance– Why progressively decouple Drupal?– The spectrum of progressive decoupling– Decoupled Blocks and weather.com– Progressive decoupling on rich artist websites– Progressive decoupling in Acquia products– The future of progressively decoupled Drupal

©2016 Acquia Inc.

The JavaScript renaissance

Static pages

Subscribe to our newsletter You have been successfully subscribed!

E-mail address

Submit

full-page refresh

Drupal

Drupal front endPHP

Data

Templates

HTML

Drupal

Drupal front end

Data

Templates

HTML

Dynamic pages with Ajax

Subscribe to our newsletter

E-mail address

Submit

Drupal

Drupal front endPHP

Data

Templates

HTML


Success!

E-mail address

Submit


E-mail address

Submit

AJAX request

AJAX response

Dynamic pages with client-side rendering

Subscribe

E-mail

Submit

HTTP request

HTTP response

Lorem ipsum dolor sit amet, consectetuer adipiscing.


Success! Here are others that might interest you:


Drupal

Decoupled front end

REST API

©2016 Acquia Inc.

Rewards of fully decoupled Drupal

– Separation of concerns (structure vs. presentation)– Content syndication (write once, publish everywhere)– Differentiated development velocities between front and

back end (independent front-end redesigns)– Rich application ecosystem (auxiliary applications such

as SPAs, native mobile, and IoT)

©2016 Acquia Inc.

Risks of fully decoupled Drupal

– Additional point of failure (REST API, other hosting)– No cross-site scripting protection or input sanitization– No in-place, in-context editing or administration– No layout and display management– No previewable content workflow– No modules affecting the front end– No system notifications (errors, messages)– No BigPipe progressive loading or cache tags– No accessible markup or user experience benefits

©2016 Acquia Inc.

When should you decouple Drupal?

– A site powering one or more other sites– A site powering one or more other applications– A site powering multiple sites or applications

– Standalone applications– Standalone sites

©2016 Acquia Inc.

For standalone sites and apps …

– You don’t need the overhead of a decoupled architecture to power a standalone site or application.

– Doing so can lead to workarounds that duplicate, interrupt, or otherwise obfuscate the integrity of end-to-end Drupal.

– There is a better solution: progressive decoupling.

©2016 Acquia Inc.

Why progressively decouple Drupal?

Fully decoupled Drupal

Subscribe

E-mail

Submit

HTTP request

HTTP response





Drupal

JavaScript framework

REST API

Fully decoupled Drupal

Subscribe

E-mail

Submit

HTTP request

HTTP response





Drupal

JavaScript framework

REST API

Progressively decoupled Drupal

Subscribe

E-mail

Submit

HTTP request

HTTP response





Drupal

REST API

Drupal front end

JS framework

©2016 Acquia Inc.

Risks of fully decoupled Drupal

– Additional point of failure (REST API, other hosting)– No cross-site scripting protection or input sanitization– No in-place, in-context editing or administration– No layout and display management– No previewable content workflow– No modules affecting the front end– No system notifications (errors, messages)– No BigPipe progressive loading or cache tags– No accessible markup or user experience benefits

©2016 Acquia Inc.

Rewards of progressively decoupled Drupal

– No additional point of failure (REST API, other hosting)– Cross-site scripting protection and input sanitization– In-place, in-context editing and administration– Layout and display management– Previewable content workflow– Modules affecting the front end– System notifications (errors, messages)– BigPipe progressive loading and cache tags– Accessible markup and user experience benefits

©2016 Acquia Inc.

The spectrum of progressive decoupling





Extent of page controlled by JavaScriptLess More

Drupal- (PHP-) controlled JavaScript-controlled

weather.comInteractivity scoped to blocks; Drupal controls layout

Rich artist sitesMain content handed over to JS; Drupal provides static routes and initial output

Acquia Cloud UIEntire page body handed over to JS; Drupal provides initial state on page load






Header

Footer


Page body


Block

Block

Block

Main content

©2016 Acquia Inc.

Decoupled Blocks and weather.com

©2016 Acquia Inc.

weather.com

– At weather.com, the requirement for a contiguous Drupal architecture that preserves full administrative control over page appearance is paramount.

– But weather.com felt limited in terms of building interactive widgets like forecast previews interspersed within the overall content experience.

©2016 Acquia Inc.

weather.com personas

– Site builders needed to manage the page layout and structure without the aid of a developer.

– Front-end developers needed an intuitive framework to build interactive experiences into a Drupal-rendered page.

©2016 Acquia Inc.

Presentation Framework

– Presentation Framework is a Drupal 7 module which integrates Panels panes seamlessly with Angular 1 application components so they can be manipulated by site builders.

– But Presentation Framework is tightly coupled to Angular 1 and is not generalized for all frameworks.

– https://events.drupal.org/losangeles2015/sessions/weathercom-novel-presentation-framework

©2016 Acquia Inc.

Decoupled Blocks

– Decoupled Blocks is a Drupal 8 module which uses the new block-based version of Panels in Drupal 8.

– It’s a framework-agnostic module which allows JavaScript components to render their components into blocks.

– Acquia and Mediacurrent recently sponsored a collaborative sprint with the Lightning team.

– https://drupal.org/project/pdb

©2016 Acquia Inc.

Decoupled Blocks

– Decoupled Blocks forges an equilibrium between the site builders manipulating layouts and front-end developers manipulating page behavior.

©2016 Acquia Inc.

Progressive decoupling on rich artist websites

©2016 Acquia Inc.

Rich artist websites

– A large music company’s approach hands over control of the main page content (between header and footer) to a JavaScript framework.

– This approach focuses less on the need to control layout and more on the need to provide application-like interactivity.

©2016 Acquia Inc.

Benefits

– Client-side routing enables an application shell-like experience. The header and footer are static, but Angular manages client-side traversal across routes.

– No full-page refreshes occur because the client-side routing allows the header and footer to remain persistent; only relevant portions of the page rerender.

©2016 Acquia Inc.

Benefits

– Drupal routes are a superset of Angular routes such that even if an Angular route is not provided, Drupal can take over as a default fallback. Drupal and Angular exchange routing responsibility.

– Unbridled front-end development is possible because this approach frees JavaScript developers to build remarkably interactive pages while leaving intact core Drupal elements as a foundation.

©2016 Acquia Inc.

Progressive decoupling in Acquia products

©2016 Acquia Inc.

Acquia Cloud

– Acquia Cloud is a fully managed LAMP stack that is optimized for Drupal sites and provides developer tools for managing, monitoring, and deploying websites.

– The new Acquia Cloud user interface is a progressively decoupled Angular application on the front end.

Acquia Cloud UI team→ N2

• Irek MirgaleevBoston

• Dmitrii VarvasheniaBelarus

• Stas MihnovichBelarus

→ QA

• Nick DelRossiBoston

→ N3 API

• Owen LoyPortland

• Kris OlafsonPEI

• Mark TrappPortland

• Vlad PavlovicWindsor

→ N3 UI

• Michael Pezzi Toronto

• Chris Carignan Kitchener

→ UX / Elemental CSS

• Al SteffenBoston

• Erik BaldwinPortland

©2016 Acquia Inc.

Drupal usage

– User authentication– Initial page load– JavaScript libraries– Drupal.settings– CSS-only Drupal theme– Translations– API proxy

Acquia Cloud UI architecture

Angular front end (rendered into Drupal)

Drupal(API proxy)

Acquia Cloud API(hosting infrastructure)

Page load

API requests

API requests

©2016 Acquia Inc.

Drupal.settings

– Contains all data necessary on initial page load– Contains all translatable strings normally accessible via

Drupal.t() but made available to Angular’s translate directive/service.

©2016 Acquia Inc.

Acquia Lift

– Progressively decoupled Ember application– Interacts with the DOM on a static Drupal (or other) page

©2016 Acquia Inc.

The future of progressively decoupled Drupal













Header

Footer


Page body


Block

Block

Block

Main content

©2016 Acquia Inc.

Concerns

– Development practices differ wildly between Drupal and JavaScript frameworks, which presume that front-end developers wield full control over layout and structure.

– The current lack of harmony between Drupal’s own systems and APIs and those found JavaScript frameworks compounds the gap between the two.

©2016 Acquia Inc.

Areas of concern

– Templating– Rendering– Routing

©2016 Acquia Inc.

Food for thought

– Is progressively decoupled Drupal a means to an end?– What about server-side JavaScript rendering?– Does progressive decoupling achieve the right

equilibrium between editorial concerns and an optimal front-end developer experience?

– Why (or why not) is full decoupling a better solution in certain use cases?

– What about Drupal-aware full decoupling?

©2016 Acquia Inc.

Special thanks

– Jeremy Kutner– Arun Manoharan– Matt Davis– Mike Pezzi– Chris Carignan

©2016 Acquia Inc.

Thank you!

Preston So (@prestonso)drupal.org/u/[email protected]

Learn more about Acquia Labs:acquia.com/resources/acquia-labs

Technology

Across the spectrum different approaches to progressively decoupled drupal (acquia webinar) (1)