Backbone.js – Building interactive client-side web apps

I know this is the very interesting and need to create a web application with fast and very responsive user interface just like as windows application. The month ago I created a run-time web form designer using the JavaScript and jQuery, the overall work was very good you can design a web form with the drag and drop html controls at run-time, The controls automatically assigned the correct position and can save in the database. But I was facing the problems to maintain the code at the time of finalizing. Several times I felt that the jQuery confuse me in the very large code for example when you need to call the event of the object and some time not or when you are changing the HTML UI at run time, jQuery code will be worse at most cases.


The Backbone.js make easy to create the such web applications. With the Backbone.js, you represent your data as Models, which can be created, validated, destroyed, and you can also save the data to the server. The backbone.js allows us to write the JavaScript code in MVC pattern. There is a ‘change’ event that is triggered by model when the UI change the model and the all views can be notified of the change so that you can take an action such as re-rendering the UI with new changes. It allows you to structure your JavaScript code in an MVC. You will have better control on the client side code when you use the Backbone library.


There are several JavaScript library to do the same thing but the reason why I chose backbone.js is because it supports connecting to a json web API and it is very light weight. This is the JavaScript library and you can stand with this in your own framework.

Your first web page using backbone.js

backbone.js has only one dependency of the hardcore.js. You should use the power of the jQuery.js with the backbone.js. The following html document has the reference of the three js files:
– backbone.js
– hardcore.js
– jquery.js

The example is the simple html5 document that will show ‘hello world’ in the browser. I have already said that you can organize your JavaScript code in the MVC pattern.

<!DOCTYPE html>
<html xmlns="">
     <script src="backbone/Jquery.js"></script>
     <script src="backbone/underscore-min.js"></script>
     <script src="backbone/backbone-min.js"></script>
            var Model = Backbone.Model.extend({
                // defaults specify what attributes the model should
                defaults: {
                    notes: 'hello world'
            var View = Backbone.View.extend({
                // every view must have a specified render method
                render: function () {
            $(document).ready(function () {
                var _model = new Model();
                new View({ model: _model }).render()
<span id="txtNotes" />

You can ignore the above example this time. I written this example for you as just the first introduction of the backbone.js.

I have already said that you can organize your JavaScript code in the MVC architecture.


Backbone model contains the application data, business rules, logic, and functions. A model notifies its associated views when there has been a change in its state. This notification allows the views to produce updated output such as re-rendering the UI. Backbone.Model.extend() method is used to create a Model class of your own, you extend Backbone.Model and provide instance properties, as well as optional classProperties to be attached directly to the constructor function. In the above example we extend the model with the default property ‘notes’ that contains the value ‘hello world’.

 var Model = Backbone.Model.extend({
                // defaults specify what attributes the model should
                defaults: {
                    notes: 'hello world'


A view requests information from the model that it needs for generating an output representation such as re-rendering the HTML UI to the user. You can also define the your own view by using the Backbone.View.extend() method. You can use the render() to generate a DOM tree.

You can also use the backbone.Collection.extend() method to create the collection of the models. You can bind “change” events to be notified when any model in the collection has been modified, listen for “add” and “remove” events.

In the next article we will create a web page with the backbone.js.