20Jul2015

Application Development: Babel transpiler to use ES6 today

ECMAScript 6 standard is coming. As a next generation of JavaScript, it would be the most significant change in front-end Application Development in near future. BTW, new official label of standard is ES2015 for now. So, don’t be confused at line of terms. There is the same. ES2015 is not production ready approach, because it’s not supported officially by majority of the web browsers. On the other hand, ES2015 is very hot and too sexy to wait for official release date. Besides, it would be better to have ES6 skills for your front-end developer career. Well-known technologies like CoffeeScript pale into insignificance. A lot of smart software architects and CTO’s decide to design their new from-scratch client-side applications with perspective to be developed and supported in terms of ES6 standard. There would be the problem how to deal with such code right now. Regular solution is to use some tool to translate ES6 code into regular JavaScript, like we are doing in case of CoffeeScript or TypeScript. Babel [https://babeljs.io] is the most famous solution for that.

ES6 new features

So, what does it make ES6 standard to produce a lot of hype about. There is an arrow operator => introduces syntax sugar for function creation similar to CoffeeScript. There are classes with constructors, inheritance, static methods and other real OOP features. That is much better than old-school prototype-based pseudo-OOP of regular JavaScript. There is added built-in string interpolation like it’s used in other programming languages for decades already. There is the const keyword for one-time assignment in the scope and the let keyword as the new var inside the scope. Functions may have default values for their parameters. ES6 has a concept of iterable object, that provides some iterator interface. Thus we can iterate it by new syntax structure for…of. As a pair to iterator, there is a syntax to create generators. There is full unicode support in string and regular expressions. Map, Set, WeakMap and WeakSet are new structures for JavaScript applications. These are just most valuable features. As you can see, Application Development becomes more robust and easy at line of native JavaScript even without additional frameworks, libraries and approaches.

Babel as a tool

Babel may be used in the flow of any modern build tool, like Grunt, Gulp, Brunch, Broccoli, etc. Supported by frameworks: Ember, Meteor, Rails, Sails. Babel CLI is installed like any other node.js npm module. There is a require hook require(“babel/register”). In case of browser, you can use special babel-core/browser.js module to place ES6 code right into the page inside  tag script type=”text/babel”. Babel has very close integration with React.js [http://facebook.github.io/react] Web Application Development platform, designed and used by Facebook. There is out of the box support for JSX format. Even modern IDEs already support Babel as a translator. E.g., WebStorm has ability to add a watcher to process all .js and .jsx files into ES5 code with map files. There are standard workflows to use Babel with test engines: Karma, Jest and Mocha. There is also some user plugins system for extending and customization. But it’s not stable yet and has lack of documentation. Babel supports AMD and CommonJS module systems.

Read also

Comments are closed.