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:

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:

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.

Comments

nod_ created an issue. See original summary.

Wim Leers’s picture

Issue summary: View changes
Issue tags: +JavaScript
droplet’s picture

I thought to introduce NODEJS development env in CSS (#2658650: Use SCSS in Core Development) first, it's more straightforward. Now we do it in JS! well-done GUYS!! I'll follow your footprint!

mpdonadio’s picture

Does part of the plan need to include picking a ES6 polyfill library (eg, https://github.com/paulmillr/es6-shim/) or would this be part of the tooling choice?

prestonso’s picture

Title: Use ES6 for core javascript developement » Use ES6 for core JavaScript development
Issue summary: View changes

A few fixes to IS and title.

nod_’s picture

Issue summary: View changes
droplet’s picture

nod_’s picture

Issue summary: View changes
nod_’s picture

Issue summary: View changes
Related issues: +#2809477: Add ES6 to ES5 build process

Updated the plan to reflect what's going on

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
  3. Formally adopt ES6 Airbnb coding standards (I think we are already compatible) [#]
  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 [#]
  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:

nod_’s picture

Need several +1 in the coding standard queue about adopting airbnb style #2815077: Adopt airbnb javascript style guide v13 as baseline ES6 javascript coding standards for Drupal.

nod_’s picture

Issue summary: View changes
nod_’s picture

nod_’s picture

Issue summary: View changes
nod_’s picture

Issue summary: View changes

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

finne’s picture

Adopt airbnb JS code style is now RTBC... Let's try and move forward. Would be so nice to have in core. In the (near) future: IE 11 will be the only browser supported by Drupal 8.4 (see Drop IE9 and IE10 support from Drupal 8.4.x) that needs ES5. All others can do native ES6 without transpiling.
(I am a recently converted ES6 enthusiast: https://www.dx-experts.nl/its-time-es6 )