Use ES6 for core JavaScript development

Problem/Motivation

Core JS can be improved; a lot of the JS ecosystem is moving to the new version of JS (Angular, React, etc.). There are many, many DX improvements. Our JS is not prepared to be unit-tested, and moving to ES6 and modules is a good occasion to refactor some code so that it is unit-testable. For informations about which browser support what see Kangax compatibility table, essentially everything we'll change except modules is supported on latest version of all browsers, except IE11.

Proposed resolution

In order to modernize our JavaScript we are considering using ES6 for core development. It would mean that writing a JavaScript patch for core would require the use of Node.js and Babel to transpile ES6 to ES5. All the configuration would be provided by core (we would only need npm install to get started). A nice side effect of using a preprocess/compile step is that it makes it easy to add polyfills for unsupported browsers (allowing projects to support older browsers than core does).

API changes

There is no change for end users and module developers. This will only impact core JS developers. Contrib will be able to use ES6 if they like but it won't be required.

We might be able to do this without an API change (depending on how 'API' is defined).

Core workflow changes

Using ES6 means that we require Node.js and Babel to be able to contribute to core JavaScript.

Talked with alexpott and for now we'll say a JavaScript patch should include the changes to the ES6 file as well as the changes to the ES5 generated file(s).

Plan

1. Add a minimal package.json file to drupal (it's a composer.json for js) #2809165: Add package.json to Drupal
2. Write scripts to rename all our *.js to files to *.es6.js and commands to compile those files to regular JS we will use. No libraries.yml change #2809477: Add ES6 to ES5 build process and #2818825: Rename all JS files to *.es6.js and compile them
3. Formally adopt ES6 Airbnb coding standards #2815077: Adopt airbnb javascript style guide v13 as baseline ES6 javascript coding standards for Drupal
4. Run codemods with jscodeshift on our *.es6.js files to actually make use of ES6 features: template litterals, const and let, etc. (it's a coder upgrade for js) #2809735: Use jscodeshift for ES3/5 to ES6 transform in CORE & Contributed modules
5. Choose unit test suite (Airbnb uses Mocha) and refactor one script (vertical tabs for exemple?) and write unit tests for it #2815199: Add tools and scripts for writing and running javascript unit tests
6. Separate all the 'library' code from behaviors code [#]
7. Refactor all the libraries so that they are unit-testable [#]

Things to do while we're at it to help keep things clean:

• #2484623: Move all JS in modules to a js/ folder

DX improvements

Event if we don't make use of module definitions, there are many things we can use to improve our JS, for example:

for (let element of document.querySelectorAll('div')) {
  // instead of $('div').each()
}

Object.assign({}, settings);
// instead of jQuery.extend({}, settings);

function destructuring({url, type, options}) {
  // instead of var url = param.url; var param.type; …
}

function defaultValues(context = document, trigger = 'unload') {
  // instead of context = context || document; trigger = trigger || 'unload';
}

var templateString = `<pre>${element.innerHTML}</pre>`;

Promise // <- all good

For more information:

• https://leanpub.com/understandinges6/read
• http://es6-features.org/

With all the talk about frameworks and getting people to contribute to core, using ES6 is a real opportunity to get more people. At least more than any framework. Again, this will impact people working on core patches only. A git checkout of Drupal will contain the ES5 version of the JavaScript to be run as-is, and Node.js wouldn't be required.