technical and social progress toward ECMAScript 6 at facebook

Ben Newman (Facebook)
Fluent 2014

{ github,
  twitter,
  instagram,
  facebook
}.com/benjamn

We have the opportunity, as technologists, to make certain kinds of problems disappear forever.

“We should have been doing it this way all along!”

GitHub is strewn with better ways of doing things that never got properly evangelized.

There has to be a way forward.

Programming languages are notoriously difficult to “fix forward.”

Why isn't every Python project using Python 3 yet?

How can ECMAScript 6
avoid the Python 3 trap?

Crazy idea: ease into the new language by simulating its most useful features in the current version of JavaScript (ECMAScript 5).

Example: => function syntax

[3, 1, 10, 28].sort((a, b) => a - b)

[3, 1, 10, 28].sort(function(a, b) {
  return a - b;
}.bind(this))

First, import some utilities and parse the code:

var recast = require("recast");
var types = recast.types;
var traverse = types.traverse;
var n = types.namedTypes;
var b = types.builders;

var ast = recast.parse(
  "[3, 1, 10, 28].sort((a, b) => a - b)"
);

Finally, reprint the code:

console.log(recast.print(ast).code);

// Which prints:
[3, 1, 10, 28].sort(function(a, b) {
  return a - b;
}.bind(this))
          

If you already have a build step for static resources, you can be cooking with arrow functions in a matter of minutes!

recast, v.

1. to give (a metal object) a different form by melting it down and reshaping it.
2. to form, fashion, or arrange again.
3. to remodel or reconstruct (a literary work, document, sentence, etc.).
4. to supply (a theater or opera work) with a new cast.

Recast recap:

var recast = require("recast");
var ast = recast.parse(source);
transform(ast); // Anything goes.
console.log(recast.print(ast).code);
          

“Non-destructive partial source transformation”

– Ariya Hidayat

Example: ...rest parameters

function max(a, ...rest) {
  rest.forEach(x => { if (x > a) a = x; });
  return a;
}

function max(a) {
  var rest = Array.prototype.slice.call(arguments, 1);
  rest.forEach(function(x) { if (x > a) a = x; }.bind(this));
  return a;
}

Example: class syntax

class Derived extends Base {
  constructor(value) {
    super(value + 1);
  }

  getValue() {
    return super.getValue() - 1;
  }

  static getName() {
    return "Derived";
  }
}

function Derived(value) {
  Base.call(this, value + 1);
}

Derived.prototype = Object.create(Base.prototype);

Derived.prototype.constructor = Derived;

Derived.prototype.getValue = function() {
  return Base.prototype.getValue.call(this) - 1;
};

Derived.getName = function() {
  return "Derived";
};

Transform code much more involved than previous examples;
see es6-class-visitors.js for all the gory details.

What our classes used to look like:

var Class = require('Class');
var copyProperties = require('copyProperties');

function Derived(value) {
  this.parent(value + 1);
}

copyProperties(Derived.prototype, {
  getValue: function() {
    return this.parent.getValue() - 1;
  }
});

copyProperties(Derived, {
  getName: function() {
    return "Derived";
  }
});

Class.extend(Derived, Base);

Original plan:

1. Add a jslint warning that complains when you try to commit new code that assigns .prototype properties
2. Point to a wiki article in the warning message
3. Post about the new syntax in some internal Facebook groups
4. Wait for the diffs to roll in
5. Declare victory (just in time for ECMAScript 12)

Wishful thinking!

• jslint tells you that your code might be bad after you've written it
• Almost no one reads wiki articles unless hopelessly stuck
• I didn't want to make reeducating thousands of Facebook engineers my full-time job
• As long as the old style of defining classes dominated the codebase, that's the style engineers would (reasonably!) mimic

We've solved this problem before.

It's just a source tranformation! What's different?

1. ES5 to ES6 (the “wrong” direction)
2. Only needs to be performed once!
3. Needs to accommodate multiple existing idioms
4. Needs to generate pretty code, as if (re)written by hand
5. The diffs need to be human-reviewable

“Non-destructive partial source transformation”

All told:

Lessons

1. If you make the output human-readable enough, reviewers may not even realize it was machine-generated.

2. The transform script should be absolutely littered with fail-stop assertions.

3. Set yourself up to iterate rapidly, accommodating more and more exotic cases as you encounter them.

Meaning: you should be able to change your mind as often as you like, git reset --hard, and rerun the script.

4. Feel free to fix rare cases by hand, but stack them in separate commits.

5. Make the transform script idempotent. No excuses!

6. Use GNU parallel to run the transform script in many processes simultaneously.

find ~/www/html/js/lib | \
  grep "\.js$" | \
  time parallel ~/www/scripts/bin/classify --update

228.03s user 12.25s system 1229% cpu 19.548 total
          

7. Humans have right-of-way.

8. Identify stakeholders, and convert whole functional units of code at once.

9. Set intermediate milestones, and prioritize them aggressively.

Killing off Class.extend in favor of extends/super only really depended on the conversion of files using Class.extend.

10. New code mimics existing code, and the future is longer than the past.

External links:

github.com/{
  facebook/jstransform,
  benjamn/ast-types,
  benjamn/recast,
  facebook/regenerator
}

code.facebook.com/projects