JavaScript (& the descendants of so-called traditional web stack) is everywhere. In browsers, on mobile, on low-energy tech (IoT) even on the server-side. Regardless of its flaws & limitations, it didn't succumb - quite the opposite - it's evolving & what's more interesting, it's forking in so many directions that it's quite hard to comprehend, if you want to remain up-to-date. I've already written about Dart, TypeScript, Polymer, NodeJS/io.js - but today I'll focus on the future of JavaScript (well... ECMAScript - hopefully you get the difference) itself & ... the fact that it's already here.

Harmony

As we all know HTML5 has re-defined a web. To be precise, HTML couldn't do it by itself. CSS3 & ECMAScript 5 were as important as the changes in HTML (at least as important, if not more). What some people may have missed is the fact that ES5 is already almost 6 years old - which is an eon in software dev world. Anyway, the waiting time is over, ES6 (aka ES2015 or Harmony) has been finalized and confirmed in June 2015, so it's the highest time to get more familiar with what has been cooked. Here are some goodies worth mentioning (it's not the full list!):

  • Arrows - lambda syntax
  • Classes (no shit!)
  • Templated string formatting
  • Destructuring (basic pattern matching - yes, jawdrop is justified ...)
  • Const
  • Basic arguments tweaking (defaults, rest, etc.)
  • Iterators & generators
  • Modules (finally done right!)
  • New (& useful) data structures (map, set, etc.)

Babel

If you ask me, this list above looks good enough to give ES6 a try. There's just one problem though ... ES6 implementation in modern browsers. To understand where we are ATM, you need to this url.

Unimpressive (at least on the day of creating this blog post - 23.08.2015), isn't it? Low percentage of features implemented in browsers is just one problem, differences between browsers is another one. Fortunately, there's a reasonable, temporal work-around that's worth checking (and it's already present in the table) - Babel.js (https://babeljs.io/).

What's Babel? It's a JavaScript compiler that uses polyfills & other nasty tricks to make ES6 features available using ES5 syntax (in ES5 compatible browsers). It's not perfect, the list of feature it covers is not 100% complete of course (it's not possible, the changes in ES6 go too far for that), but it's still more advanced than any standalone browser AND (what is more important) it covers all supported browsers in exactly the same way!

100% badass ninjitsu, ain't it?

Using Babel

Personally, I've decided to try Babel due to its JSX support & because React works with ES6 (details here). Surprisingly, it wasn't a big deal, once I knew when to look for.

These days I use gulp & browserify in my JS compilation pipeline. In theory browserify gets redundant with ES6, but let's face the facts: even assuming that if I'm going to write all my components in ES6, it doesn't mean that others will do. So, as browserify does all my bundling, minimizing, etc., what I needed to do was to put babel in one of browserify transforms. Fortunately, there's a package that does precisely that - it's called babelify (surprise, surprise):

gulp.task('js', function() {
   browserify(/* JS app root file */)
       .transform(babelify)
       .bundle()
       ...
});

Things may get a bit tricky in tests (I use karma) - there's really no point for using browserify for test specs. Fortunately, once again there's a package to help - named karma-babel-preprocessor. Here's the relevant piece of Karma config file:

preprocessors: {
      'dist/scripts/*.js': ['browserify'],
      'test/*.js': ['babel']
    },

    "babelPreprocessor": {
    },

    browserify: {
      debug: true,
      configure: function(bundle) {
        bundle.once('prebundle', function() {
          bundle.transform('babelify');
        });
      }
    },

Seriously, it's THAT simple. What's more, Babel creators have prepared a dedicated mini-wizard to help you set up Babel with the tools of your choice. You can find it here - personally I've found it very helpful. And here was my reward - creating React components has never been so simple & concise:

import React from 'react';
 
class Test extends React.Component {
  render() {
    return <div>Hello, nasty world!</div>;
  }
}

Stepping in

As a supplement, here are my recommended resources to learn ES6.

  1. ES6 tutorial at Babbel's website: https://babeljs.io/docs/learn-es2015/
  2. The best (but not only ;D) book on ES6: http://exploringjs.com/
  3. The best on-line courses on ES6: https://egghead.io/technologies/es6

Enjoy.

Share this post