sábado, 26 de marzo de 2011

Playing with Backbone.js Views inheritance

One common requirement for big javascript applications is being able to create reusable and extensible visual components (Views in backbone).  The most natural way to achieve this extensibility goal in an OOP environment is to take advantage of inheritance capabilities available in javascript [1]. 

For example in my projects I usually create a PopupView class implementing the funcionality shared by all the popups (close button, resizing, modelness...) and then I create a XXXXPopupView class for each type of popup in my application.

I didn't find any documentation on how to implement this pattern with Backbone.js, and I've been playing with two different approaches to get it.

Proposal 1. Extending events property (doesn't require any change in backbone)

    var ViewClass = Backbone.View.extend({
      el: $("body"),
      events: {
        "click": "click"
      click: function() {
    var SubviewClass = ViewClass.extend({
      events: _.extend({
        "dblclick": "dblclick"
      }, ViewClass.prototype.events),
      dblclick: function() {

    var view = new SubviewClass;

We have to admit that the resulting code could be nicer.

Proposal 2. Changing Backbone events declaration
Making some little changes in backbone.js you can get a simpler solution, although it also has some potential drawbacks.  I forked it in github to publish these changes [2].

    var ViewClass = Backbone.View.extend({
      el: $("body"),
      "click": function() {
    var SubviewClass = ViewClass.extend({
      "dblclick": function() {

    var view = new SubviewClass;

In this case the resulting code is much cleaner, although it requires the implementation in backbone.js of some heuristics in the views to differentiate the event declarations from other properties in the object.

I included some unit testing and also confirmed that all the existing backbone tests weren't broken, but I would be glad to receive any comments proposing better solutions to implement View inherintance.

[1] http://jupiterjs.com/news/writing-the-perfect-jquery-plugin
[2] https://github.com/ggarber/backbone

martes, 15 de marzo de 2011

Why do I like Javascript?

Like most of the people I starting copying&pasting&hating javascript code (this was more than ten years ago :-(), but then I read somewhere that Javascript was a real programming language and I was socked.   I started to read a great book [1] and watch great presentations [2] and it made me start falling in love with this language.

I'm going to try to organize those feelings and explain why am I liking it so much these days.

- No building/compilation process required
- Ad-hoc objects creation: No need to create a class to pass an list of properties to a function
- Anonymous functions and closures: Functions can be declared where needed and have access to the surrounding context
- Duck typing: I can pass a function any object as long as it has just the properties/methods required in that furnction
- Reduced number of concepts: For objects, arrays, hash tables, functions and namespaces you just need the basic object concept (f.e. you can do object.var = f, array.var = f, hash.var = f, function.var = f, namespace.var = f)

Obviously there are also some points that I would like to be improved, but that could be a topic for a future post.

[1] http://www.amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/0596101996
[2] http://video.yahoo.com/watch/111585/1027823

domingo, 13 de marzo de 2011

Comparing Javascript Frameworks for big Single Page Applications

In the latest web projects I've been involved I feel the necessity of using a framework offering a proven solution to create a scalable dynamic web application.

What I would like to have is a tool that helps me to:
i) organize my code in modules for different parts of the application with some help to easily create reusable widgets
ii) communicate those modules in a decoupled way
iii) request and synchronize the server data in an efficient and OO way

The two frameworks that I have been considering after reading about a lot of them are JavascriptMVC and Backbone.js (because they are relatively simple, and aligned with my view of what a web application is).   In the next table I try to summarize the pros/cons of them along my three requirements:

In addition I feel that Backbone.js is simpler and easier to modify, while Javascript MVC is more complete and better supported.

Starting this blog

Today I'm starting this new blog because I feel that I need a place to publish about my coding experiences.  I'll try to put my thoughts, ideas, problems and solutions without a very clear order and mixing post related to very different technologies I use.

What about the name of the blog?....  Kalimotxo is a typical spanish drink composed of wine and coke (50/50).  I have enjoyed some saturday nights coding while drinking this awesome beverage and that's the reason why I find it an appropriate name for the blog.

I'll try to organize the posts with tags, so that people interested just in one of the tecnologies (f.e. web, desktop, .NET, javascript....) can subscribe to those posts and don't receive too much spam.