Although ES7 is in draft status as of the time of writing this blog post, browsers are yet to implement all features of ES6. What is taking so long is the fact that the specification introduces a large amount of features and new syntax to the language. And backwards compatibility needs to be maintained as well. Plus the ability to run everywhere and the dynamic nature of the language make implementing es6 a challenging task.
The key features introduced in Ecmascript 6 are:
- Block bindings (introducing let and const keywords)
- Rest and Default parameters
- Built in Objects (Sets and Maps)
- Asynchronous Programming (Promises)
- Template Strings
In this post, I will not get into the details about all these features. I would address the other common question:
Should I start using es6 now or wait?
There is no simple yes/no answer to this question. The answer depends on various questions such as the scale of the project you wish to use it in, the features of es6 you intend to use, the browsers you want to support and a few other similar questions. The good news, however, is that the tooling exists for you to take advantage of es6 in production right now. Internet Explorer, as always, is yet to catch up, but as the edge website states, they are working on it. For a real time comparison of which browsers have implemented what feature, you can refer to the es6 compatibility table om github which gives an excellent overview of all the features supported by all browsers. For people planning to use ES6 in production, there are 2 options:
The process of transforming and compiling is known as transpiling. This is different than compiling since the output is source code which is then executed. Transpiling es6 to es5 makes your es6 code run on existing browsers by converting it to es5 code. By adding this extra step in your build process (using an automation tool such as gulp or grunt), you can integrate a transpiler in your development workflow. And since es5 runs on all existing browsers, you get your code base running on all existing platforms. The 2 most common transpilers are:
- Babel: This is an open source transpiler which outputs the cleanest es5 code in my opinion.
- Traceur: Another open source transpiler, maintained by Google, that maps ES6 to ES5.
You can also use languages such as Typescript to transpile your code, but most prefer not to. Since it involves an additional step of learning a new language.
Polyfilling aka Shimming
There is a fantastic github repo maintained by Addy Osmani on all the polyfills and transpiling options available for es6. It is a great resource and one that I recommend you to check out.
Apart from the options mentioned above, if you are just looking for an option to try es6 in your browser, to play with it, there are sites and browser extensions which help you do so. You can either use plunkr and select the traceur package from the options, or use Babel REPL or the scratch js extension for chrome.