Question

I have a web application that uses the Backbone.js framework (which is prototype-based). However, there is object oriented code that isn’t Backbone.js code. My question is: How can I document the application modeling with UML if not all of the code is object-oriented?
How can i model a style prototype-based and combine it with OO? Is it possible and/or correct? Can anyone point me to some documentation?

Answer 1

You could argue that as long as you simply use the *.extend({...}) style class definitions in Backbone, then your Backbone class model will be a standard. object oriented class model.

Consider:

//a base class
var ViewBase = Backbone.View.extend({
  //constructor
  initialize: function() {
    //instance field
    this.someProp = "value";
  },

  //overrides a superclass method
  remove: function() {
     this.cleanup();
     //call superclass method
     Backbone.View.prototype.remove.apply(this, arguments);
  },

  //overrideable method
  cleanup: function() { ... },

  //an abstract method that must be implemented. It's not a compile
  //time contract, but will crash in runtime if you don't implement it
  getContext: function() { throw new Error("NotImplemented"); }
});

//derives a new class, doesn't affect the base class implementation
var ListItemView = ViewBase.extend({
  //constructor
  initialize: function() {
    //instance field
    this.someOtherProp = "value";

    //constructor chaining
    ViewBase.prototype.initialize.apply(this, arguments);
  },

  //add new method
  filterUsers: function() { ... },

  //hides a superclass method
  cleanup: function() { ... },

  //implement an abstract method
  getContext: function() { ... }

}, {
  //a static (class) method
  create: function() { ... }
}); 

//instantiates a class
var view = new ListItemView();

//modifies the instance, but does not modify the prototype
//i.e. class definition
view.foo = 'bar';

While it’s true that internally Backbone uses prototypal inheritance chaining, no “prototypal characteristics” are being employed here. The extend function does not modify existing object’s prototype, and unless you later on monkey patch a superclass prototype, the with something like ViewBase.prototype.something = 'foo', the superclass prototype will be unchanged throughout the application’s lifetime.

What’s missing of course are private/protected properties, but otherwise the Backbone class model is no different from, say, Java or C#, so I don’t see why a standard UML class diagram would not be able to describe it?