Backbone.js Francisco Javier Velasco Arjona            @javivelasco
Qué es Backbone.js?Backbone.js gives structure to web applications by providingmodels with key-value binding and custom ev...
Por qué es necesario?Organiza la estructura de tu app.Simplifica la persistencia en el server-side.Desacopla el DOM de los...
MVC MV*Modelos que representan el dominio de la aplicación.Vistas que se suelen asociar a UI.Controladores que manejan la ...
ModelsSe genera un objeto modelo por extensión:                                            Backbone.js
ModelsPerfecta sincronía con servicios web RESTful:                                                Backbone.js
ModelsCustom & built-in events:                            Backbone.js
ModelsMuchos métodos útiles   defaults establece valores por defecto   clear elimina los atributos   toJSON formatea los a...
CollectionsLas colecciones manejan un conjunto de instancias de modelos                                                   ...
CollectionsPara iterar implementa funciones de Underscore.js Collection Events === Model Events                           ...
ViewsSe crean de forma similar a los modelos:                                           Backbone.js
ViewsSe sobreescribe render para renderizar la vista:                                                   Backbone.js
ViewsSe pueden crear eventos sobre la vista:Multiples motores de template:    Underscore, Mustache.js, Eco..              ...
ViewsSencilla implementación del observer pattern                                               Backbone.js
ViewsY con una colección                      Backbone.js
ViewsSe utilizan los eventos de las colecciones                                             Backbone.js
Router & historyVarias vistas centradas en el mismo elemento del DOMAl hacer el switch entre vistas, el navegador no cambi...
Router & historySe relacionan rutas con acciones                                   Backbone.js
Router & historyGracias al pushState se evita el hashbang! Se suele llamar a start incluyéndolo en un método del router A ...
Aspectos importantesZombie views: instanciar modelos, asociarlos a vistas sobre elmismo DOM element. La instancia de model...
RecursosOfficial Documentationhttp://backbonejs.org/Recipes with Backbone.js by Nick Gauthierhttp://recipeswithbackbone.co...
Example app  ¡A poner en práctica!
Arquitectura del sistema                           Backbone.js
RESTfulPosibles peticiones al server  Resource	     GET	                   POST	                   PUT	           DELETE	 ...
Project skeletonDisponible en github:https://github.com/javivelasco/betabeers-bbapp-skeleton (.git)                       ...
Gracias!Francisco Javier Velasco Arjona           @javivelasco
Upcoming SlideShare
Loading in …5
×

Taller backbone.js - Betabeers Córdoba (18/10/2012)

1,775 views

Published on

Javier Velasco imparte un completo taller sobre backbone.js y sus usos.
2º Betabeers Córdoba (18/10/2012)

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

No Downloads
Views
Total views
1,775
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
45
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Taller backbone.js - Betabeers Córdoba (18/10/2012)

  1. 1. Backbone.js Francisco Javier Velasco Arjona @javivelasco
  2. 2. Qué es Backbone.js?Backbone.js gives structure to web applications by providingmodels with key-value binding and custom events, collectionswith a rich API of enumerable functions, views withdeclarative event handling, and connects it all to your existingAPI over a RESTful JSON interface. http://backbonejs.org Backbone.js
  3. 3. Por qué es necesario?Organiza la estructura de tu app.Simplifica la persistencia en el server-side.Desacopla el DOM de los datos.Sincroniza modelos, colecciones con el DOM. “Get  your  truth  out  of  the  DOM”   Jeremy  Ashkenas   Backbone.js
  4. 4. MVC MV*Modelos que representan el dominio de la aplicación.Vistas que se suelen asociar a UI.Controladores que manejan la interacción.Backbone.js delega responsabilidades del controlador en lasvistas y convierte el controlador en el router Backbone.js
  5. 5. ModelsSe genera un objeto modelo por extensión: Backbone.js
  6. 6. ModelsPerfecta sincronía con servicios web RESTful: Backbone.js
  7. 7. ModelsCustom & built-in events: Backbone.js
  8. 8. ModelsMuchos métodos útiles defaults establece valores por defecto clear elimina los atributos toJSON formatea los atributos validate valida al modificar http://backbonejs.org/#Model Backbone.js
  9. 9. CollectionsLas colecciones manejan un conjunto de instancias de modelos Backbone.js
  10. 10. CollectionsPara iterar implementa funciones de Underscore.js Collection Events === Model Events Backbone.js
  11. 11. ViewsSe crean de forma similar a los modelos: Backbone.js
  12. 12. ViewsSe sobreescribe render para renderizar la vista: Backbone.js
  13. 13. ViewsSe pueden crear eventos sobre la vista:Multiples motores de template: Underscore, Mustache.js, Eco.. Backbone.js
  14. 14. ViewsSencilla implementación del observer pattern Backbone.js
  15. 15. ViewsY con una colección Backbone.js
  16. 16. ViewsSe utilizan los eventos de las colecciones Backbone.js
  17. 17. Router & historyVarias vistas centradas en el mismo elemento del DOMAl hacer el switch entre vistas, el navegador no cambia de URLPara eso ofrece Backbone.js el router.Until recently, hash fragments (#page) were used to providethese permalinks, but with the arrival of the History API, it’snow possible to use standard URLs (/page). Backbone.Routerprovides methods for routing client-side pages, andconnecting them to actions and events http://backbonejs.org Backbone.js
  18. 18. Router & historySe relacionan rutas con acciones Backbone.js
  19. 19. Router & historyGracias al pushState se evita el hashbang! Se suele llamar a start incluyéndolo en un método del router A tener en cuenta utilizando pushState API: El server debe ser capaz de generar la página Los eventos se deben disparar a mano Backbone.js
  20. 20. Aspectos importantesZombie views: instanciar modelos, asociarlos a vistas sobre elmismo DOM element. La instancia de modelo cambia, la vistase re-renderiza; es un gran problema.Memory leak: declarar constantemente instancias. Siempreque sea posible hay que instanciar los objetos una vez.RESTful applications: el mapping entre ids debe estar enarmonía. Buena integración, pero hay que pensarlo siempre.Otros... Backbone.js
  21. 21. RecursosOfficial Documentationhttp://backbonejs.org/Recipes with Backbone.js by Nick Gauthierhttp://recipeswithbackbone.com/Developing Backbone Applications by Addy Osmanihttp://addyosmani.github.com/backbone-fundamentals/Backbone.js Patterns by Rico Sta Cruzhttp://ricostacruz.com/backbone-patterns/ Backbone.js
  22. 22. Example app ¡A poner en práctica!
  23. 23. Arquitectura del sistema Backbone.js
  24. 24. RESTfulPosibles peticiones al server Resource   GET   POST   PUT   DELETE   /films   Obtener   Crear  nuevo   -­‐-­‐   -­‐-­‐   lista  de  films   film   /films/id   Obtener  un   -­‐-­‐   Modificar   Eliminar  un   film   un  film   film   Backbone.js
  25. 25. Project skeletonDisponible en github:https://github.com/javivelasco/betabeers-bbapp-skeleton (.git) Backbone.js
  26. 26. Gracias!Francisco Javier Velasco Arjona @javivelasco

×