Getting Started with ECMAScript 2015

February 24, 2016

So you've heard about ECMAScript 2015 and want to start using the new and shiny language features? Great! This post gives you some suggestions as to how to introduce ECMAScript 2015 in your projects.

#Use ECMAScript 2015 with Node.js

Are you running a current version of Node.js in one of your projects? In that case, you can dive into ECMAScript 2015 right away. Starting with v4.0.0, many of the new features are supported natively, no additional tooling required:

Native support for arrow functions and other ECMAScript 2015 features in Node.js

As of February 2016, the most recent version of Node.js supports the following ECMAScript 2015 features without experimental flags:

An up-to-date implementation status for Node.js can be found in the offical documentation. For an overview of the implementation status of all popular JavaScript engines, check out the ECMAScript 6 compatibility table.

#Write Separate Scripts in ECMAScript 2015

If you feel uncomfortable introducing ECMAScript 2015 in your production applications right away, consider starting at a smaller scale. The next time you find yourself writing a little internal Node.js script for your team, start using some of the new features that are already supported natively.

That way, you enjoy a low barrier to entry and at the same time take only a limited risk. It's not your production code you're updating, but merely a little helper script that can easily be replaced if need be.

#Write Tests in ECMAScript 2015

Another area that is well-suited for getting started with ECMAScript 2015 is your test suite. If your unit tests run in Node.js or a modern browser, they are executed in a known and controlled environment. There's no need for a transpiler to rewrite your test code for older JavaScript engines.

The idea is to write your new tests using ECMAScript 2015 features. Don't worry, there's no need to rewrite all your existing tests. An arguably reasonable strategy might be to update tests that you're modifying for whatever reason (e.g. because of changing requirements). That way, you're doing a creeping migration over time.

#Start with Easy-to-Transpile Features

To use ECMAScript 2015 in a web application on the client side in the browser, you'll need to set up a transpiler that translates your code to ECMAScript 5 so that older JavaScript engines can parse and execute it. Babel and TypeScript are popular choices that are here to stay: We live in the era of transpilers and will continue to do so for the foreseeable future.

If you're already using a build system such as Gulp, then integrating Babel doesn't take much effort. Babel is just another file transformation, similar to concatentation or minification steps. (You're bundling and minifying your JavaScript files, right?)

Some ECMAScript 2015 features are easier for a transpiler to rewrite than others. Arrow functions, for example, can be expressed by semantically equivalent function expressions with proper this-binding. Some other features that can be transpiled cleanly are:

All of the above features can be rewritten using only language contructs supported in ECMAScript 5. Also, no additional libraries or polyfills have to be included to make the generated code work at runtime.

#Turn It up to Eleven

Some ECMAScript 2015 features require additional work on your side to seamlessly integrate with the rest of your application. Native modules, for example, are a great way to structure your code. However, you'll need another tool like Browserify or Rollup to bundle those modules and resolve their dependencies. Higher effort, higher reward!

Finally, some features such as proxies cannot be transpiled efficiently at all. They heavily influence the runtime behavior and would be difficult to emulate. We'll have to wait for all popular browsers' JavaScript engines to implement proxies natively before we can use them.

#Conclusion

Getting started with ECMAScript 2015 can be as easy as using the features that Node.js already implements natively. Consider starting to use some of the new language features in your scripts or unit tests.

For client-side web development and the diverse browser landscape, add a transpiler such as Babel to your build steps. Finally, a module bundler enables you to use the new native modules to structure your code base.