it’s a great time to start dabbling in ECMAScript 6, but use a transpiler like Babel-core to compile your code to ECMAScript 5. The browsers are catching up and within a couple of years, you won’t need this step.
Why do I care?
ECMAScript 6 is around the corner, but it’s pretty much backwards compatible. There is a great browser support page here that looks at the language feature by feature. Some things you will want to take advantage of straight away, and some probably won’t interest you. Let’s take a look at some of the features of ECMAScript 6, with appropriate links to real-world definitions (rather than the specification, which is worth a read if you can’t sleep).
These are ones I will actually use, rather than all the little ones.
- Default Function Parameters
- Better iterators and for…of loops
- Block-scoped variables
- Arrow functions
- Typed arrays
- Promise built-in
- Modules built-in
I’ll be doing a whole article on Modules since it explicitly affects how you write code. All this is good, but that’s a lot of red on the compatibility chart. There are two questions you need to ask:
- When are major browsers going to support ECMAScript 6?
- What do I do in the interim?
The interim is a long long time – we’ve only just got rid of Internet Explorer 6 finally. So there is a valid point here. If it’s going to take forever for major browsers to work with ECMAScript 6 because of upgrade cycles, why should I even bother?
To answer question 1, let’s take a look at the major browsers:
- Mozilla Firefox: Firefox is already implementing much of the ECMAScript 6 standard. It should be complete within a couple of releases. Since releases of Firefox are close together, this means that it’s likely that Firefox will have close to 100% coverage by the time the draft becomes a standard.
- Microsoft Internet Explorer: The Technical Preview for the browser that will be released with windows 10 is shaping up to cover practically the entirety of ECMAScript 6. IE 10 and IE 11 are currently distributed though, and they do not provide coverage. Microsoft has also publically stated that they won’t be upgrading those browsers to be ECMAScript 6 compatible.
The Kangax site shows a support matrix for pretty much all the major browsers.
Transpiling: The Next Frontier
So, you like the features of ECMAScript 6, but no-one supports them. The next best option, and likely the best options for a few years, is to use a transpiler. A transpiler in this context is something that takes ECMAScript 6 in and outputs ECMAScript 5. Just like any other compiled language, you don’t want to be looking at the output. Ideally, the transpiler you choose should have three features:
- Support for the ES6 features you want to use
- Source maps
- Integration with your task runner
A sourcemap is generally yourfile.js.map – it’s a mapping from the original source code to the transpiled source code. When you are debugging, you don’t want to have to think about where the error occurred in the original source code – you just want the debugger to tell you. Sourcemaps do that for you.
You can check out the Kangax web site for supported features – it looks for the transpilers as well.
There are two transpilers worth your effort – Traceur and Babel-Core. Both of them are pretty good and the compatibility is improving all the time now that the ES6 specification is locked down. Pretty much anything you want to do (except for maybe modules) is either implemented in the browsers or implemented in one of the transpilers.
Someone is going to tell me off because I missed out Typescript. TypeScript is a language by Microsoft and fully supported within Visual Studio. You can also compile it using grunt or gulp. Angular just announced they are writing their v2.0 application code in Typescript, and it has a bunch of ES6 features – actually most of them. Plus it’s got the backing of Microsoft. I’d use it as a transpiler and certainly they’ve made it easy. But be aware of the features in Typescript that aren’t ES6, like interfaces. Those are not transportable, so you need to be aware when you use them.
Do you like working in the future or the past? The past is ECMAScript 5, but it will be here for a long time. ECMAScript 6 is the future, easy to pick up once you have a working knowledge of ECMAScript 5, and easily implementable.