In an ongoing web project with Weather Underground, the Mediacurrent development team is breaking new ground with decoupled Drupal and Angular 2. The endeavor has required refactoring the Presentation Framework originally built for Weather.com from dependent on Angular 1 to being javascript framework agnostic. This blog series explores how Mediacurrent, in collaboration with the Angular team at Google, has solved for several architectural challenges.
Welcome to the fourth installment in our series on the wunderground.com project. Click here to read parts one, two, and three.
As we’ve discussed in severalotherplaces, the Presentation Framework built for weather.com offers unique advantages as a decoupled Drupal solution. It allows javascript developers to contribute pieces of Angular functionality to the site without needing to learn any Drupal API’s. It allows editorial teams to place these angular components on the page themselves, and reuse them on new pages and layouts without needing to involve front end developers. And it allows all of this to happen without a Drupal developer needing to assist either team. This empowers individual teams to work independently, improving both content and feature velocity simultaneously.
For all its success, however, the original version of the Presentation Framework had one major drawback: it had been written in a way that tightly coupled it to the javascript framework originally chosen by The Weather Company (an IBM business) for use on the site, Angular 1. While Angular 1 has served the major needs of the project well, as anyone familiar with the javascript ecosystem will tell you, it is a rapidly evolving world. As new paradigms offering unique advantages and serving specific use cases appear seemingly daily, being tied to a particular framework can quickly make javascript developers feel held back from innovation.
As Weather Underground migrated onto The Weather Company’s Drupal platform, one of the first requests I received from the team was that we explore building the site on Angular 2 instead of Angular 1, since Angular 2 would likely be out by the time the project launched. After discussions and discovery work about the level of effort required to accommodate multiple frameworks, the hard work began to make this dream a reality. This was especially difficult because both sites coexist in the same codebase, so any change we made to the underlying platform had to be QA’d by both teams, and as we were refactoring the very foundation of that platform, we had to ensure nothing we changed would break weather.com!
After months of hard work, we are happy to report that our efforts have been successful, and now on a per-panel-variant basis an editor can select a presentation framework for use on the page (currently only Angular 1 or 2). Sub-modules define these individual javascript frameworks’ existence to the Presentation Framework as a whole, including the library of assets needed to bootstrap them, and hooks that allow them to change where their components are found, what is rendered by Drupal in the pane before client rendering occurs, and much more.
But this is just the beginning. By generalizing the Presentation Framework to work with two distinct javascript frameworks, we’ve opened the door to much more: a truly javascript framework agnostic system where, after writing a small submodule to define a new javascript framework’s existence to Drupal, front end developers can begin writing components immediately, independently of Drupal, and editorial teams can begin creating new pages using these frameworks.
Think of the possibilities. Is there a chance a particular page, originally written in Angular, would be more performant in React? Why not try both, A/B test them and see which wins out? Would you like to deliver a more lightweight experience to your mobile users? Combining device and bandwidth based selection rules with this system (using Akamai’s Edgescape service), we can provide users a more enriched or lightweight experience according to their current device capabilities.
As you can imagine, the javascript developers on the project are extremely excited at where things are heading, and we are excited to see the innovative user experiences that will be borne out of giving them the flexibility to push the platform further than ever.
Additional Resources
Building Wunderground.com with Drupal & Angular 2: How to Bootstrap | Blog Post
Building Wunderground.com with Drupal & Angular 2: Component Reuse on a Page | Blog Post
An Overview of Decoupled Drupal 8 | Video
