Introducción a Backbone.js

1. Introducción

En este tutorial les presentaré Backbone.js, un framework muy poderoso que nos permite desarrollar aplicaciones JavaScript de una manera fácil, siguiendo el patrón MVC.

El objetivo de esta primera lección es darles una breve introducción a Backbone, explicarles los fundamentos en los que se basa y, poco a poco, con próximos tutoriales, profundizar en este poderoso framework para finalmente desarrollar una pequeña aplicación en la que podamos aplicar todo lo que hemos aprendido.

2. ¿Qué es Backbone.js?

Backbone es un framework que nos permite construir aplicaciones javascript tipo SPA (Single Page App) de manera sencilla, implementando el patrón MVC (Modelo Vista Controlador).

La gran potencia de Backbone reside en que, hasta hace unos años, era difícil tener aplicaciones javascript estructuradas. Gracias a Backbone, podemos estructurar el código siguiendo el patrón MVC.

Dentro de nuestra aplicación:

• El Modelo gestiona los datos y controla su persistencia
• La Vista interactúa con el usuario y muestra los datos
• El Controlador actúa como intermediario entre el Modelo y la Vista, comunicando ambas capas.

3. ¿Cómo funciona?

Backbone se apoya en varias piezas clave que nos permitirán construir cualquier aplicación de manera sencilla:

• Modelos
• Vistas
• Colecciones
• Eventos

En una aplicación, los datos que maneja son controlados por los 'modelos', los cuales nos permiten operar sobre los datos, validarlos, procesarlos, etc. Cada vez que se realiza una operación en el modelo, Backbone lanza eventos para comunicar al resto de los componentes qué tipo de operación se está realizando. De esta forma, podemos asociar los modelos a las 'vistas' para que, al mismo tiempo, reaccionen al cambio de estado del modelo y se muestren de una manera diferente según su estado. Esto separa perfectamente la lógica de negocio de la vista.

4. Modelos

En Backbone, los modelos son la base de cualquier aplicación. Nos permiten gestionar los datos y la lógica que nuestra aplicación manejará.

Internamente, los modelos implementan un "mapa" que albergará todos y cada uno de los datos de la aplicación, gestionarán la lógica de negocio y, además, nos proporciona soporte para gestionar el sincronismo entre la capa de datos y la capa de persistencia.

Cada vez que un modelo sufre un cambio, éste lanza un evento que es escuchado por otros componentes de la aplicación. Lo más común es asociar un modelo a una vista de la aplicación, para que ésta pueda reaccionar a dichos cambios de estado y cambiar según el estado del modelo.

Para crear un modelo necesitamos extender la clase "Model" de Backbone usando la palabra reservada "extend". De esta manera, crearemos una clase de tipo Modelo en nuestra aplicación:

var Curso = Backbone.Model.extend({});

Para crear una instancia de nuestro modelo bastará con usar la palabra reservada 'new':

var curso = new Curso();

En el ejemplo anterior creamos una clase de tipo Modelo sin atributos, pero también podemos crear una clase con una serie de atributos predeterminados. Por ejemplo, podemos definir nuestra clase con los atributos 'idCurso' y 'titulo'.

Para hacerlo, debemos definir en el atributo 'defaults' un objeto JSON con los atributos predeterminados que el modelo contendrá al ser instanciado:

var Curso = Backbone.Model.extend({
  defaults: {
    idCurso: '',
    titulo: ''
  }
});

var curso = new Curso();

Si creamos una nueva instancia de nuestro modelo, ésta tendrá los atributos 'idCurso' y 'titulo' definidos por defecto con valores vacíos.

Si deseamos crear una instancia pasando valores personalizados para nuestro curso en el constructor, podemos pasarle a la clase un JSON con los valores de los atributos.

var Curso = Backbone.Model.extend({
  defaults: {
    idCurso: '',
    titulo: ''
  }
})

var curso = new Curso({ idCurso: '1', titulo: 'Introducción a Backbone' })

Si en lugar de eso no deseamos crear la instancia pasando los valores desde el constructor, podemos almacenar los datos en el modelo utilizando la función 'set':

var Curso = Backbone.Model.extend({
  defaults: {
    idCurso: '',
    titulo: ''
  }
});

var curso = new Curso();

curso.set('idCurso', '1');
curso.set('titulo', 'Primeros pasos con Backbone');

Para obtener los valores del modelo utilizaremos la función "get":

console.log(curso.get('idCurso'));
console.log(curso.get('titulo'));

Backbone nos proporciona muchas funciones para gestionar los modelos de nuestra aplicación. Aquí presentamos las más básicas, aunque hay muchas más. En tutoriales posteriores profundizaremos más en estas funciones.

5. Vistas

Las vistas nos permiten representar, en términos de interfaz de usuario, los datos manejados por los modelos.

Normalmente, su funcionamiento consiste en suscribirse a los eventos que los modelos lanzan cuando cambian de estado. Una vez que se ha capturado un evento, la vista mostrará la representación del modelo en el navegador.

Backbone no proporciona soporte directo para las plantillas HTML, por lo que será necesario usar librerías de terceros para manejar, de manera sencilla, las plantillas HTML. En tutoriales futuros veremos cómo utilizarlas.

Para crear una vista, necesitamos extender la clase 'View' de Backbone mediante el uso de la palabra reservada 'extend'.

Al definir una vista, se establece el elemento HTML que representará la vista mediante el atributo 'tagName'. Si no se indica este atributo, por defecto, la vista que se crea será un 'div'.

var Curso = Backbone.View.extend({
  tagName: "div"
});

