Introducción a Backbone
-
Upload
oscar-gensollen -
Category
Technology
-
view
327 -
download
6
description
Transcript of Introducción a Backbone
![Page 1: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/1.jpg)
INTRODUCCIÓN A BACKBONE
Oscar Gensollen Arroyo
Arquitecto de Software
Consultor Senior
www.formativa.com.pe
@oscargensollen
![Page 2: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/2.jpg)
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
![Page 3: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/3.jpg)
¿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
![Page 4: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/4.jpg)
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.
![Page 5: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/5.jpg)
APLICACION BACKBONE.JS TIPICA
Lado Cliente: Router(s) View(s) Model(s) Collection(s)
Lado Servidor: Endpoints RESTful
JSON
![Page 6: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/6.jpg)
COMPONENTES DE BACKBONE.JS
View
Model
Collection
RouterDOM
EventsEve
nts
Events
Events
![Page 7: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/7.jpg)
DEPENDENCIAS Underscore.js
jQuery
![Page 8: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/8.jpg)
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/)
![Page 9: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/9.jpg)
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…
![Page 10: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/10.jpg)
CREANDO UN MODELO Directamente
var Auto – new Backbone.Model();
Definiendo un tipo personalizado:
var Auto = Backbone.Model.extend({
propiedades de instancia
},
{
propiedades de clase
}
);
![Page 11: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/11.jpg)
INSTANCIANDO UN MODELO Creando la instancia del modelo:
var auto1 = new Backbone.Model({
marca: ‘Toyota’,
año: 2012
});
![Page 12: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/12.jpg)
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
![Page 13: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/13.jpg)
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’
![Page 14: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/14.jpg)
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();
![Page 15: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/15.jpg)
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
![Page 16: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/16.jpg)
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;
}
});
![Page 17: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/17.jpg)
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);
![Page 18: Introducción a Backbone](https://reader034.fdocumento.com/reader034/viewer/2022052410/54922afdb4795927058b5700/html5/thumbnails/18.jpg)
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.