Desarrollo móvil multiplataforma
 

Tutorial de Backbone.js

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

  1. Pedro December 22, 2011

    Muchas Gracias por esta serie de tutoriales, ayuda tener toda esta informacion y en castellano

  2. German March 13, 2012

    Excelente información, de verdad me ha ayudado mucho, un abrazo!!!

  3. sebastian March 27, 2012

    Muchas gracias por compartir tus conocimientos . Seguire tus tutoriales

  4. Edward April 9, 2012

    Estoy empezando a trabajar con backbone y esto ha sido un gran aporte!, muchas gracias

  5. Javier June 23, 2012

    Felicitaciones, un tutorial de gran simplicidad y calidad.

  6. Luis Manuel Ruiz June 27, 2012

    Muy buen tuto, muchas grácias.

  7. Antonio July 1, 2012

    Son pocas las páginas en español, este tutorial es un gran aporte. Gracias miles!

  8. Pablo July 8, 2012

    Para mi es un descubrimiento, gracias por el trabajo y por compartirlo, seguiré el tutorial de cerca.

    Abrazos!

  9. Guillermo July 15, 2012

    Alfonso, mil gracias por el tutorial, hay muy poca documentacion en español !!!

  10. Cristian Martín July 25, 2012

    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.

  11. Axel September 7, 2012

    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/

    • Alfonso Marín September 10, 2012

      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.

  12. alegg September 19, 2012

    Me ha servido mucho este material. Como dices, no se encuentran muchos tutoriales de calidad como este.

  13. 10 posts de Backbone.js que no debes perderte « Silvercorp October 9, 2012

    […] Tutorial de Backbone.js […]

  14. Jesús S. Rubio November 7, 2012

    Gracias por esta introducción a backbone en español; me ha ayudado a comprender la forma de desarrollar con ella.

  15. Ale Prieto March 3, 2013

    ¡genial! ¡muchas gracias!

  16. Cristian April 3, 2013

    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!

  17. Luis May 4, 2013

    Impresionante , esta librería aparecio en mitad de un desarrollo de WordPress y me había asustado.

  18. DAW | Backbone.JS December 17, 2013

    […] https://alfonsomarin.com/desarrollo-web/tutoriales/backbonejs […]

  19. Nicolas December 20, 2013

    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.

  20. Cómo dar tus primeros pasos con BackboneJS | Mi librería JavaScript August 16, 2014

    […] Tutorial en español BackboneJS (Alfonso Marín) […]