Client Side MVC

The current project on which I am working in my company, I have been introduced to a new concept(at least its new for me :) ) Client side MVC by one of my colleague and its actually very good technique.

Why to have client side MVC-
1. It allows you to manage your data on client side.
2. It allows you to customize your views with Modularized JavaScript code.
3. It allows you to create complex views.


In our application we are using Backbone.js to design Client side MVC. Even though I am not an expert in Backbone.js but I liked it, because of the features which are provided by it and how easy it makes to create layouts, view and loads of other things. Backbone.js provides Model, View, Collection and Router(Controller) to create a MVC model.

Backbone has a main dependency - Underscore.js, which is a JavaScript library(Of course!!).
Creating models using Backbone.js is very easy-

var Book = Backbone.Model.extend({
     defaults : {
         name : '',
         author : ''
     }
});

This is how you create new Model using Backbone.js. Now we can use this model to create new Book objects.

var book1 = new Book();

Here we have our new Book object, now we can set and get the properties.

book1.set('name','Design Patterns');
alert(book1.get('name'));

Following is an example of how we can construct a Collection object

var BookList = Backbone.Collection.extend({
     model : Book
});

Now we can use this Collection to collect Book elements.

var library = new BookList();
library.add(new Book({name:'Head First Java'}));


Following is an example of how to use Views provided by Backbone.js


var BookView = Backbone.View.extend({
     tagName : 'li',
     initialize : function(){
          _.bindAll(this, 'render');
     },
     render : function(){
          $(this.el).append('Name : ' + this.model.get('name'));
     }
});


Here, we have our BookView with us which we can use to render a book view. In my next post I will post a complete example of how to use Backbone.js to construct a complete view.
Mean while you can get more information about Backbone.js at here.