Este documento describe Backbone.js, una librería JavaScript que permite organizar mejor el código del lado cliente. Proporciona modelos, colecciones y vistas con capacidad de manejo de eventos. Se usa comúnmente para aplicaciones de una sola página donde el lado cliente interactúa con un servidor RESTful.

1. Oscar Gensollen Arroyo
Arquitecto de Software
Consultor Senior
www.formativa.com.pe
oscar.gensollen@formativa.com.pe
@oscargensollen

2.  ¿Qué es Backbone.js?
 Cuando usarlo
 Definición de modelos: atributos, eventos
 Definición de vistas: instanciación, renderización
 Uso de plantillas
 Manejo de colecciones

3.  Es una librería basad en JavaScript que permite ordenar mejor el código del lado
cliente
 Backbone no es:
 Un framework
 MVC
 Proporciona
 Modelos, con capacidad para binding y manejo de eventos
 Colecciones, con una API muy completa
 Vistas, con manejo de eventos
 Se conecta al servidor mediante una interface REST

4.  Para aplicaciones con interfaces complejas
 SPAs (Single Page Applications)
 Gmail, Facebook, Twitter
 Ventajas:
 Rápido (experiencia aplicación de escritorio)
 Muy interactivo.
 Escalable.
 Retos:
 Indexación en motores de búsqueda.
 Testing.
 Seguridad.

5.  Lado Cliente:
 Router(s)
 View(s)
 Model(s)
 Collection(s)
 Lado Servidor:
 Endpoints RESTful
JSON

6. View
Model
Collection
Router
DOM
Events

7.  Underscore.js
 jQuery

8. 1. Lo descargamos desde http://backbonejs.org/
2. Referenciar las dependencias y la librería de Backbone
3. Se pueden hacer pruebas sencillas con entorno como jsFiddle (entorno
preconfigurado http://jsfiddle.net/ynkJE/)

9.  Un modelo representa a una entidad sobre la cual queremos almacenar datos.
 Es el núcleo de nuestra aplicación.
 Manejan estado por medio de atributos.
 También pueden manejar lógica o comportamiento.
 Se comunican por medio de eventos
 Tienen un ciclo de vida: se crean, se guarda estado, se validan, se sincronizan, se
destruyen…

10.  Directamente
var Auto – new Backbone.Model();
 Definiendo un tipo personalizado:
var Auto = Backbone.Model.extend({
propiedades de instancia
},
{
propiedades de clase
}
);

11.  Creando la instancia del modelo:
var auto1 = new Backbone.Model({
marca: „Toyota‟,
año: 2012
});

12.  Un modelo puede provocar un evento cuando su estado cambia.
 Hay que suscribirse al evento ‘change’ del modelo o de una propiedad específica:
auto1.on(“change”,function () {});
auto1.on(“change:marca, function () {});
 Se pueden definir eventos personalizados

13.  Las vistas permiten organizar de manera lógica el contenido a mostrar.
 Estan soportadas por modelos.
 Manejan los eventos de los modelos y del DOM.
 Una vista se define usando Backbone.View:
var vistaPrincipal = Backbone.View.extend({
// propiedades
});
 Una vista tiene un elemento del DOM asociado, denominado ‘el’

14. var vistaPrincipal = Backbone.View.extend({
tagName: „tr‟,
id: „detalle‟,
className: „fila‟,
attributes: {
„modelo‟: „corolla‟
}
});
 La instanciación se hace igual que los modelos:
var vista1 = new vistaPrincipal();

15.  Es común aprovechar la instanciación de una vista para pasarle el modelo:
var principal = new VistaPrincipal({
model: auto1
});
 También se pueden pasar otras propiedades como TagName, id, el, className, etc

16.  Las vistas tienen una función denominada ‘Render’ que controla su pintado en el
DOM:
var vista1 = Backbone.View.extend({
render: function() {
this.$el.html(„contenido personalizado‟);
return this;
}
});

17. <script id=“posicion-template” type=“text/html”>
<p>Latitud: <%= latitud %></p>
<Longitud: <%= longitud %></p>
</script>
…
var data = { latitud: -30, longitud: 120 };
var plantilla = $(„#posicion-template‟).html();
this.$el.html(_.template(plantilla,data);

18.  Una colección es un contenedor de modelos de un mismo tipo.
 Se comporta como un array.
 Interactúa con el servidor para recuperación y almacenamiento.