Backbone.js is an extremely lightweight (6.5 KB in production) MV* framework that has been around for a few years. It has an extremely large established user base, and many large-scale web applications have been written using this framework:

• USA Today
• Hulu
• LinkedIn
• Trello
• Disqus
• Khan Academy
• Walmart Mobile

Backbone.js is a great framework to start with if you're comfortable with jQuery and have been using it for a while and want to start improving your code organization and modularity. Additionally, Backbone.js requires jQuery and integrates it pretty tightly, so that's one less thing to worry about learning as you ease into this new world of frontend development.

Backbone.js works on the basic idea of models, collections, views, and routers. Take a look at the following points:

• Models are the basic elements that store and manage all of the data in your application
• Collections store models
• Views render HTML to the screen, retrieving dynamic data from models and collections
• Routers power the URLs of your application, allowing each individual section of your application its own unique URL (without actually loading live URLs) and ultimately tying the whole thing together

As Backbone.js is so lightweight, an extremely small and simple set of sample code can be put together very quickly:

var Person = Backbone.Model.extend(); 
var PersonView = Backbone.View.extend({ 
    tag: 'div', 
    render: function() { 
        var html = [ 
            this.model.get('name'), 
            '<br/>', 
            this.model.get('website') 
        ].join(''); 
 
        this.$el.html(html); 
 
        return this;     
    } 
}); 
 
var person = new Person({ 
        name: 'Jason Krol', 
        website: 'http://kroltech.com' 
    }), 
    view = new PersonView({ model: person }); 
 
$('body').append(view.render().el); 

The one thing to notice is that Backbone.js, by its very nature, is so lightweight that it doesn't include most of the functionalities that you'd expect to work right out of the box. As you can see in the preceding code, in the View object that we created, we had to provide a render function that manually renders the HTML for us. For this reason, many people shy away from Backbone.js, but others embrace it for the raw power and flexibility it gives to developers.

Traditionally, you wouldn't put all of your code into a single file, like in the earlier example. You would organize your models, collections, and views into individual folders in a structure, just like we organized the code in our Node.js application. Bundling all of the code together would be the job of a build tool (which will be discussed later in this chapter).

You can learn more about Backbone.js by visiting its official website at http://backbonejs.org. Also, don't forget to check out the Backbone.js implementation of the to-do application on the TodoMVC website!