Voice of a Developer: JavaScript ECMAScript 6 - Part Eighteen

Sumit Jolly
May 13, 2016
41.9k
0
2
Article

JavaScript is a language of Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript.

Before moving further let us look at the previous articles of the series:

ECMAScript History

ECMAScript is the basis of JavaScript. ECMA International standardizes it. The other implementations for it is Jscript, ActionScript besides JavaScript. The original name was Mocha, later LiveScript and finally JavaScript. JavaScript was released in late 90s as part of Netscape Navigator. Brendan Eich at Netscape invented JavaScript.

Current Edition

The 5th edition of ECMAScript wasstandardized in 2009 and it is implemented in all modern browsers. ECMAScript 6th edition was standardized in 2015. This was partially implemented in most modern browsers.

ECMAScript 6 (ES6) compatibility

You can check features of ECMAScript 5/6/7 (ES.next or ES2016) compatibility tables with modern browsers.

URL: http://kangax.github.io/compat-table/es6/

table

If you observe, IE6 to IE9 are not mentioned in above matrix.

Q: Does it mean that we cannot use ES6 for old browsers?

Ans: Not really, there are definitely ways to tackle it.

Implement ES6 older browsers

In older implementation of browsers (ex- IE8, FireFox 3.5 and before), JavaScript was purely an interpreted language. This means it executes without compilation. In modern browsers, JavaScript could be interpreted or compiled using a JIT (just-in-time) compiler. This makes it faster and performance improvement. Having said that a new concept got introduced which is transpiler.

Transpiler

It takes source code written in one language and converts into another language that has a similar level of abstraction. These are transplied languages e.g., TypeScript, CoffeeScript, you could use to take advantage of features not provided out-of-box by JavaScript. As output, code is converted into JavaScript.

Similarly, we can convert ES5 to ES5 to support in old browsers. There are two popular transpilers are:

Traceur: It supports ES6 as well as ES.next features. For more information checkout.

Babel: It was known as 6to5 previously. Now it is renamed to Babel.

Q: What is the quickest way to test JavaScript?

Ans: Console in browser

Browser Console

In browser, it is embedded and works on the concept of REPL read–eval–print loop. REPL is an interactive language shell to test language quickly. Press F12 to invoke console interactive shell. Advantage is you do not have to open editor and type code. You can do in browser directly.

FYI: there are many REPL available for different languages, you can try online.

Explore ES6

As developers, we always want to get our hands dirty and try things. There are many options to explore/test ES6.

Developer tools in Browsers

Edge

It provides good support to ES6 script which you can validate at kangax. If you are using IE11 then ensure that you have Edge emulation selected in Developer tools F12

Currently Microsoft Edge browser scores around 80% on ES6 compatibility table. Edge is based on Chakra engine and suppors many features like classes etc. If you are interested in more details to understand roadmap of Microsoft, please visit.
Chrome

Many ES6 features are hidden behind a flag called "Experimental JavaScript features". In browser enter URL: chrome://flags/#enable-javascript-harmony, enable this flag, restart Chrome.

Chrome V8 release 4.9 JavaScript engine support 91% ES6
You can try Firefox, Safari, Opera etc. also
REPL

ScratchJS: Install chrome extensions where you could try different transpilers to test out the new ES6 features.

URL

Open DevTools and “Scratch JS” is added into it.

We have a transformer Babel selected where we can transform ES6 to ES5. Here is a sample ES6 code which you could paste in left pane,

class Point{
constructor(x,y){
this.x = x;
this.y =y;
}
print(){
console.log('x: '+ this.x);
console.log('y: '+ this.y);
}
}
var p = new Point(1,2);
p.print();

After you enter above sample code in left-pane it’ll generate output in right hand pane in parallel. Also provides intellisense when you’re writing your code. Refer images below:

code

Fiddle

Fiddle is an online solution where you can type your code and convert ES6 to ES5. I find it useful in restricted environments where you cannot add extensions or update browser

Try various fiddles online

Adoption

I think you feel as pumped up to use ES6 after reading this article as I feel while writing it!

Hold your breath for a sec and consider where you want to leverage ES6. There could be multiple use cases:

Do you want to use in existing or new (greenfield) project?
Do you want to use at client or server side like NodeJS?
Do you want to use in mobile framework like Cordova?

I always believe for projects half a job is done if we use right tools. So do requirement analysis and match right tools and then use in your project.

Summary

Please share your comments and stay tuned for upcoming articles in Voice of Developer series at our favorite website C# Corner.