Ripples, Backbone, and the Traceur Compiler

I'd like to be more more deliberate about writing. I've decided to kickstart this by creating a simple visualization each week. Most recently I played around with the new Harmony JavaScript specification, blending it with Backbone some fundamental HTML5 canvas techniques.


ripples

Demo: http://natehunzaker.com/ripple

Final code: https://github.com/nhunzaker/ripple


Much of my focus was on working with the new ES6 standard, so there isn't much depth to the aesthetic quality of this project. However I think it's certainly more interesting than a todo app.

import {Model, View, Collection} from 'backbone';

export class Ripples extends View {
    initialize() {
        this.fitScreen();
    }

    // ...
}

I'm hooked. Even better is how easy the tooling has become to integrate ES6 using standard build automation.

Transpiling ES6 to modern browsers

A while back I discovered the fantastic es6ify transform for browserify and I've been anxious to use it - so I did. This transform integrates Google's traceur-compiler into the browserify compilation pipeline, bringing support for modules, destructuring assignment, default values, syntax sugar for classes, etc.

Along the way I encountered two strange issues working with these tools.

Prevent es6ify from compiling node_modules

This is a strange one. Without the following lines, including a module from node_modules return an empty object:

   //.. browserify
        .add(es6ify.runtime)
        .transform(es6ify.configure(/^(?!.*node_modules)+.+\.js$/))
    //.. more browserify

Using the value of module.exports

I was unable to figure out a way to use the import keyword with es6ify. Looking under the hood, it appears that the generated code expects a default value on module.exports. I couldn't find a way to get around this, so I just elected to use the CommonJS method to include Backbone and jQuery:

import {View} from 'backbone';
var $ = require('jquery');

This isn't fantastic, but it works.

Final Thoughts

Despite the hiccups, I think es6ify (or a similar offering) will become a part of my regular workflow in the near future. Working with the Harmony specification makes coding in JavaScript substantially cleaner and more powerful.