The Era of Transpilers

ECMAScript 2015 is just around the corner. Previously called "ECMAScript 6", it is a major release that will change the way we write JavaScript — in the browser, on the server, and on other devices.

The ECMAScript 2015 Standard #

The most notable feature is a sorely needed native module system that lets you structure code properly. There's also a wealth of useful language features like arrow functions, classes, and template strings. And there are many smaller additions like block-scoped variables and for-of loops that should've been part of JavaScript from the get-go.

All in all, ECMAScript 2015 makes for a vastly improved language, and we should start using it today.

The problem, of course, is browser adoption. While we control our server-side JavaScript versions, it can take a long time before a new language standard is widely supported by all major browsers. Even in 2015, we can't assume ECMAScript 5 everywhere — and that standard dates back to 2009.

Using a Transpiler #

ECMAScript 2015 has been in the works for several years and is a huge release — but it'll probably be the last one with such a big scope. Going forward, TC39 (the committee behind the standard) plans to release a new JavaScript version every year.

I'm convinced that we're going to see growing use of JavaScript transpilers as a result of these more frequent language updates. Instead of waiting for browser engines to catch up, we can use transpilers like TypeScript, Babel, or Traceur to write tomorrow's JavaScript today. Some of them have been around for quite some time and are successfully used in production.

Let's look at TypeScript, for example. In addition to optional static typing, it lets you specify a JavaScript language version as a transpilation target. When targeting ES3 or ES5, ECMAScript 2015 features are rewritten in a way that older JavaScript engines can understand.

Once ECMAScript 2015 — or whichever version your code is written in — is supported widely enough for your purposes, you can simply raise the transpilation target and have your code emitted unchanged. This way, you rely on native implementations rather than compiler-generated, lowered code.

Integration with Build Tools #

In modern front-end development, the JavaScript that browsers execute usually looks very different from the code we originally wrote. We bundle and minify our script files to reduce load times and page size, making them almost entirely unreadable. The same goes for stylesheets, which are transpiled from Sass (or Less, or Stylus) to plain CSS, auto-prefixed, bundled, and minified.

All of these transformations run through task runners like gulp or grunt. Since we already have a build system in place, there's no big overhead in adding a transpilation step. Five years ago, that was not the case.

If you haven't used a transpiler for your JavaScript yet, now's the time to pick one and give it a spin. Babel is a great choice if you just want to explore the new ECMAScript 2015 features; it's an active open-source project that works well with modern build processes. TypeScript, on the other hand, is great if you'd also like the benefits of a statically typed language. Either one works fine.

tl;dr: ECMAScript 2015 brings a lot of goodness. Start using it today.