Progressive decoupling, a concept outlined last year in Dries Buytaert’s first post about decoupled Drupal, is a compelling approach to building Drupal's front end where content editors, site assemblers, and front-end developers maintain contiguous experiences.
This blog post features some compelling approaches which reflect a wide spectrum of possible ways to implement Drupal in a progressively decoupled fashion without abandoning the things that make Drupal great on the front end. These examples run the gamut between providing for site building even as front-end developers push forward (weather.com), enabling front-end flexibility by pairing Angular with Drupal (Warner Music Group), and using data made available on Drupal-rendered pages to power a single-page application (Acquia’s new Cloud UI).
Here is a graph that illustrates where on the progressive decoupling “spectrum” each approach falls:
Together, these approaches signal an exciting range of possibilities for Drupal that maintains its integrity while making rich user interactions and a more modern front-end developer experience possible.
- weather.com: Progressively decoupled panels
- Warner Music Group: Rich artist websites
- Acquia Cloud: An Angular app as a Drupal site
weather.com: Progressively decoupled panels
At weather.com, the requirement for a contiguous Drupal architecture that preserves full administrative control over page appearance is paramount. But weather.com also harbored a strong desire for highly interactive widgets, such as forecast previews, interspersed within the overall content experience. In short, site builders needed the ability to manage the page’s layout and structure without the aid of a developer, but front-end developers needed an intuitive framework to build interactive experiences into a Drupal-rendered page.
Warner Music Group: Rich artist websites
The primary benefit of this vision is client-side routing which enables an application shell-like experience. In short, the header and footer remain static and are rendered through Drupal. Within the content area, however, Angular is responsible for managing the client-side traversal across routes. The use of client-side routing means that the header and footer never disappear in favor of a full page refresh; only the relevant portions of the page are rerendered.
In Warner Music Group’s implementation of progressive decoupling, led by Arun Manoharan and Jeremy Kutner, Drupal routes comprise a superset of Angular routes, meaning that even if an Angular route is not provided, Drupal can take over as a default fallback. This means that Drupal and Angular exchange responsibility when it comes to routing, whereas all templating takes place within Angular.
Acquia Cloud: An Angular app as a Drupal page
Like Warner Music Group’s main content area, the only element present within the page body is the Angular application, which utilizes the state information available in Drupal.settings upon bootstrapping. In this example, Drupal 7 serves as an API proxy that accepts requests from the Angular application and forwards those requests to the Acquia Cloud API, which returns infrastructure information based on authenticated user profiles in Drupal.
The use of the Drupal.settings object as a means of providing initial application state is a graceful solution which abbreviates the time to first interaction with Angular, as the data does not need to be requested from the back end first. Not only does Drupal.settings contain all data required during the initial page load; it also contains translatable strings (normally accessible via Drupal.t) which are made available to Angular’s internationalization system (angular-translate).
All in all, these diverse approaches to progressively decoupled Drupal have one thing in common: their close attention to each use case’s specific requirements. weather.com acknowledged the challenge of balancing editorial needs with user experience needs, while the Acquia Cloud UI team understood that editorial considerations were nonessential to their progress. Warner Music Group’s approach, meanwhile, takes a middle-of-the-road route — ensuring their editors’ continued administrative control but freeing the front-end developer to work in an unbridled way.
While progressive decoupling is an eminently effective method of bringing the two closer together, I’m eager to continue exploring new implementations as we forge an exciting path forward for such distinct but codependent characters in the Drupal story.