ES6 Backbone

(and other happy thoughts)

Created by John Tsevdos / @tsevdos

Why do that?

  • Prepare our codebase for the future
  • Write cleaner code
  • Write fatser
  • ES6 2015 standard is 100% complete

A few ES6 features

Arrow functions


							evens.map(v => v + 1);
						

String interpolation


var name = "Bob", time = "today";
console.log("Hello ${name}, how are you ${time}?");
						

ES6 features

Classes


class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}
						

ES6 features

Modules


import * as math from "lib/math";
import {sum, pi} from "lib/math";
						

and more

Tooling

  • Babel (transpilers)
  • Webpack (module loader/bundler)

Babel

Babel has support for the latest version of JavaScript through syntax transformers. These allow you to use new syntax, right now without waiting for browser support.

Webpack

Webpack takes modules with dependencies and generates static assets representing those modules. It supports AMD, CommonJs and ES6 module loaders.

Steps

THE END

  • Questions?