Backbone component reusability

Question

I'm trying to find best option to make Backbone views reusable. I goggled and found many different solutions but not sure which one suits my requirements. Basically I'm going to have many widgets filled with real time data and I need a base component that will handle service subscriptions

Is following best solution for this problem:

App.View.Base = Backbone.View.extend({
  baseMethod: function( params ) {};
});

App.ExtendedView.Base = App.View.Base.extend({
  // new stuff here

  // overriding App.View.Base.baseMethod
  baseMethod: function( params ) {
    // overriding stuff here 
    App.View.Base.prototype.baseMethod.call(this, params); // calling super.baseMethod()
  }
});

Is there any better approach? or should I use mixins?

Answer 1

I might be inclined to favour composition over inheritance here, and create a spinner view, and use instances of it in other views that require spinner functionality.

More info: Prefer composition over inheritance?

Answer 2

The typical rule-of-thumb I use for stuff like this is if there are any immutable methods in the base class that provide a common context for all your sub-classes, then inheritance makes sense. For instance, I've created a BaseView class for my Backbone application that looks something like this:

define(function() {
    return Backbone.View.extend({
        /**
         * show() and hide() are immutable
         */
        show : function() {
            this.beforeShow();
            this.doShow();
            this.afterShow();
        },
        hide : function() {
            this.beforeHide();
            this.doHide();
            this.afterHide();
        },
        doShow : function() {
            this.$el.show();
            this.trigger('displayComplete', {action : 'show'});
        },
        doHide : function() {
            this.$el.hide();
        },
        //Override the following to extend behavior of the view
        //before and/or after the view is shown/hidden.            
        beforeShow : function() {},
        beforeHide : function() {},
        afterShow : function() {},
        afterHide : function() {}
    });
});

This is a pretty simple example, but it has proven to make things much easier for development of my application, as my central controller object is given a common interface for showing and hiding views. I suppose you could use composition here as well, but that requires doing an explicit extend() at runtime. You get the same result in either case, but I just prefer to have the functionality available when I instantiate my views.

Another thought is that it really depends upon what you want to accomplish. Inheritance is much more rigid than composition, but again, it depends upon what you ultimately want to accomplish, and sometimes enforcing rigidity to maintain a context is a good thing.