Tutorial de Backbone.js (I)

Hoy en día hay una nueva tendencia a la hora de hacer sitios web,  ésta es usar el patrón MVC en los clientes para lograr una mejor experiencia, es por esto que se han creado frameworks como Backbone.js o Angular.js, los cuales permiten usar MVC en el cliente y permiten sacarle todo el jugo a JavaScript. Una vez dicho esto entremos en materia.

¿Qué es Backbone.js?

Backbone.js es un framework que permite al desarrollador estructurar su aplicación, delegando ciertas labores a elementos específicos con el fin de hacer aplicaciones escalables, robustas y que brinden al usuario una gran experiencia de uso.

Entendiendo Backbone

Antes habíamos hablado de una serie de elementos que estructuran una aplicación, éstos elementos son los modelos (Models) y colecciones (Collections), que manejan la capa de datos, vistas (Views) para gestionar el contenido que interactúa con los usuarios y enrutadores (Routers) que permiten realizar los procesos de navegación en la aplicación. Una de las cosas más interesantes de este framework es que en la mayoría de los objetos se pueden definir una serie de eventos que permiten responder a las acciones del usuario. Otro punto a favor es que la capa de datos puede conectarse con varios tipos de fuentes de datos como REST, local storage y otros más.

Capa de Datos

Como ya mencione antes la capa de datos esta compuesta por modelos (Model) y colecciones (Collection), es necesario entender que un modelo es un elemento asociado a una fuente específica de datos y que un una instancia de un modelo es una unidad de datos, es decir, lo equivalente a un registro en una base de datos. En comparación una colección es es un elemento asociado a una fuente específica de datos y a un modelo específico y una instancia de una colección es un grupo de instancias de un modelo.

Tanto los modelos como las colecciones pueden responder a eventos como un nuevo dato agregado, el cambio de un dato existente y más, respondiendo a estos eventos con acciones asignadas por el programador.

Veamos un ejemplo:

// Ejemplo de modelos y colecciones
var Libro = Backbone.Model.extend({
    url : '/api/libros/',
    initialize: function(){
       // TODO: acciones de inicialización del modelo
    }
});

var Libros = Backbone.Collection.extend({
    model: Libro,
    url: '/api/libros/',
    initialize: function(){
       // TODO: acciones de inicialización del colección
    }
});

Como vemos en el código anterior se definen un modelo y una colección, los cuales tienen como fuente común de datos una api REST que provee los datos. Además la colección tiene asociado un modelo.
Sin embargo el código anterior no permitirá usar ningún dato hasta que se descarguen de manera explicita. Ahora miremos cómo usar modelos y colecciones:

// Ejemplo de modelos y colecciones, como cargar datos del servidor

    function listarLibros () {
        $("ul.datos").html("")
        var coleccion_libros = new Libros();
        coleccion_libros.on("add", function(model){
            console.log("Agregado", model.toJSON());
            $(".datos").append("<li>"+
                JSON.stringify(model.toJSON())+
                "</li>"
                );
        });
        var xhr = coleccion_libros.fetch()
        xhr.done(function () {
            console.log('Libros descargados...');
            var llibros = coleccion_libros.filter(function (model) {
                var libro = model.toJSON();
                return libro.nombre === "El Principito";
            });
            if(llibros.length==0){
                var libroNuevo = new Libro({
                    "nombre":"El Principito",
                    "editorial":"Panamericana",
                    "genero":"Infantil",
                    "autor":"1"
                });
                libroNuevo.save();
                coleccion_libros.add(libroNuevo);
            }
            console.log("0k");
        });

    }

En el último ejemplo vemos una función en la cual se cargan los datos desde el servidor con la instrucción fetch y se agregan a una lista (ul.datos) y si no hay ningún libro con nombre "El Principito" este se agrega.
Como vemos en el ejemplo se crea un objeto de tipo colección (coleccion_libros) y éste gestiona la carga de datos del servidor, además se pueden hacer bindings entre eventos y funciones, de esta manera se muestran los datos en la pagina web dentro de una lista cada vez que se agrega un nuevo elemento a la colección.

Pueden encontrar el código de ejemplo en Github. espero que les sea de ayuda.

Por favor comparte éste post... 

:D