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:
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
Muchas Gracias por esta serie de tutoriales, ayuda tener toda esta informacion y en castellano
Excelente información, de verdad me ha ayudado mucho, un abrazo!!!
Muchas gracias por compartir tus conocimientos . Seguire tus tutoriales
Estoy empezando a trabajar con backbone y esto ha sido un gran aporte!, muchas gracias
Felicitaciones, un tutorial de gran simplicidad y calidad.
Muy buen tuto, muchas grácias.
Son pocas las páginas en español, este tutorial es un gran aporte. Gracias miles!
Para mi es un descubrimiento, gracias por el trabajo y por compartirlo, seguiré el tutorial de cerca.
Abrazos!
Alfonso, mil gracias por el tutorial, hay muy poca documentacion en español !!!
Muchas gracias por este tutorial. Me había medio leído la documentación de Backbone y no había sacado nada en claro, pero con tu trabajo he visto la luz.
Está genial el tutorial, muy completo.
Creo que les puede interesar una presentación sobre backbone que preparé con un ejemplo de cómo hacer una aplicación de chat
http://axelhzf.com/chat/
Gracias Axel por la aportación, tiene una pinta tremenda. Yo estoy intentando sacar tiempo para hacer una aplicación de ejemplo, pero todavía estoy en ello.
Me ha servido mucho este material. Como dices, no se encuentran muchos tutoriales de calidad como este.
Gracias por esta introducción a backbone en español; me ha ayudado a comprender la forma de desarrollar con ella.
¡genial! ¡muchas gracias!
Excelente tutorial, la verdad es uno de los mejores que he encontrado en español. Lo uso como recordatorio al mismo tiempo que desarrollo, por lo que me es muy útil..
Gracais!
Impresionante , esta librería aparecio en mitad de un desarrollo de WordPress y me había asustado.
Muchas gracias, es uno de los mejores tutoriales que vi aunque algunas cositas todavía no me cierran. Vengo muy acostumbrado de angular y backbone se me hace muchísimo mas trabajoso.