Meet Backbone.js

Slides for my workshop at Betabeers Córdoba, AN. It's an overview of Backbone.js and it's explained with an example application available at Github. Enjoy

Transcript

1. Backbone.js Francisco Javier Velasco Arjona @javivelasco
2. Backbone.js Qué es Backbone.js? Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. http://backbonejs.org
3. Backbone.js 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  
4. Backbone.js 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 las vistas y convierte el controlador en el router
5. Backbone.js Models Se genera un objeto modelo por extensión:
6. Backbone.js Models Perfecta sincronía con servicios web RESTful:
7. Backbone.js Models Custom & built-in events:
8. Backbone.js Models Muchos métodos útiles defaults establece valores por defecto clear elimina los atributos toJSON formatea los atributos validate valida al modificar http://backbonejs.org/#Model
9. Backbone.js Collections Las colecciones manejan un conjunto de instancias de modelos
10. Backbone.js Collections Para iterar implementa funciones de Underscore.js Collection Events === Model Events
11. Backbone.js Views Se crean de forma similar a los modelos:
12. Backbone.js Views Se sobreescribe render para renderizar la vista:
13. Backbone.js Views Se pueden crear eventos sobre la vista: Multiples motores de template: Underscore, Mustache.js, Eco..
14. Backbone.js Views Sencilla implementación del observer pattern
15. Backbone.js Views Y con una colección
16. Backbone.js Views Se utilizan los eventos de las colecciones
17. Backbone.js Router & history Varias vistas centradas en el mismo elemento del DOM Al hacer el switch entre vistas, el navegador no cambia de URL Para eso ofrece Backbone.js el router. Until recently, hash fragments (#page) were used to provide these permalinks, but with the arrival of the History API, it’s now possible to use standard URLs (/page). Backbone.Router provides methods for routing client-side pages, and connecting them to actions and events http://backbonejs.org
18. Backbone.js Se relacionan rutas con acciones Router & history
19. Backbone.js Gracias al pushState se evita el hashbang! Router & history 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
20. Backbone.js Zombie views: instanciar modelos, asociarlos a vistas sobre el mismo DOM element. La instancia de modelo cambia, la vista se re-renderiza; es un gran problema. Memory leak: declarar constantemente instancias. Siempre que sea posible hay que instanciar los objetos una vez. RESTful applications: el mapping entre ids debe estar en armonía. Buena integración, pero hay que pensarlo siempre. Otros... Aspectos importantes
21. Backbone.js Official Documentation http://backbonejs.org/ Recipes with Backbone.js by Nick Gauthier http://recipeswithbackbone.com/ Developing Backbone Applications by Addy Osmani http://addyosmani.github.com/backbone-fundamentals/ Backbone.js Patterns by Rico Sta Cruz http://ricostacruz.com/backbone-patterns/ Recursos
22. Example app ¡A poner en práctica!
23. Backbone.js Arquitectura del sistema
24. Backbone.js RESTful Resource   GET   POST   PUT   DELETE   /films   Obtener   lista  de  films   Crear  nuevo   film   -­‐-­‐   -­‐-­‐   /films/id   Obtener  un   film   -­‐-­‐   Modificar   un  film   Eliminar  un   film   Posibles peticiones al server
25. Backbone.js Project skeleton Disponible en github: https://github.com/javivelasco/betabeers-bbapp-skeleton (.git)
26. Gracias! Francisco Javier Velasco Arjona @javivelasco