Using JavaScript ES6 in practice

We all know this language as JavaScript, but the official name is ECMAScript. The most recent official Ecma Standard is called ES5 (ECMAScript Language Specification Edition 5.1). It was published in June 2011 by TC39 (Ecma Technical Committee 39) – the committee evolving JavaScript. Focused development of the sixth edition started earlier in 2009, as the fifth edition was still being prepared for publication. It was initially named ES.next, but it’s widely known as ES6. This year new official name was announced ES2015 (The 2015 ECMAScript Language Specification). This is because TC39 plans to publish new version of JavaScript with small set of changes each year from now on. The final ES6 draft was published on April 14, 2015 and spec is frozen now. Formal publication is expected to be done in June 2015. Before that will happen it is already possible to get familiar with unofficial HTML version of the ES6 working draft. However I strongly recommend to check first very concise overview of ECMAScript 6 features. Another excellent resource to start with is ECMAScript 6 new features overview & comparison website that presents ES5 equivalent code next to ES6 code.

Transpilers and polyfills

ES6 features are continually appearing in the current engines. At the moment of this writing there is no single browser that would support more than 75% of features. The best score has new Microsoft’s browser Edge (72%) which can be used only with Windows 10 Technical Preview. What is even worse the most prominent representative of server-side node.js has only 23% coverage for ES6 goodies! Please check ECMAScript 6 compatibility table for a full picture. However there are two techniques that make new features work in all modern browsers:

• Transpiler – a type of compiler that takes the source code of a programming language as its input and outputs the source code into another programming language.
• Polyfill – downloadable code which provides facilities that are not built into a web browser. It implements technology that a developer expects the browser to provide natively, providing a more uniform API landscape.

I started my experiments with ES6 over one year ago in April 2014. Traceur from Google seemed to be the most mature transpiler at that time. I was able relatively quickly setup simple unit tests that proved that module and class features work properly. There were some issues, but I was able to resolve them myself. I did a couple of more tests with other new elements of the language and it was looking very promising. Anyway I decided that all the tools that drives this are not stable enough to build any production application.

Half year passed and I wanted to take deeper dive into next generation JavaScript features, but unfortunately my Traceur setup stopped working with the latest versions of dependencies. At the same time I could see growing number of articles about using ES6. Many of them were giving very positive feedback to the 6to5 transpiler. Soon after 6to5 was renamed to Babel I decided to give it a try. This time everything went very smoothly and I could start my first real project in ES6!

Conway’s Game of Life

When I started experiments with Babel I was also reading excellent book by Corey Haines – Understanding the Four Rules of Simple Design. In this writing author shares his ideas learned through a training workshop format called coderetreat. This book presents different ways Convey’s Game of Life can be implemented using object-oriented design. I must mention that Haines uses game’s domain only as a backdrop to discuss the thoughts and ideas behind the 4 rules of simple design. It brought me to the decision I will implement Game of Life in JavaScript using ES6. At the same time I wanted to check how rules presented in the book can help write better code. According to Kent Back those rules are:

1. Run all the tests
2. Contain no duplicate code
3. Express all the ideas the author wants to express
4. Minimize classes and methods

It turned out to be excellent exercise to use test first approach with several interesting design solutions presented in the book.

ES6 features

Even more interesting was possibility to code using ideas from next version of JavaScript. Here is the list of upcoming features I could take advantage of:

• arrow functions
• classes
• default parameter values
• let & const
• modules
• template strings

All of them work out of the box with Babel. I used Grunt task runner to automate Babel configuration. I wanted to provide code working with browser and Node.js at the same time. That’s way I decided to use Browserify (another popular option is webpack) together with babelify. Configuration is very straightforward. First in package.json development dependencies need to be specified:

{
  "devDependencies": {
    "babelify": "^6.0.2",
    "grunt-browserify": "^3.7.0"
  }
}

Next step is Browserify task configuration (how to break up your Gruntfile config by task):

module.exports = {
  js: {
    files: {
      'dist/bundle.js': ['lib/**/*.js']
    },
    options: {
      transform: [
        'babelify'
      ],
      browserifyOptions: {
        standalone: 'GameOfLife'
      }
    }
  }
};

By default distribution file generated with Browserify will work with Node.js:

var GameOfLife = require('game-of-life-es6'),
  world = new GameOfLife.World(1, 1);

and with browser using RequireJS, but it is also possible to expose it as global using standalone option. Then we can consume library in HTML this way:

<script src="dist/bundle.js"></script>
<script>
  var world = new GameOfLife.World(1, 1);
</script>

This allows to develop client side code using World class exposed in library.

There are also certain features that require polyfills. Fortunately it is possible to satisfy all Babel requirements by using the polyfill included in library. The following list should give overview of such features:

• async functions
• for of
• generators
• symbol

I definitely want to play with all of them in the nearest future. Please also check Babel caveats page to see full list of elements that require polyfills and hints how to avoid common pitfalls.

Wrapping up

ES6 will be the new JavaScript official standard really soon. I strongly recommend to start using it today. In my opinion with great tools like Babel and TypeScript new JavaScript features can be used widely even in production applications. Time spent on additional build step will definitely pay off in developers productivity. I strongly recommend checking out Conway’s Game of Life – ES6 JavaScript implementation to get some ideas how next version of JavaScript can be used today.

References

1. A JavaScript glossary: ECMAScript, TC39, etc.
2. ECMAScript Language Specification Edition 5.1
3. The 2015 ECMAScript Language Specification (final draft)
4. The unofficial HTML version of the ES6 working draft
5. Overview of ECMAScript 6 features
6. ECMAScript 6 new features overview & comparison
7. ECMAScript 6 compatibility table
8. Understanding the Four Rules of Simple Design – book by Corey Haines
9. Conway’s Game of Life – ES6 JavaScript implementation – my code