Tutorial de Backbone.js

Llevo un tiempo analizando y aprendiendo a trabajar con la librería Backbone.js y me parece una librería estupenda para desarrollar aplicaciones JavaScript. El mayor problema que estoy encontrando es la falta de tutoriales y documentación al respecto, y por ese motivo he decido crear un pequeño tutorial donde se analice el funcionamiento de la librería. Este tutorial lo iré desarrollando poco a poco en distintas entradas, intentando resaltar los aspectos más importantes y analizando cada uno de sus componentes.

Introducción

Backbone es una excelente librería para construir aplicaciones JavaScript que nos ofrece la posibilidad de estructurar nuestro código siguiendo el patrón MVC (Modelo, Vista, Controlador). Como su nombre indica, el objetivo de esta librería es formar parte de la columna vertebral de nuestra aplicación ofreciéndonos únicamente la funcionalidad necesaria para que puedas estructurarla correctamente. De hecho, esa es una de sus grandes virtudes pues se centra únicamente en proporcionarte conceptos básicos como modelos, eventos, colecciones, vistas, routing y persistencia. En tan solo 4KB Backbone proporciona un marco de trabajo estupendo que podremos utilizar como complemento a jQuery.

Una librería JavaScript como jQuery es extremadamente útil para seleccionar y modificar elementos del DOM, uso homogéneo de AJAX o generación de efectos y animaciones, pero a la hora de hacer una aplicación web de una única página donde gran parte de la funcionalidad reside en código JavaScript, rápidamente descubrirás que no es suficiente. En cuanto incluyas ciertas funcionalidades a tu aplicación te verás sobrepasado por una gran pila de selectores y callbacks sin estructura alguna que estarán lidiando directamente con los elementos DOM.

Como veremos, en Backbone los datos los introducimos en modelos que podremos crear, validar, destruir y salvar en el servidor, ofreciendo un conjunto de eventos que se dispararán cuando el modelo cambie. También se podrán asociar a vistas que serán notificadas de dichos cambios para que puedan actualizar su contenido; agruparemos los modelos en colecciones y podremos implementar las distintas funcionalidades de nuestra aplicación utilizando routers que nos mapearán distintas rutas de aplicación con funciones específicas.

Descarga y puesta a punto

La única dependencia que tiene Backbone es underscore.js, una librería llena de utilidades y funciones JavaScript de propósito general creada por la misma gente de Backbone, y entre las funcionalidades que ofrece se encuentran la manipulación de arrays, el enlazado de funciones (binding) o templates JavaScript. Por otra parte, Backbone no realiza ninguna operación de manejo y modificación del DOM o tratamiento de AJAX,  por lo que las vistas delegan dichas funcionalidades a librerías como jQuery o Zepto.js.

Por ese motivo, para la realización de los distintos ejemplos de este tutorial deberíamos crear una página HTML que se encargase de incorporar todos estos elementos:

<script type="text/javascript" src="js/jquery.js">// <![CDATA[
mce:0
// ]]></script><script type="text/javascript" src="js/underscore.js">// <![CDATA[
mce:1
// ]]></script><script type="text/javascript" src="js/backbone.js">// <![CDATA[
mce:2
// ]]></script><script type="text/javascript" src="js/examples.js">// <![CDATA[
mce:3
// ]]></script>

Como podrás imaginar, en el fichero examples.js será donde vayamos introduciendo nuestro propio código.

Partes de este tutorial

Como he comentado al principio, este tutorial lo voy a desarrollar a lo largo de varias entradas, una por cada tema a tratar. A continuación os muestro los distintos temas que abordaremos:

1. Eventos
2. Modelos
3. Colecciones
4. Vistas
5. Routers
6. Sincronización y persistencia

Al final del tutorial intentaré abordar la creación de una aplicación completa que pudiera de servir como ejemplo práctico, pero no me comprometo a ello 🙂

Actualizaciones

Este tutorial se basa en la versión 0.5.3 de Backbone. Mi intención es ir actualizándolo según vayan incluyendo nuevas funcionalidades en versiones posteriores.

19 – 08 – 2012 – Novedades en Backbone 0.9.2