Progressive Decoupling 1: Modern Javascript

In this series we’ll take a closer look at progressive decoupling in Drupal 8. We’ll go through the project setup, check the tools and libraries and discuss potential applications. Let’s start with the definition.

Progressive decoupling

Decoupled Drupal is a thing for quite a while now. There seem to be two ways of doing it. We either let the Javascript take control and use Drupal only as a data store (fully decoupled) or let Drupal do the heavy lifting and use the front end frameworks to render discrete parts of the site (progressive decoupling). The first option seems to be much more popular now, even despite the fact that it’s expensive and forces us to re-implement a lot of things that Drupal does well. Why is that?

I think there are two main reasons. Firstly, and this is a huge pain point, there is no out-of-the-box way to use modern Javascript in Drupal contrib and custom code. Whoever wrote a line of ES6 never wants to go back to the stone-age JS that is understood by IE. Luckily, this is something we can fix and, in this and the next posts, we’ll see how to do that.

Another question, which arises quickly after solving the problem above, is how to import packages from npm. JavaScript projects usually have a package.json file containing all the dependencies and importing them in the code is as easy as calling the require function. We don’t have such a central place to declare JS dependencies in Drupal projects. In the later posts, we’ll see how this can be worked around right now and, hopefully, try to define the shape of the ideal solution for the future. But now let’s get back to the language.

Modern JavaScript

Regardless of which front-end framework we choose, we’re going to need the ability to write our code in modern JavaScript. It’s been a while since ES6 (or ES2015) was released. There was ES7 (2016) and ES8 (2017), each adding new features. These new functions decrease the WTF/h rate when developing and, arguably, can even make the language likeable, which was rather unimaginable a decade ago. Let’s go through some of the most interesting ones.

Deconstructing assignment

Reduces the redundancy when getting values from arrays and objects.

Property shorthand

Reduces redundancy when composing objects out of variables.

Spread syntax

Makes it possible to compose objects out of other objects.

Arrow functions

Make function definitions more compact.

It’s especially useful for higher order functions. A click handler, for instance, can be created like this.

Default parameter values

Classes

Object Oriented Programming is much more intuitive now.

Example from http://es6-features.org

Template literals

These friendly creatures make it possible to insert variables into strings.

We’ve defined what we mean by decoupling Drupal and have shown some of the cool new features available in EcmaScript 6 and above (for a comprehensive comparison see http://es6-features.org/). All these functions have something in common, namely none of them are supported by our beloved IE. In the next post we’ll see how to overcome that and use modern JavaScript in our modules and themes.