Oscar Gensollen Arroyo
Arquitecto de Software
Consultor Senior
www.formativa.com.pe
oscar.gensollen@formativa.com.pe
@osca...
 ¿Qué es Backbone.js?
 Cuando usarlo
 Definición de modelos: atributos, eventos
 Definición de vistas: instanciación, ...
 Es una librería basad en JavaScript que permite ordenar mejor el código del lado
cliente
 Backbone no es:
 Un framewor...
 Para aplicaciones con interfaces complejas
 SPAs (Single Page Applications)
 Gmail, Facebook, Twitter
 Ventajas:
 Rá...
 Lado Cliente:
 Router(s)
 View(s)
 Model(s)
 Collection(s)
 Lado Servidor:
 Endpoints RESTful
JSON
View
Model
Collection
Router
DOM
Events
 Underscore.js
 jQuery
1. Lo descargamos desde http://backbonejs.org/
2. Referenciar las dependencias y la librería de Backbone
3. Se pueden hace...
 Un modelo representa a una entidad sobre la cual queremos almacenar datos.
 Es el núcleo de nuestra aplicación.
 Manej...
 Directamente
var Auto – new Backbone.Model();
 Definiendo un tipo personalizado:
var Auto = Backbone.Model.extend({
pro...
 Creando la instancia del modelo:
var auto1 = new Backbone.Model({
marca: „Toyota‟,
año: 2012
});
 Un modelo puede provocar un evento cuando su estado cambia.
 Hay que suscribirse al evento ‘change’ del modelo o de una...
 Las vistas permiten organizar de manera lógica el contenido a mostrar.
 Estan soportadas por modelos.
 Manejan los eve...
var vistaPrincipal = Backbone.View.extend({
tagName: „tr‟,
id: „detalle‟,
className: „fila‟,
attributes: {
„modelo‟: „coro...
 Es común aprovechar la instanciación de una vista para pasarle el modelo:
var principal = new VistaPrincipal({
model: au...
 Las vistas tienen una función denominada ‘Render’ que controla su pintado en el
DOM:
var vista1 = Backbone.View.extend({...
<script id=“posicion-template” type=“text/html”>
<p>Latitud: <%= latitud %></p>
<Longitud: <%= longitud %></p>
</script>
…...
 Una colección es un contenedor de modelos de un mismo tipo.
 Se comporta como un array.
 Interactúa con el servidor pa...
Upcoming SlideShare
Loading in …5
×

Introducción a Backbone

776 views

Published on

Introducción a la librería Backbone.js, la cual permite implementar aplicaciones mas interactivas, creando Modelos, Vistas, Colecciones y Routers del lado cliente

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
776
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
16
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Demo 0:Mostrarinteracción con Trello
  • Demo 1: creando un modelodirectamente y usando extendDemo 1: propiedades de instancia versus propiedades de claseDemo 2: usando initializeDemo 4: usando ‘set’ y ‘get’
  • Demo 5: suscribirse al evento change de un modeloDemo 6: mostrarcomocrear un eventopersonalizado (mod 2, minuto 7)
  • Demo 7: crearuna vista quecree un elementDemo 8: crearuna vista que se mapee a un elementoexistente (mod 3 minute 3)
  • Demo 9: instanciaruna vista y pasarle un modelo
  • Demo 10: uso de view con model y eventos, se crea un temporizadorquemuestra la hora actual, segundo a segundo
  • Demo 11: uso de template (mod 4 minuto 2:38)
  • Demo 12: crearunacolección
  • Introducción a Backbone

    1. 1. Oscar Gensollen Arroyo Arquitecto de Software Consultor Senior www.formativa.com.pe oscar.gensollen@formativa.com.pe @oscargensollen
    2. 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. 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. 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. 5.  Lado Cliente:  Router(s)  View(s)  Model(s)  Collection(s)  Lado Servidor:  Endpoints RESTful JSON
    6. 6. View Model Collection Router DOM Events
    7. 7.  Underscore.js  jQuery
    8. 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. 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. 10.  Directamente var Auto – new Backbone.Model();  Definiendo un tipo personalizado: var Auto = Backbone.Model.extend({ propiedades de instancia }, { propiedades de clase } );
    11. 11.  Creando la instancia del modelo: var auto1 = new Backbone.Model({ marca: „Toyota‟, año: 2012 });
    12. 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. 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. 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. 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. 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. 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. 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.

    ×