Introducción a Backbone.js
Índice de contenidos.
- 1. Introducción
- 2. ¿Qué es Backbone.js?
- 3. ¿Cómo funciona?
- 4. Modelos
- 5. Vistas
- 6. Colecciones
- 7. Eventos
- 8. Conclusiones
1. Introducción
En este tutorial os voy a presentar Backbone.js, un potente framework que nos permite desarrollar aplicaciones javascript de una manera sencilla implementando el patrón MVC.
El objetivo de este primer tutorial es haceros una pequeña introducción a Backbone, ver los pilares sobre los que se sostiene y, poco a poco, a través de posteriores tutoriales ir ampliando más materia sobre este potente framework para, finalmente, desarrollar una pequeña aplicación en la que podamos aplicar todo lo aprendido.
2. ¿Qué es Backbone.js?
Backbone es un framework que nos permite construir de una manera muy sencilla aplicaciones javascript de tipo SPA (Single Page App), implementando el patrón MVC (Modelo Vista Controlador).
Es aquí donde reside la gran potencia de Backbone. Hasta hace unos años era bastante complicado tener aplicaciones javascript que siguiesen cierto orden o estructura. Gracias a Backbone, podemos estructurar el código siguiendo el patrón MVC.
Dentro de nuestra aplicación:
- El Modelo gestionará los datos de la aplicación y controlará la persistencia de los mismos.
- La Vista se encarga de la interacción con el usuario y por lo tanto de mostrar los datos de la aplicación al mismo.
- El Controlador actuará de intermediario entre la capa de datos (el Modelo), y la representación de los mismos (la Vista). Se encargará de comunicar ambas capas.
3. ¿Cómo funciona?
Backbone se sostiene sobre una serie de piezas clave que nos permitirán, de una forma sencilla, construir cualquier aplicación:
- Modelos
- Vistas
- Colecciones
- Eventos
Dentro de una aplicación, los datos que ésta gestiona son manejados a través de ‘modelos’, los cuales nos permitirán operar sobre dichos datos, validarlos, procesarlos, etc. Al mismo tiempo, cada vez que realicemos una operación sobre el modelo, Backbone lanzará eventos para comunicar al resto de componentes qué tipo de operación se está realizando sobre éste. Así, de esta forma, podremos asociar dichos modelos a las ‘vistas’ para que, al mismo tiempo, reaccionen al cambio de estado del modelo y se muestren de una manera u otra en función del estado de éste. De esta manera se consigue separar 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 manejará nuestra aplicación.
Internamente, los modelos implementan un “map” 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 habitual es asociar un modelo a una vista de la aplicación, así ésta es capaz de reaccionar a dichos cambios de estado y cambiar según el estado de éste.
Para crear un modelo necesitamos extender de la clase ‘Model’ de Backbone mediante el uso de la palabra reservada ‘extend’. Con esto crearemos una clase de tipo Model 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 hemos creado un clase de tipo Model sin atributos, pero igualmente podemos crear una clase con una serie de atributos definidos por defecto. Por ejemplo, vamos a definir nuestra clase con los atributos ‘idCurso’ y ‘titulo’.
Para ello será necesario definir en el atributo ‘defaults’ un json con los atributos por defecto que el modelo contendrá cuando se instancie:
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 sus valores vacíos.
Si queremos crear una instancia pasándole los valores de nuestro curso en el constructor, bastará con 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 por el contrario no queremos crear la instancia pasándole los valores desde el constructor, podemos almacenar los datos en el modelo mediante la función ‘set’:
var Curso = Backbone.Model.extend({ defaults: { idCurso: '', titulo: '' } }); var curso = new Curso(); curso.set('idCurso', '1'); curso.set('idCurso', 'Primeros pasos con Backbone');
Para recuperar los valores del modelo usaremos la función ‘get’:
console.log(curso.get('idCurso')); console.log(curso.get('titulo'));
Son muchas las funciones que Backbone nos ofrece para gestionar los modelos de nuestra aplicación. Aquí están las más básicas, hay muchas más, pero será en otros tutoriales en donde profundizaremos más sobre estas funciones.
5. Vistas.
Las vistas nos permiten representar, a nivel de interfaz de usuario, los datos que son manejados por los modelos.
Normalmente su funcionamiento consiste en suscribirse a los eventos que los modelos lanzarán cuando su estado cambie. Una vez se ha capturado un evento, la vista mostrará la representación del modelo en el navegador.
Backbone no da soporte a plantillas HTML de forma directa, por lo que será necesario usar librerías de terceros para gestionar, de manera sencilla, las plantillas HTML. En futuros tutoriales veremos cómo usarlas.
Para crear una vista necesitamos extender de la clase ‘View’ de Backbone mediante el uso de la palabra reservada ‘extend’.
Cuando estamos definiendo una vista, definimos elemento HTML que va a representar la vista mediante el atributo ‘tagName’. Si no indicamos este atributo, por defecto la vista que se crea será un ‘div’.
var Curso = Backbone.View.extend({ tagName: "div” });
La gran potencia de Backbone reside en la programación orientada a eventos. Como hemos anticipado en la introducción, cada uno de sus componente son capaces de lanzar eventos que son escuchados por el resto, los cuales podrán suscribirse a los que les interese.
Dentro de las vistas seremos capaces de suscribir dicha vista a los eventos resultado de las posibles interacciones entre el usuario y dicha vista.
Para llevarlo a cabo tendremos que definir un atributo ‘events’ dentro de nuestra vista que contendrá el tipo de evento que escuchará dentro del trozo de HTML que nuestra vista representa:
var Curso = Backbone.View.extend({ tagName: "div", events: { "click .button": "greetings" }, greetings: function() { alert('Hola mundo'); } });
En el ejemplo anterior cuando se lance un evento ‘click’ sobre el elemento HTML que contiene nuestra vista, lanzará una llamada a la función ‘greetings’. Cabe destacar que se lanzará sólo en el caso de que la acción de click se haga sobre el elemento que contenga un .class llamado ‘button.’
Mediante el atributo ‘template’ definiremos la plantilla HTML asociada a nuestra vista. Como comentamos anteriormente, Backbone no nos proporciona un sistema de plantilla para representar plantillas HTML. Para ello usaremos 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 desarrollemos una aplicación con Backbone nos vamos a encontrar multitud de casos en los que tengamos que lidiar con colecciones de modelos. Y será en esos casos cuando nos surgirá la siguiente pregunta: ¿Cómo puedo representar y gestionar en mi aplicación una lista de modelos de manera sencilla?.
Para eso, Backbone nos proporciona una herramienta muy potente, las colecciones (Collection). Las colecciones son conjuntos ordenados de modelos y lo que nos permiten es gestionar dichos modelos mediante una multitud de funciones y utilidades.
Al igual que ocurre con los modelos, las colecciones también lanzan eventos al resto de elementos de nuestra aplicación cuando su estado, o el de los modelos que contiene, cambian.
Para crear una colección de modelos, al igual que en los apartados anteriores, usaremos la palabra reservada ‘extend’ para extender de la clase ‘Collection’ de Backbone. Que duda cabe que antes de crear una collection, necesitaremos 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 creada nuestra colección, Backbone nos ofrece una multitud de funciones a aplicar sobre la colección:
- add: añade 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; si no le pasamos otra colección lo que hace es eliminar su contenido.
- set: actualiza una colección de modelos con la colección de modelos que recibe por parámetro.
- get: recupera un modelo de una colección, 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: añade un nuevo modelo al final de la colección.
- pop: devuelve y elimina el último modelo de una colección.
7. Eventos.
Como hemos comentado anteriormente, Backbone nos proporciona un sistema de comunicación entre componentes mediante el uso de eventos, de formar que cada uno de los componentes de nuestra aplicación sea capaz de lanzar eventos y suscribirse a otros, si fuese necesario.
Para que un objeto lance un evento en nuestra aplicación, se hace uso de la función ‘trigger’, a la cual se le pasa el nombre del evento a lanzar y los posibles parámetros que viajarán con el evento.
Para que un objeto se pueda suscribir a un evento, será necesario lanzar la función ‘on’ sobre el objeto que lanza dicho evento, pasando el nombre del evento sobre el que se va a 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 que al objeto ‘greeting’ se le está dando la posibilidad de lanzar eventos (en tutoriales futuros profundizaremos más sobre este tema), y básicamente es él mismo el que está capturando el evento que está lanzando, mostrando un alert con el siguiente texto: ‘Se ha lanzado un evento’.
Ya hemos comentado anteriormente que tanto los modelos como las colecciones lanzan eventos, a los que nos podemos suscribir, cuando cambian su estado. Aquí os dejo alguno de ellos:
- ‘add’:cuando un modelo es añadido a una colección
- ‘remove’: cuando un modelo es eliminado de una colección
- ‘update’: cuando una colección se ha modificado
- ‘reset’: cuando una colección ha sido ‘reseteada’
- ‘sort’: cuando una colección se ha ordenado
- ‘change’: cuando el atributo de un modelo se ha modificado
- ‘change:[key]’: cuando un atributo especifico (determinado por ‘key’), se ha modificado
8. Conclusiones.
A día de hoy son muchos los frameworks javascript que tenemos disponibles para desarrollar aplicaciones SPA. Backbone.js es uno de los más usados y debido a su gran potencia y escalabilidad es uno de los que, multitud de grandes empresas, han seleccionado para desarrollar sus aplicaciones empresariales.
Como ya os he comentado a lo largo del tutorial, poco a poco, os iré posteando distintos tutoriales profundizando en cada una de las partes que componen este potente framework para finalmente desarrollar una aplicación completa que iremos mejorando.
Excelente, no conozco mucho backbone, soy mas de angular, pero se ve interesante, solo que no puedo dejar de verla como una libreria pequeña ya que no tiene soporte para plantillas y tienes que tirar de otra libreria como underscore, en fin la tendre en cuenta, ya que creo que prefiero backbone a react xD
Muchas gracias por tu comentario
[…] el anterior tutorial, ‘Introducción a Backbone.js’, hicimos una pequeña introducción sobre este potente framework javascript que nos permite […]
Muy buena introdución a Backbone. Explicado de una forma muy sencilla.
Felicidades por el tutorial!
Muchas gracias Jesus!
La próxima vez si haces un hola mundo para aquellos que venimos de jquery mejor.