PDF de programación - Manual de BackboneJS

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Manual de BackboneJS

Manual para entender el framework Javascript BackboneJS y aprender a usarlo para el
desarrollo de proyectos basados en patrones de diseño con Modelos, Vistas y otra serie de
utilidades esenciales en aplicaciones web con uso intensivo de Javascript.

Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:

Erick Ruiz de Chavez
Desarrollador web, Geek "de hueso
colorado", Marido feliz.
http://erickrdch.com/
(7 capítulos)

Miguel Angel Alvarez
Director de DesarrolloWeb.com y EscuelaIT
http://www.desarrolloweb.com
(3 capítulos)

Manual de BackboneJS: http://www.desarrolloweb.com/manuales/manual-backbonejs.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

1

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Qué es BackboneJS
BackboneJS es una librería Javascript para programación del lado del cliente que nos ofrece diferentes
ventajas y utilidades en la programación, atendiendo a patrones, de una manera flexible.


BackboneJS es una librería para el desarrollo de sitios web, principalmente usada para aplicaciones web con bastante
interacción con el cliente, donde se hace un uso intensivo de Javascript, Ajax, etc. Te permite desarrollar en Javascript
atendiendo a patrones, con una variante del paradigma MVC, el mismo que se ha introducido con fuerza en la programación
del lado del servidor y que, desde hace menos tiempo, viene empezando a ser costumbre en el desarrollo del lado del cliente.



Se trata de una heramienta muy indicada en aplicaciones de una sola página, aunque también es útil para otros tipos de sitios,
multipágina, donde se encuentran interfaces de usuario avanzadas. Facilita la ordenación del código y la sincronización de las
vistas con los datos de la aplicación. Todo ello redunda en una programación más modularizada y con mayor separación
entre las partes de la aplicación, como presentación, datos, etc.
Utilizando palabras sencillas, BackboneJS es un conjunto de objetos que tienen métodos (o funciones, si lo prefieres llamar
así) que van a proveer de estructura a nuestro código, facilitar el trabajo con datos, vistas para producir nuestro HTML, las
interacciones para implementar comportamientos que deba realizar frente a acciones del usuario y los servicios para
comunicar con cualquier tecnología que usemos del lado del servidor, ya sea NodeJS, PHP, Ruby, .NET, etc.
En definitiva, es un paquete de utilidades que nos permite hacer una programación de mayor calidad y aplicaciones web del
lado del cliente más fácilmente mantenibles, sobre todo es útil cuando ya nos encontramos ante aplicaciones web de cierta
complejidad.

Nota: Este artículo y los siguientes están extractados del hangout Conocer Backbone.js #BackboneIO que nos ofreció Erick Ruiz de Chavez
en uno de los eventos online de DesarrolloWeb.com.

Puedes encontrar el sitio oficial de BackboneJS en backbonejs.org

Facilidades de BackboneJS
Tal como se definen ellos mismos, Backbone.js ofrece una estructura para aplicaciones que hace uso intensivo de Javascript
y que provee de modelos llave / valor enlazables mediante eventos, colecciones con la posiblidad de realizar diferentes
utilidades por medio de una API, vistas con manejadores de eventos declarativos y conexión a interfaces REST nuevas o ya
disponibles anteriormente.
De manera resumida, las facilidades de la librería Backbone son las siguientes:

• Permite la programación atendiendo al paradigma MV...C? (Existe un debate si es MVR porque en realidad no son

controladores sino "Routeadores").

• Te ayuda a crear estructuras bien definidas para los datos de tu aplicación y facilita la creación de eventos cuando
los datos cambian. Esto permite olvidarnos de la revisión de las variables o la propagación de los cambios en la
aplicación cuando los datos de dichas estructuras cambian.
Simplifica el uso de vistas, que te ayudan a pintar o "renderizar" interfaces de usuario en la página.

•
• Permite el uso de colecciones de modelos, en los que tendrás acceso a diferentes operaciones sobre los mismos,

como filtrar, buscar, recibir notificaciones cuando cambien, etc.
Simplifica y ayuda a ordenar el código de las peticiones AJAX para realizar solicitudes al servidor.

•
• Etc.

Manual de BackboneJS: http://www.desarrolloweb.com/manuales/manual-backbonejs.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

2

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Nota: Para los que no lo conozcan, MVC es un patrón de desarrollo en el que se trata de separar las responsabilidades del código fuente de
las aplicaciones, separándolo en diversas capas o partes, que son los Modelos (para trabajar con los datos), Vistas (código que trabaja con la
presentación) y los Controladores (para implementar la lógica del negocio, es decir, la forma en la que interaccionan tus vistas, o lo que ve el
usuario, con tus modelos, o tus datos).