La gran potencia de Backbone radica en la programación orientada a eventos. Como anticipamos en la introducción, cada uno de sus componentes puede lanzar eventos que son escuchados por el resto, y éstos podrán suscribirse a aquellos que les interese.

Dentro de las vistas, podemos suscribirnos a eventos resultantes de posibles interacciones entre el usuario y dicha vista.

Para hacerlo, debemos definir un atributo "events" dentro de nuestra vista que contendrá el tipo de evento que se escuchará dentro del fragmento de HTML que representa nuestra vista:

var Curso = Backbone.View.extend({

  tagName: "div",

  events: {
    "click .button": "greetings"
  },

  greetings: function() {
    alert('Hola mundo');
  }

});

En el ejemplo anterior, cuando se haga clic en el elemento HTML que contiene nuestra vista, se llamará a la función "greetings". Es importante destacar que esta acción solo se llevará a cabo si se hace clic en el elemento que contenga una clase llamada "button".

Para definir la plantilla HTML asociada a nuestra vista, usaremos el atributo "template". Como se mencionó anteriormente, Backbone no proporciona un sistema de plantillas para representar plantillas HTML. Para esto, se usan librerías de terceros para gestionar de manera sencilla este punto (en el siguiente ejemplo se está usando Underscore.js).

var Curso = Backbone.View.extend({

  tagName: "div",

  events: {
    "click .button": "greetings"
  },

  template: _.template('<button class="button">Hola</button>'),

  greetings: function() {
    alert('Hola mundo');
  }

});

6. Colecciones

Cuando desarrollamos una aplicación con Backbone, es común encontrarnos con situaciones en las que debemos manejar colecciones de modelos. En esos casos surge la pregunta: ¿Cómo puedo gestionar y representar una lista de modelos de manera sencilla en mi aplicación?

Para responder a esta pregunta, Backbone nos brinda una herramienta muy poderosa: las colecciones (Collection). Las colecciones son conjuntos ordenados de modelos que nos permiten gestionarlos mediante una variedad de funciones y utilidades.

Al igual que con los modelos, las colecciones también lanzan eventos al resto de elementos de nuestra aplicación cuando cambian su estado o el de los modelos que contienen.

Para crear una colección de modelos, al igual que en los apartados anteriores, usamos la palabra reservada 'extend' para extender la clase 'Collection' de Backbone. Es importante tener en cuenta que antes de crear una colección, debemos definir el tipo de modelo que la colección va a gestionar.

var Curso = Backbone.Model.extend({
  defaults: {
    idCurso: '',
    titulo: ''
  }
});

var CursosCollection = Backbone.Collection.extend({
  model: Curso
});

var cursoCollection = new CursosCollection();

Una vez que hemos creado nuestra colección, Backbone nos ofrece una gran cantidad de funciones para aplicar sobre ella:

• add: agrega un modelo a la colección.
• remove: elimina un modelo de la colección.
• reset: cambia el contenido de la colección por el contenido de otra colección; si no se le pasa otra colección, simplemente elimina su contenido.
• set: actualiza una colección de modelos con la colección de modelos que se recibe como parámetro.
• get: recupera un modelo de una colección, ya sea buscándolo por id o pasándole un modelo completo.
• at: devuelve un modelo de la colección especificando su posición dentro de la colección.
• push: agrega un nuevo modelo al final de la colección.
• pop: devuelve y elimina el último modelo de la colección.

7. Eventos

Como mencionamos antes, Backbone nos ofrece un sistema de comunicación entre componentes mediante el uso de eventos. Esto significa que cada uno de los componentes de nuestra aplicación puede lanzar eventos y suscribirse a otros si es necesario.

Para lanzar un evento en nuestra aplicación, usamos la función 'trigger' y le pasamos el nombre del evento que queremos lanzar junto con los posibles parámetros que queremos enviar con el evento.

Para suscribirse a un evento, debemos usar la función 'on' en el objeto que lanza el evento y pasar el nombre del evento al que nos queremos suscribir.

var greeting = {};

_.extend(greeting, Backbone.Events);

greeting.on("alert", function(msg) {
  alert("Se ha lanzado " + msg);
});

greeting.trigger("alert", "un evento");

En el ejemplo anterior podemos ver que al objeto 'greeting' se le está dando la posibilidad de lanzar eventos (en tutoriales futuros profundizaremos más en este tema), y básicamente es él mismo el que está capturando el evento que está lanzando, mostrando una alerta con el siguiente texto: 'Se ha lanzado un evento'.

Ya hemos mencionado anteriormente que tanto los modelos como las colecciones lanzan eventos, a los que nos podemos suscribir, cuando cambian su estado. Aquí les presento algunos de ellos:

• add: cuando se añade un modelo a una colección
• remove: cuando se elimina un modelo de una colección
• update: cuando se ha modificado una colección
• reset: cuando se ha "resetado" una colección
• sort: cuando se ha ordenado una colección
• change: cuando el atributo de un modelo ha sido modificado
• change:[key]: cuando se ha modificado un atributo específico (determinado por 'key')

8. Conclusiones

Hoy en día existen muchos frameworks de JavaScript disponibles para desarrollar aplicaciones SPA. Backbone.js es uno de los más utilizados y debido a su gran potencial y escalabilidad, es uno de los que muchas grandes empresas han seleccionado para desarrollar sus aplicaciones empresariales.

Como ya les he mencionado en el transcurso del tutorial, poco a poco iré publicando distintos tutoriales profundizando en cada una de las partes que conforman este potente framework, para finalmente desarrollar una aplicación completa que iremos mejorando.