INTRODUCCIÓN A BACKBONE

Oscar Gensollen Arroyo

Arquitecto de Software

Consultor Senior

www.formativa.com.pe

oscar.gensollen@formativa.com.pe

@oscargensollen

AGENDA ¿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

¿QUÉ ES BACKBONE? 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

CUANDO USARLO 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.

APLICACION BACKBONE.JS TIPICA

Lado Cliente: Router(s) View(s) Model(s) Collection(s)

Lado Servidor: Endpoints RESTful

JSON

COMPONENTES DE BACKBONE.JS

View

Model

Collection

RouterDOM

EventsEve

nts

Events

Events

DEPENDENCIAS Underscore.js

jQuery

EMPEZANDO CON BACKBONE1. 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/)

DEFINICIÓN DE MODELOS: ATRIBUTOS, EVENTOS 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…

CREANDO UN MODELO Directamente

var Auto – new Backbone.Model();

Definiendo un tipo personalizado:

var Auto = Backbone.Model.extend({

propiedades de instancia

},

{

propiedades de clase

}

);

INSTANCIANDO UN MODELO Creando la instancia del modelo:

var auto1 = new Backbone.Model({

marca: ‘Toyota’,

año: 2012

});

EVENTOS DE UN MODELO 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

DEFINICIÓN DE VISTAS: INSTANCIACIÓN, RENDERIZACIÓN (1) 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’

DEFINICIÓN DE VISTAS: INSTANCIACIÓN, RENDERIZACIÓN (2)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();

INSTANCIACION DE VIEWS 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

RENDERIZACION DE VISTAS 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;

}

});

PLANTILLAS DE UNDERSCORE<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);

MANEJO DE COLECCIONES

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.