Using ECMAScript 6
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.
ECMAScript 6 (as it’s name says) is sixth edition of JavaScript, and is the upcoming version of the ECMAScript standard. Announced in the July 2008 and final draft being completed in March 2015, ECMAScript 6 will finally be released officially this year.
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.
Since ECMAScript 6 finally allows javascript developers to write modular code for browser based applications and use packages for 3rd party libraries that can mean a whole lot files are needed to be loaded each time you open your application. Luckily building your application for production is easy, as all there are plugins available for most build systems today (such as grunt, gulp, etc).
Check out http://babeljs.io/docs/using-babel/ where you will find all the information you need to build your application for production usage.
I belive that ECMAScript 6 will make a significant difference in the lives of JavaScript developers for years to come, so sooner you start adopting it that better. At Codeanywhere we are already using it for our upcoming releases and we are feeling very comfortable at doing so.