Since the article Start writing ECMAScript 6 ready code with Codeanywhere on our blog gained significant interest we decided to write more on writing ECMAScript 6 ready code.
This time we will discuss some topics that is confusing to most newcomers, such as current state of ECMAScript 6 in modern browsers, what transpilers should they use and how to debug the code.
Luckily the major browsers are well on their way to implement full ECMAScript 6 specification. According to some articles I’ve read lately, Microsoft’s new browser Project Spartan is leading the way in implementing new specification and obviously other major browser such as Chrome, Firefox and Opera will follow.
So is this the right time to write ECMAScript 6 syntax for production applications? I can say that it is, and for quite a while. There are already great transpilers that let you run your ECMAScript 6 ready code on current browser. We have discussed that in the article mentioned above.
It is important though to know what features are implemented to date. The most comprehensive comparison I’ve found out is https://kangax.github.io/compat-table/es6/.
Tracure and Babel (both transpilers) have most features implemented, and with our experience on using both of them, I would prefer Babel. Not only for the number of supported features, but for better debugger support.
When it comes to debugging, you don’t need to change your habits. Both transpilers use source maps so you don’t have to debug transpiled code. You will note that now you have two same files in debugger’s files list, but one with “!eval” suffix. That one is transpiled so you don’t want to open them unless you really want to.
One thing you need to have in mind is that your browser reads those transpiled files and sometimes if you are debugging your function and you set a breakpoint to evaluate some variable or object you can get confused if for example “this” operator show different object than you are expecting. You can quickly search on the net for these kind of problems, and you can use objects such as $__0 that acts as “this” keyword you need to inspect.
These are no common situations but can happen so it’s good to remember this.
Check out http://babeljs.io/docs/using-babel/ where you will find all the information you need to build your application for production usage.