Angular U: Classes, Prototypes and OLOO

I just returned from the Angular U 2015 conference.  It was a great experience and I learned a lot.  I was even lucky enough to meet a number of the big names in Angular, people that I’d read about or heard on podcasts, including Brad Green, Dan Wahlin, Joe Eames, Ward Bell, Scott Moss, David East, etc.  I also met a number of the developers that were attending the conference or helping to organize it.  All of them were really friendly and welcoming.  I’m really hoping to keep in contact with them and see them at the next conference.

One of the biggest controversies at the conference was the difference in opinion on the new Class convention for ECMAScript 6.  Opinions seem to fall into one of two camps:

1. Classes are an easier way, so called “syntatic sugar”, to write Prototypal Inheritance in JavaScript
2. Classes are one of the worst new features ever added to JavaScript and they just serve to hide what’s really happening

Most of the Angular people seemed to fall on the side of #1.  Most of the speakers that are talking about modern Angular were teaching people to use the Class structure.  In this camp were people like Scott Moss, Dan Wahlin and John Papa.

Most of the people who were more pure JavaScript programmers are against the Class convention.  In this camp were people like Douglas Crockford and Kyle Simpson.  A lot of people in this camp made comments like, “I don’t want to write Java” or that the new syntax hides the real mechanism and could mislead people into thinking that JavaScript classes are like Java classes and not like JavaScript prototypal inheritance.  JS classes are exactly the same as JS prototypal interitance. Douglas Crockford said that Classes were the worst thing that happened to ES6.

A variation of the Prototypal Inheritance is what Kyle Simpson calls, Objects Linked to Other Objects (OLOO).  This approach creates objects, links them to other objects and then adds properties, as needed.  The idea is that objects shouldn’t “inherit” properties (since that implies a hierarchy) but that they should delegate some of their work to other objects.

I currently fall somewhere in the middle but I’m leaning more towards OLOO and the prototypal inheritance side.  My biggest reservation about prototypal inheritance is that the syntax is longer than the class structure and it’s somewhat confusing but these concerns are mostly solved by the Simpson’s OLOO syntax.

To help illustrate the differences in the three styles, I’ve created the same sample program in three different ways.  In each example, there’s a base object, Animal, a child or sibling object, Dog, and an object, Doug, that is an instance of Dog.

Class Syntax

'use strict';
class Animal {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}
 
class Dog extends Animal {
    constructor(name) {
        super(name);
    }
    callDog() {
        console.log(`${super.getName()}: woof!`);
    }
}
 
var Doug = new Dog("Doug");
Doug.callDog();

The above example shows the new ECMAScript 6 class syntax. I like how it’s pretty concise and easy to see how things are related.

Prototypal Inheritance

function Animal(name) {
    this.name = name;
}
 
Animal.prototype.getName = function() {
    return this.name;
};
 
function Dog(name) {
    Animal.call(this, name);
}
 
Dog.prototype = Object.create(Animal.prototype);
 
Dog.prototype.constructor = Dog;
 
Dog.prototype.callDog = function() {
    console.log(`${this.getName()}: woof!`);
};
 
var Doug = new Dog("Doug");
Doug.callDog();

This example was written using standard JavaScript prototypal inheritance. It’s relatively straightforward to see how the objects are related but, since I’m not as familiar with the syntax, it was a bit of work to write.

Objects Linked to Other Objects (OLOO)

var Animal = {
    init: function(name) {
        this.name = name;
    },
    getName: function() {
        return this.name;
    }
};
 
var Dog = Object.create(Animal);
Dog.callDog = function() {
    console.log(`${this.getName()}: woof!`);
};
 
var Doug = Object.create(Dog);
Doug.init("Doug");
Doug.callDog();

This last example uses the OLOO syntax. For this example, I like it the best. It’s easy to see how the objects are related, it’s concise and it was easy to write.

I’ve created a repo with all of the code from this blog.