Angular 2 and Drupal communities collaborating on Weather Channel projects

Submitted by dryer on Thu, 05/26/2016 - 17:23
Drupal and Angular 2

At the Angularconf 2016 Matt Davis from Mediacurrent discussed the collaboration between the Angular 2 and Drupal communities. Currently Drupal is missing a comprehensive front end framework and is looking at coupling together with Angular to provide a more contemporary administration editing interface.

In his address to the Angular 2 crowd Matt represents the Drupal community and discusses interesting details that are going in behind the scenes in the Angular 2 and Drupal works. In fact Matt has just last week had a meeting with the leader of Drupal, Dries Buytaert to discuss about the further deepening the collaboration between the two Open Source projects.

Building more bridges with the Angular world, both technical and personal is one of the goals that Matt has. He has previous experience in both Drupal and Angular 1 from a project case of renewing the Weather Channel's flagship website on Drupal. During this project they've created a framework that allows front end developers to create components for Drupal without any knowledge of the underlying platform.

The custom approach worked fine for the main site, but with the latest project - Wunderground - they started to look at Angular 2 very early on. With web components and the modern architecture they did find a lot of promise in the combination of Drupal 8 and Angular 2, but they had their share of challenges too.

Challenges with Drupal and Angular 2 on Weather Channel have been surfacing since the team worked on Wunderground prototyping from January 2016. Here are some of the things they have noted so far:

  • The standard Angular bootstrap does not work for them since a Drupal site is a combination of server generated HTML and dynamic front end components. The solution for them was something called Long form bootstrap that allowed them to load and boostrap components as they needed them
  • Many components have multiple instances on a website and they needed to select which one of them they actually want to initialize - by default Angular starts with the first element it finds. Working together with the Angular 2 team they solved the problem by being able to bootstrap components with custom selector.
  • Performance is still an issue when using Angular 2 together with a complex backend generation tool like Drupal and BigPipe, but the teams are looking into together into areas such as: SystemJS/JSPM, Template Compilers, Angular Universal, Web Workers and Service Workers.

With this level of collaboration and goodwill between the two projects, it looks more and more likely that Angular 2 will be the basis for a modern Drupal Admin Shell similar to the one used by WordPress and Calypso.

Similar to the relationship between Drupal and Symfony, learning Angular 2 seems like a safe for Drupal developers. And vice versa as Twig is getting support for Angular Universal rendering.