Reusing Backbone.js controls and widgets

Question

Is there a good model for reusing UI components written in Backbone.js?

My team maintains a large web application that is mostly written in server-side code, but we're finding that we're doing more and more client side work. We have several large UI components that were written in jQuery, and they're really too complex to maintain with just a DOM manipulation library. We need a client-side application framework.

One nice thing that the jQuery plugin model offers is ease of reuse. You can just create a few HTML elements with the appropriate IDs and wire them up with $(function(){}). We'd definitely need to achieve something similar with Backbone if we adopted it.

Most of the examples out there show how to build an application entirely in Backbone, which is great, but we're not going to be reimplementing our app in JavaScript anytime soon. Our use of a client side framework would be confined to complex UI controls with a lot of business logic in them.

One other consideration is that we have a JavaScript bundling solution in place. I'm concerned that bundling a lot of Backbone elements together could mean that we end up with headless controls loading and running in the background.

Can you build Backbone controls and package them as jQuery plugins? Are there any good resources available about this kind of architecture?

Answer 1

For me one of the best parts of using Backbone is essentially what you are describing. The object-oriented-ness of Backbone makes it really easy to build out a specific 'widget' or other reusable code piece that you can bind events / templates / data to. You wouldn't necessarily want to make these jQuery plugins, simply because it wouldn't provide much benefit over Backbone's syntax.

For example, you could build a control class, and bind a click event to trigger the foo method on it.

var Control = Backbone.View.extend({
    id:null,
    events: { 
        'click' : 'foo'
    },
    foo: function(){
        console.log(this.id);
    }
})

Every time you want a DOM element to use this behaviour, you create a new Control object, and bind it to the element using jQuery.

//I say foo when you click me
var foo = new Control({el: $("#foo"), id:'foo' });

//I say bar when you click me
var bar = new Control({el: $("#bar"), id:'bar' });

(You feasibly could wrap those calls into a jQuery plugin)

This a really simple example to show what the workflow would be, you can get really intense with Backbone's models/collections and Underscore's templating engine to create some really robust dynamic & reusable classes.