ECMAScript 6 Resources For The Curious JavaScripter
May 30, 2012
I’ve recently spent a lot of time looking at EcmaScript 6 and thought it would be useful to put together a short page of resources to help anyone else interested in exploring the next version of JavaScript further.
What ES6 features do browsers support right now?
Juriy Zaytsev’s ES6 compatibility table is a useful start for establishing what ECMAScript 6 features your browser does and doesn’t support: http://kangax.github.com/es5-compat-table/es6/.
His tests currently only test for feature existence however, but hopefully these will be expanded to be more thorough in the future.
Note if using the above: for Chrome, turn on the ‘Enable Experimental JavaScript’ option via chrome://flags to get an accurate reflection of what is currently supported for the above tests.
Canary may have of course more features supported than stable, but as always, Peter Beverloo’s weekly Chromium and WebKit updates should provide some insight into what is landing on our end.
The state of Mozilla’s ES.next support can also be found on this MDN page. More info on the Mozilla ES6 plans for support are also available.
How can we polyfill ES6 features to work with today’s browsers?
A number of developers, including Paul Miller, Andrea Giammarchi, James Burke and myself have been spending time trying to polyfill specific ES6 features to work in ES5/ES3-compatible environments.
Polyfilling not only allows us to try future features today, but also offers us an opportunity to become familiar with ES6 syntax ahead of time.
Note that:
- As the syntax for many features is still in flux, the specifications (and thus, implementations) are subject to change.
- Realistically a transpiler will provide us with the most sensible path for converting ES6 to something current browsers can understand. Polished transpilers are still a while away from getting there, so the polyfills are fine to use (for learning) in the mean time.
I think this falls in line with the views of other JavaScripters in the community such as Alex Sexton:
As soon as the (ES6) syntax settles back down I think we could all consider setting up preprocessors to allow for the syntax in the browser. So if you were able to run a preprocessor, then I think you should use the ES Harmony Module syntax. I think it should then compile to AMD, obviously, but you shouldn’t ever have to worry about it.
The polyfills for ES6 features that are currently available can be found below:
Maps, Sets, Math, WeakMap and more:
- Paul Miller's ES6 Shims (Maps, Sets, Math, Arrays)
- Map, WeakMap, and Set fast/simple shims for Harmony collections
- Quasi-shim for ES6 Unicode point escape sequences
Modules & Module Loaders:
- Shepherd: Harmony compliant module loader and module makers
- Require HM: RequireJS/AMD-compatible ES6 Module Interpreter (my patched version with working examples of what's supported from the Harmony modules page)
- Another ES6 Module Loader
Note: Here is what ES6 features can and can’t be easily shimmed: https://gist.github.com/1665192. Of course, one should be careful when using any of the above in production as the quality and performance of language polyfills can vary greatly.
What ES6 Transpilers exist at the moment?
- Google Traceur (active)
- Google Caja (active)
- ES Transpiler (dev appears to have stopped)
- There is also related work that has been done for Esprima
What are the best talks for learning about ES6 features?
TC39'ers Dave Herman and Brendan Eich have both given very insightful talks about the future of JavaScript before. Whilst there may be some very minor syntax differences between the latest draft specs and their talks, the videos below are still very much recommended viewing.
Videos:
I’m lazy. What’s new in ES6? I just want a one pager
I personally recommend actually reading the latest ES6 draft (in the next question) for a more complete look at what to expect, however, for those of us with less time this one pager from Thaddee Tyl may be useful:
http://espadrine.github.com/New-In-A-Spec/es6/
Where can the latest ES6 specifications be found?
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
Where can I contribute to discussions about the future of JS?
Last week, I met Dave Herman (TC39, Mozilla) in Norway and we had a discussion which included a mention of JSFixed.
Whilst some in the community might question the potential effectiveness of the JSFixed project, I was intrigued to hear that many TC39'ers actually read up on it regularly and use it as a means to gauge what the community really wants from the next version of JavaScript.
If you feel a little uncomfortable contributing directly to the es-discuss mailing list, JSFixed is a sane, community driven gateway to getting your opinion through the people making decisions about what goes in and I encourage you to check it out.
Get Involved:
- JSFixed
- or for the brave: es-discuss