Question

For a while now I have been developing javascript applications, usually smaller scripts to accomplish simple tasks but also a fairly large and complex application using Dean Edwards’ base2 library for creating pseudo classic OO classes with inheritance,… in javascript.

The base2 library served me pretty well, mainly because it enabled me to follow the classic OO paradigm, which I am quite familiar with. I also know of several other frameworks that can be used to build more robust and mature javascript applications (backbone.js for example). But I always have the feeling that this type of library is a way of ‘cheating’, to construct a way to write code using principles the language actually isn’t suited for.

I have been reading up on different ways to define objects/functions, instantiate them and achieving polymorphism using prototypal inheritance. This is really how the language works at a fundamental level and I feel like I should take advantage of that rather than deciding it is annoying or strange and trying to find a way to do things the way I’m used to (the classical OO way).

So, looking at applications that are not using this type of library, there seem to be so many ways to write your application while for traditional general purpose languages like Java, C++, … the right way of building your applications seems more clearly defined (it’s a lot easier to distinguish good from bad code). If somebody would ask me tomorrow: “start developing projectX for me”, I would have no idea how to start defining and structuring my objects in a way I can be sure won’t come back to bite me later when it’s too late to restructure the whole thing.

What would a professional complex js app skeleton look like, using prototypal inheritance, so without using any type of library for mimicking classic OO, assuming a simple MVC type of app but easily scalable to more complex proportions. How to define my objects? How to keep objects/’classes’ grouped together (namespacing)? In other words: how to do it without ending up with a mess nobody understands anymore?

Answer 1

There are two patterns I follow in creating object oriented Javascript ‘classes’ (thought there are no real classes in JS, we can mimic them). First is more familier OO way and simple to understand.

// in JS, functions can be used as OO classes
var Person = function(name) {
    var self = this;

    //private methods and attributes
    this.getNickname = function(){
        return "Yaka";
    };

    //public methods and attributes (return obj)
    return {
        getName : function() {
            return name + ' ' + self.getNickname();
        }
    }
};

//static functions attached to 'Person' class 
Person.hasBrain = function() {
    return true;
}

This model lets you to have private, public and static sections for your classes allowing good encapsulation. But this not the optimal way as every object will carry it’s own copy of all instance methods. You can avoid having multiple copies of the instance methods with prototype based programming:

// in JS, functions can be used as OO classes
var Person = function(name) {
    this.name = null;
};

// use of prototypes improves performance and memory use
Person.prototype.getName = function() {
    return this.name;
}

Person.prototype.setName = function(name) {
    this.name = name;
}   

This doesn’t look very familier for traditional OO programmers, but the optimum way for using javascript resources. It goes well with inheritance too.

var Manager = function() {}
Manager.prototype = new Person();

In practice I use the prototypical approach for base/framework classes that are being used heavily in the application. For classes being used occasionally or for few instances, I use the approach discussed before.

I also recommend you to use an AMD library such as requirejs, and define a single class per physical file. Then use an build optimizer to optimize your files in to a single script.

I copied above 2 approaches from the unit tests in BoilerplateJS reference architecture. Have a look at the code in BoilerplateJS, it will give you more ideas on how to approach complex application development with JS.

Disclaimer: I’m the main author of BoilerplateJS