Qué tipo de librería Javascript es Backbone.js
Quizás merezca la pena explicar dónde encaja Backbone en el panorama de los frameworks y librerías Javascript para que las
personas que llegan nuevas aquí puedan despejar una de las preguntas típicas al conocer Backbone.js.
¿Librería o framework? Se trata de un API de programación, por lo que podemos llamarlo librería sin lugar a equivocación.
Además, te permite trabajar con una variante del MVC, por lo que también te impone una manera específica de organizar tu
código, lo que es una de las características de los frameworks, sin embargo, como veremos, Backbone es bastante flexible,
permitiendo aplicarlo a un sitio web completo o a un único módulo, algo que quizás nos aleja de la idea de framework.
No obstante, esto no es más que una nomenclatura. Lo que debe quedar claro es que no viene a sustituir a otras librerías del
lado del cliente como pueden ser jQuery, Mootools, Ext.js... sino que viene a aportar algo adicional que éstas no ofrecen, y
que es fundamental para crear código más mantenible en arquitecturas web medianamente complejas. BackboneJS en sí es
un paquete que tiene a jQuery como dependencia, o en otras palabras, su construcción está basada en jQuery, por lo que se
puede entender que no viene a sustituir, sino a complementar.
Entonces, BackboneJS lo podemos considerar como una nueva herramienta que viene a facilitarnos el desarrollo y la cual
tenemos que aprender para hacer desarrollo de alto nivel, útil en cualquier proyecto, pues se trata de un paquete de ventajas
adicionales al programar en Javascript.

Dónde usar BackboneJS
Lo puedes usar donde te apetezca, nunca está de más implementar mecanismos que te ayuden a crecer si ese proyecto va
evolucionando, sin embargo, BackboneJS es una librería especialmente indicada para el uso en aplicaciones web que
hagan un uso intensivo de Javascript.
¡No lo uses para asignar un comportamiento a un botón! o en cualquier página donde piensas tener pocos elementos con
interacción con el usuario y donde las funciones manejadoras sean bastante sencillas. El usar Backbone aporta un poco de
complejidad al desarrollo, por lo que no sería tan adecuado para pequeños proyectos o páginas bastante estáticas. Si tu
código es muy pequeño y lo puedes tener en unas decenas de líneas de código, no se recomendaría usar Backbone.
Usa BackboneJS en una aplicación web en la que ya se entiende que vas a tener bastante lógica de negocio, bastante
interacción, bastantes métodos y eventos trabajando. Allí ya es un buen entorno donde sería excelente usar Backbone.js. Es
útil también en cualquier página, que aun siendo sencilla, tiene los mismos datos y se muestran en varios sitios distintos,
replicados en diversos elementos, ya que te permite mantener la sincronización con todos esos datos de una manera sencilla
y prácticamente automática, sin que tengas que estar revisando constantemente cuándo cambian tus datos para actualizarlos
en todos los lugares donde aparecen.

Conclusión
Creo que con lo visto hasta el momento tendríamos una buena idea de lo que es BackboneJS, aunque seguro que te habrás
quedado con ganas de más y sobre todo con interés de ver otros artículos más técnicos en los que nos metamos más en
materia. En breve estaremos produciendo este contenido.
Pero recuerda, este artículo está extractado de un hangout que realizamos en DesarrolloWeb.com y que tienes disponible en
el vídeo "Conocer BackboneJS". Fue un evento realizado en directo que nos ofreció mucho más contenido interesante y de
utilidad. En este artículo solo hemos cubierto hasta el minuto 22 de ese programa, así que si te interesa seguir ya mismo, te
recomiendo prestarle atención.
Nosotros vamos a seguir transcribiendo el contenido presentado en este hangout, así que si deseas saber más también
puedes continuar esta lectura con el artículo Los eventos en BackboneJS.

Artículo por Erick Ruiz de Chavez

Manual de BackboneJS: http://www.desarrolloweb.com/manuales/manual-backbonejs.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

3

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Introducción a los Eventos en BackboneJS
Repaso conceptual a lo que son los eventos y las posibilidades que nos ofrecen en BackboneJS.


En este segundo artículo para hablaros del framework Javascript BackboneJS, vamos a introducir un concepto fundamental
para entenderlo, los eventos. De momento nos centraremos más bien en la parte más teórica, aclarando conceptos y
explorando las posibilidades que nos abre Backbone para los desarrolladores.



Recuerda que puedes ver la primera entrega de este artículo en Qué es BackboneJS y también que estos textos los estamos
extractando de los hangouts que se emitieron en Desa