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
   

   View Slide

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
   

   View Slide

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  
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

23. Backbone.js
    Arquitectura del sistema
    

    View Slide

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
    

    View Slide

25. Backbone.js
    Project skeleton
    Disponible en github:
    https://github.com/javivelasco/betabeers-bbapp-skeleton (.git)
    

    View Slide

26. Gracias!
    Francisco Javier Velasco Arjona
    @javivelasco
    

    View Slide