Developing Javascript with

Class



by Mike Geyser

JSinSA 2014

Overview

  • Introduction
  • Status Quo
  • ECMAScript 6
  • Traceur

Status Quo

How do we write OO Javascript today?

Class definition


    var Model = function(name, options) {
        this.name = name;
        this.options = options;
    };
     
    var someModel = new Model("Some model", { option: 1 });
					

So, basically just a function..

Namespace


    (function(ns){
        var model = function() { };
     
        ns.Model = model;
    })(window.ns = window.ns || {});
					

So, basically just a function..

Inheritance


    var Parent = function() { };
    
    var Child = function() { };
    Child.prototype = new Parent(); // wut?
                            
    var child = new Child();
					
  • I just.. I don't even..
  • (This is usually where people give up on OO)

Lipstick on a pig


    var Parent = function() { };
    
    var Child = $.extend({}, Parent);

    // or
    var Child = Parent.subclass({});

    // or
    var Child = beget(Parent, {});

    // and they all pretty much do
    _child.prototype = _parent.prototype;
    return new _child();
					
  • A million different variants to facilitate the copying.
  • But no standard way to make inheritance not suck.

Method overriding


    var Child = function() { 
        // Constructor
        Parent.call(this);
    };
                            
    Child.prototype.someMethod = function() {
        // Method
        Parent.prototype.someMethod.apply(this, []);
    };
					
  • Explicitly changing the scope of 'this'.
  • (So, basically a hack.)

To summarise

  • Class: an instantiated function
  • Namespace: an immediately-invoked function
  • Inheritance: the stuff nightmares are prototyped from
  • Overriding: a hack involving changing 'this'

We do this every day...


(And yet we wonder why people don't take javascript seriously.)

Intermission

In which we wait for someone to shout:


"This is why you should favour composition over inheritance!"

ECMA Script 6


Code-Name "Harmony"

Class definition


    class Model {
        constructor(){
            this.name = name;
            this.options = options;
        }
    };
     
    var someModel = new Model("Some model", { option: 1 });
					
  • Explicit class declaration.
  • Explicit constructor definition.
  • Same usage.

Modules


    // module1.js
    export class Model {
    }
                            
    class PrivateModel {
    }
                 
    // module2.js           
    import { Model } from 'module1.js'
					

Namespacing is a part of the problem, not the solution.

Modules

  • Explicit module definition.
  • Allows for module-localised classes.
  • Module exports can't be modified.
  • Deferred initialisation

Inheritance


    class Parent {
    }
                                      
    class Child extends Parent {
    }
                            
    var child = new Child();
					

Sane inheritance syntax.


Still prototypal inheritance under the hood.

Method overriding


    class Child extends Parent {
        constructor() { 
            super();
        }
                            
        someMethod () {
            super();
        }
    }
					
  • Sane overriding syntax.
  • No need for explicit handling of 'this'.

To summarise

  • All new language features.
  • Simple, unambiguous syntax.
  • Still prototypal inheritance.

That sounds great, when can I start?

Officially.. Well.. No one knows.

(Dramatic entrance. Stage left.)

google traceur compiler

Traceur

  • Google project
  • JS.next to JS.today compiler
  • Runtime as well as 'build' time

Traceur


    
    

    
					    
  • Reference compiler and bootstrapper.
  • Script type 'module'

Enough! Show me the code...

Precompile


    $ npm install traceur
    $ traceur --out output/module.js --script/module.js
					    

Grunt, gulp or build server.

So... This is all just syntactical sugar, right?

Is this going to change?

Isn't this a lot like CoffeeScript / TypeScript / Dart?

Is traceur really ready for production use?

Summary

  • Simple, unambiguous syntax.
  • Same prototypal behaviour.
  • Progressive enhancement with Traceur.



Questions?

@mikegeyser