Post
Ask Question

Voice of a Developer: JavaScript ECMAScript 6 - Part Eighteen

Introduction

 
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 was standardized in 2009 and it is implemented in all modern browsers. The 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 is not mentioned in the 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 the 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 translated 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 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 the 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 it in the 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
     
    emulation
     
    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
     
    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
     
    ScratchJS
     
    Open DevTools and “Scratch JS” is added into it.
     
    add
We have a transformer Babel selected where we can transform ES6 to ES5. Here is a sample ES6 code which you could paste in the left pane,
  1. class Point {  
  2.  constructor(x, y) {  
  3.   this.x = x;  
  4.   this.y = y;  
  5.  }  
  6.  print() {  
  7.   console.log('x: ' + this.x);  
  8.   console.log('y: ' + this.y);  
  9.  }  
  10. }  
  11. var p = new Point(1, 2);  
  12. p.print(); 
After you enter the above sample code in left-pane it’ll generate output in right-hand pane in parallel. It also provides IntelliSense when you’re writing your code. Refer images below:
 
code
 
code
 

Fiddle

 
The 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 it at the client or server-side like NodeJS?
  • Do you want to use in a mobile framework like Cordova?
I always believe for projects half a job is done if we use the right tools. So do requirement analysis and match the right tools and then use them 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.


Similar Articles