Live in Harmony: Dive into JavaScript 6 now with transpilers
Scripps development engineer Andy Nager giving a Remus underwater autonomous vehicle a push.
One drawback of living on the cutting edge is it can be lonely. Web developers realized this long ago with different browsers supporting different aspects of web standards, which have led to so many workarounds.
The next iteration of ECMAScript (JavaScript's core language) via version 6 is bringing great new features and changes to the language, but using them now can be tricky since support is not uniform. Transpilers fill the gap by allowing you to use the latest version while the code is degraded to work in applications that do not support it.
Living in Harmony
Version 6 of the core of the increasingly popular JavaScript, ECMAScript, has been codenamed Harmony. It is a good name since it is music to many developers' ears.
This version adds a lot of language features that seemingly move it in the direction of full-featured languages like Java. The ECMAScript team posted goals online that give you an idea of what they wanted to accomplish with the new version -- one of the main goals (and first on the list) was a better language to write complex applications. This is a list of my favorite new features.
There has been a lot of work around objects with the goal of making JavaScript more efficiently manipulate and interact with objects. Classes are now supported along with actually defined methods, as they are no longer glorified properties.
There are new ways to work with variables like use the Let statement in place of var, along with defining constants with const.
Iterators have been added to make it easier to work with collections of data. One example is the addition of the for/of loop, which makes it easy to access each value of a collection. New collection types (map and sets) have been added to the familiar objects and arrays.
Arrow functions allow functions to be defined using arrows (like =>), which can save typing and lead to cleaner code. Also, arrow functions can be used for Immediately-Invoked Function Expressions.
Template strings address some of the limitations of JavaScript strings by supporting multiline strings as well as escaped strings (like HTML).
There are a number of array enhancements, including powerful comprehensions for creating new arrays via existing arrays and user-defined criteria. Also, the spread operator allows you to explode an array into its individual elements.
Generators are a unique feature that allow you to create routines with suspended execution contexts -- you yield values until no more exist. While I am not a Python programmer, I have been told this mimics a Python feature.
The specifics of the new features are beyond this article but, with so many features and so many target platforms, it makes it hard to imagine industry conformity. After all, many of us are well versed in dealing with the inconsistent CSS and HTML standards across different browsers (yes, I'm looking at you Internet Explorer).
Tomorrow is here, thanks to transpilers
Transpilers provide an option for developers who want to jump on the version 6 bandwagon now without worrying about how it runs in production. Basically, you develop your code in ECMAScript 6 and convert it (transpile) to version 5 at build-time. It really isn't a lot different than using something like CoffeeScript or even TypeScript, where you use one syntax or language features during development and then turn it into standard JavaScript when it goes to production.
There are some of the popular transpilers that are available:
6to5: This is the most comprehensive option, as it supports the most ECMAScript 6 features at this time. It is widely supported and used with great documentation and support for the more popular environments/tools such as Node, Ruby, and Grunt.
Google traceur: Google's offering is provided via a JavaScript library. It does not offer a command-line compiler, so everything must be compiled on the client side. This online tool allows you to drive before buying.
es6-transpiler: This promises tomorrow's JavaScript today. It supports many of the new features -- generators is a big omission.
TypeScript: Microsoft's JavaScript superset allows you to compile to standard JavaScript, so you could use it to utilize new JavaScript features. The current TypeScript version only offers partial ECMAScript 6 support, but this will continue to be updated.
Check out a more comprehensive list of ECMAScript 6 tools.
The new features and changes in ECMAScript 6 are exciting, though they do present a learning curve. Figure A provides a demo of how much leaner the code can be, with version 6 code on the left and its version 5 equivalent on the right.
Figure A
Image: Screenshot by Tony Patton
6to5 offers an online playground for working with code.
Mixed emotions
Given my strong development background with languages including Java, C, and C#, I love many of the changes coming with the new version of JavaScript; however, it makes me a little sad to see it moving full steam ahead towards the "real" programming language moniker.
No, I am not saying it is not a real language now, but there has always been rumblings from developers who say that JavaScript lacks certain features, which kind of left JavaScript as a sort of a rebel that could not be ignored. Now JavaScript is hard to ignore because it's so popular.
I hope the continued push of the standard to a more conventional language does not scare away a portion of the web development community. On the other hand, you cannot stand in the way of progress, and transpilers allow you to jump in the deep end with the latest JavaScript sooner rather than later.
