Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meet Backbone.js

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

Javier Velasco

October 18, 2012
Tweet

More Decks by Javier Velasco

Other Decks in Programming

Transcript

  1. Backbone.js
    Francisco Javier Velasco Arjona
    @javivelasco

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  23. Backbone.js
    Arquitectura del sistema

    View full-size 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 full-size slide

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

    View full-size slide

  26. Gracias!
    Francisco Javier Velasco Arjona
    @javivelasco

    View full-size slide