Tuesday, April 19, 2011

Backbone-Part 2: the View and the Controller

Last time I have introduced the MVC pattern applied to the Web and Backbone, a lightweight framework build at DocumentCloud.

After having discussed the Model, now it is time for the View and the Controller.
Actually they are combined in Backbone, at the same way as in other systems like Swing.

It is necessary to extend Backbone.View in order to obtain an object that is actually much more controller than view.
The markup does not belong to this object at all, therefore you can use the technology you prefer for generating the HTML: you could even use raw javascript but of course it is better choosing a template engine like Mustache (my choice), or some other.

Inside the View object you have access to the $ object relative to the piece of DOM your view represent. We are talking about JQuery of course :) For mobile applications the $ could mean Zepto instead, but we are not going to cover this topic in this post.
Also every View has an el property which refers to the DOM element root for the View.

In a normal scenario a View has a model or collection property.
Moreover, each View can override the render method which determines the HTML output for that View.
Usually in the method you call the template engine to generate or updated the view for the underlying data.

In order to decide when to update a View you need events.
Events is a property of a View, it contains the events to capture, the CSS selector of the interested elements and the relative callback. Example:
events :{
"click .edit":"edit"
}
This will basically add an event listener to the click event on the element(s) having class edit. The callback in this case is called edit as well.
This is basically the controller registering to be notified about user interactions.

On the other hand the controller registers for changes in the model using the bind method specifying also in this case the event and the relative callback.
Events are fired by model and collection as their states changes.
initialize: function(){
  this.model.bind("change",updateView);
}

A view will usually be the central part of your App, it is the piece you will consult first when something is not working as expected. This object is the synthesis of Backbone itself, showing the major strong points of the library:
  • Lightweight
  • Easy to use
  • Integrates with JQuery and template engines
  • Gives structures to your App

But what about the cons?
Well, considering it is quite a new library (current version has not reached 1.0 yet) some glitches are present. Here are the one I find most fastidious:
  • Nested collections: probably the part that needs more work.Many issues have been created regarding this topic and ,in order for Backbone to become a more mature library, many of them need to be fixed
  • Validate is not called on a Model, if the Model is created using the short-cut Collection.create
  • Pagination for large collection is not supported.Here is a work-around
  • ...and probably some more issues.
In conclusion I would say Backbone is a very interesting library, it is not very mature yet and I would not suggest to use it if you plan to set up complex pages with nested models, especially if nested on multiple levels.
However I would keep an eye on it and maybe get some inspiration in order to structure an easy to maintain web app.

No comments:

Post a Comment