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

1. Backbone.js
Francisco Javier Velasco Arjona
@javivelasco

2. 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
Backbone.js

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. 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
Backbone.js

5. Models
Se genera un objeto modelo por extensión:
Backbone.js

6. Models
Perfecta sincronía con servicios web RESTful:
Backbone.js

7. Models
Custom & built-in events:
Backbone.js

8. 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
Backbone.js

9. Collections
Las colecciones manejan un conjunto de instancias de modelos
Backbone.js

10. Collections
Para iterar implementa funciones de Underscore.js
Collection Events === Model Events
Backbone.js

11. Views
Se crean de forma similar a los modelos:
Backbone.js

12. Views
Se sobreescribe render para renderizar la vista:
Backbone.js

13. Views
Se pueden crear eventos sobre la vista:
Multiples motores de template:
Underscore, Mustache.js, Eco..
Backbone.js

14. Views
Sencilla implementación del observer pattern
Backbone.js

15. Views
Y con una colección
Backbone.js

16. Views
Se utilizan los eventos de las colecciones
Backbone.js

17. 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
Backbone.js

18. Router & history
Se relacionan rutas con acciones
Backbone.js

19. Router & history
Gracias 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. Aspectos importantes
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... Backbone.js

21. Recursos
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/
Backbone.js

22. Example app
¡A poner en práctica!

23. Arquitectura del sistema
Backbone.js

24. RESTful
Posibles 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. Project skeleton
Disponible en github:
https://github.com/javivelasco/betabeers-bbapp-skeleton (.git)
Backbone.js

26. Gracias!
Francisco Javier Velasco Arjona
@javivelasco