Future of JavaScript – ECMAScript 6 (ES2015) – Going Back in Time & Back to the Future

  • Article

This tutorial series will take a look at the future of JavaScript. It will take an in-depth look at ECMAScript 6 (ECMAScript 2015), the latest version of the standard for JavaScript. Throughout the series, you will learn about new language features and what you can build with them. You are expected to have an understanding of JavaScript. This is the series finale.

Level: Intermediate to Advanced.

Part 6 – Going Back In Time

ECMAScript 2015 introduced a ton of new language features that will require changes to JavaScript engines in all browsers. Browser manufacturers are quickly catching up, and the majority have substantial support for ES2015 features. If you want to see current browser support, Kangax hosts a feature-compatibility matrix. Supporting older browsers is a necessity, but we still want to use future features. How do we go back in time?

Babel is a JavaScript transpiler that will translate ES6 code to more widely supported ES5 code. Babel has a configurable pipeline that allows plugins to specify the language features supported. Most of the plugins transform ES2015 and ES2016 code to ES5 code, but there are plugins to compile React’s JSX. It is the most popular transpiler and lets you take your code back in time while still maintaining code readability.

To get started with a command line interface, install babel-cli using npm.

 $ npm install -g babel-cli babel-preset-es2015

To transpile, run babel and specify the source folder and destination folder.

 $ babel src -d dest

An alternative to Babel is Google Traceur,

Back to the Future

If you have full control of your environment or browser and you want to migrate existing code to the next generation of JavaScript, there are two methods to go back to the future.

The first method is to use a JavaScript transpiler in the inverse sense to translate ES5 to ES6 code. Lebab (previously known as xto6) is a transpiler that accomplishes the opposite transpilation. Further, it allows you to specify what features of ES6 you would like to use.

To get started with the command line interface, install lebab using npm.

 $ npm install -g lebab

To transpile, run lebab and specify the file and the output file.

 $ lebab es5.js –o es6.js

The second method is to use a compatibility shim so that older JavaScript engines will behave as closely as possible to ES6. ES6 Shim is a shim that allows you to use ES6 features in your ES5 code, although there are a few limitations to what the library can safely shim. If you are stuck in an older version of Node (<4.0), you can also use this shim to add missing features in Node.js as well. All you have to do is include the shim in your HTML file before your scripts or require it into your Node project, and you are good to go.

Conclusion

Throughout this series various ES6 features have been covered like Block Scoping, Classes, Arrow and Spread Operators and so much more. In this last part, we show you how to start using ES6 features either by going back in time or back to the future with Babel and es6-shim.

As always, JAVASCRIPT ALL THE THINGS!

If you have questions, you can always reach me through Twitter or LinkedIn.

Cheers,

Rami Sayar

Missed the Previous Parts?

You can read the previous parts here: