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

Backbone.js

 Backbone.js

Backbone.js

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

http://www.di.univaq.it/malavolta

Ivano Malavolta

June 01, 2012
Tweet

More Decks by Ivano Malavolta

Other Decks in Technology

Transcript

  1. Backbone.js Ivano Malavolta Ivano Malavolta ivano.malavolta@univaq.it http://www.di.univaq.it/malavolta

  2. Roadmap • Why Backbone • Events • Events • Model

    • Collection • View • Router • Router
  3. Why Backbone We are building apps, not web sites If

    your code is not structured: • it is extremely easy that your web app becomes a big mess of html + big mess of html + big mess of html + big mess of html + css css css css + + + + javascript javascript javascript javascript • maintaining each part of your app asks • maintaining each part of your app asks for a deep deep deep deep analysis analysis analysis analysis of of of of ALL ALL ALL ALL its its its its aspects aspects aspects aspects (logic, presentation, etc.) • you may waste a whole day due to a missing “<“
  4. What we want to avoid Imagine yourself trying to change

    • how a movie should be rendered in your app • the REST API providing info about movies
  5. Intuition Backbone gives you STRUCTURE STRUCTURE STRUCTURE STRUCTURE

  6. Backbone From the Backbone website... represent data lists of models

    manipulate the DOM
  7. Backbone (continued) Backbone provides also features for: • sync sync

    sync sync – for managing how to persist models • events events events events – for managing how data and control are exchanged within your app within your app • router router router router – for managing the interaction flow among views
  8. Roadmap • Why Backbone • Events • Events • Models

    • Collections • Views • Router • Router
  9. Events Events Events Events Events is a module that can

    be mixed in to any object It gives the object the ability to bind bind bind bind and trigger trigger trigger trigger custom named events It is extremely useful for exchanging data and control among objects among objects
  10. Events API object will react to the “alert” event (the

    “off” function detaches the event) event parameters the “alert” event is fired
  11. Roadmap • Why Backbone • Events • Events • Models

    • Collections • Views • Router • Router
  12. Models Models Models Models Models represent your data Each model

    represent a data type in your app, together with the logic surrounding it, like: • persistence • conversions • validations • validations • computed properties • access control
  13. Models You extend Backbone.Model Backbone.Model Backbone.Model Backbone.Model with your domain-specific

    methods, and Model Model Model Model provides a basic set of methods, and Model Model Model Model provides a basic set of functionality for managing changes, like: • getter and setter • id • constructor • constructor • JSON persistance
  14. Example of Model custom method setting an attribute event fired

    when “color” changes changes custom method invocation
  15. Model Constructor and Attributes • initialize initialize initialize initialize() ()

    () () – it is triggered every time you create a new instance of a – it is triggered every time you create a new instance of a model – it works also for collections and views – it can take an JS object for setting also attributes • get get get get() & set() () & set() () & set() () & set() – they are used to set and retrieve the value of certain – they are used to set and retrieve the value of certain attributes • defaults defaults defaults defaults – a property named 'defaults' in your model declaration
  16. Example

  17. Sync Backbone.sync Backbone.sync Backbone.sync Backbone.sync is the function that Backbone

    calls every time it attempts to read or save a model every time it attempts to read or save a model By default, it uses Ajax to make a RESTful JSON request to a server
  18. Sync Usage Usually, you you you you will will will

    will not not not not use use use use the the the the sync sync sync sync method method method method directly directly directly directly, you will it implicitly when you call one of these methods • Models – fetch: gets the most up-to-date values of the model instance – save: persists the model instance – destroy: deletes the model instance • Collections – fetch – create
  19. Sync You can override it You can override it You

    can override it You can override it in order to use a different persistence strategy, such as: persistence strategy, such as: • WebSockets • Local Storage • WebSQL Backbone.sync Backbone.sync Backbone.sync Backbone.sync is the default global function that all models use unless the models have a sync method specifically set
  20. Sync Signature The method signature of Backbone.sync is example of

    overriden sync: http://bit.ly/KWdxNN sync(method, model, [options]) • method method method method: the CRUD method ("create“, "read“, "update", or "delete") • model model model model: the model (or collection) to be synced • options options options options – success and error callbacks, and all other jQuery request options
  21. Roadmap • Why Backbone • Events • Events • Models

    • Collections • Views • Router • Router
  22. Collections Collections are ordered sets of models You can •

    bind "change" events to be notified when any model in the collection has been modified • listen for "add" and "remove"events • fetch the collection from the server (or other persistence layer)
  23. Collections Any event that is triggered on a model in

    a collection will also be triggered on the collection directly will also be triggered on the collection directly The model attribute of a collection represents the kind of model that can be stored in it
  24. Example

  25. Collection Methods Methods on collections include: • fetch fetch fetch

    fetch: gets all the models of a collection • create create create create: creates a new model within the collection • reset reset reset reset: updates the collection in bulk • add add add add: adds a model to the collection • remove remove remove remove: removes a model from the collection • remove remove remove remove: removes a model from the collection • at at at at: returns a specific model from the collection • sort sort sort sort: sorts the collection
  26. Roadmap • Why Backbone • Events • Events • Models

    • Collections • Views • Router • Router
  27. Views Views represent and manage the visible parts of your

    application application They are also used to listen to interaction events and react accordingly
  28. Views All views have a DOM element at all times,

    even if they are already in the page or not are already in the page or not views can be rendered at any time, and inserted into the DOM all at once you get high-performance UI rendering with as few you get high-performance UI rendering with as few reflows and repaints as possible
  29. View DOM element this.el is a reference to the DOM

    element, it is created from: created from: • tagName tagName tagName tagName – for example body, ul, span, img • className className className className – class name of some element within the DOM • id id id id • id id id id – id of an element within the DOM If none of them is specified, el el el el is an empty <div>
  30. View DOM render() The render() method is used to update

    the this.el element with the new HTML element with the new HTML The default implementation of render render render render is a no-op you have to override it to create the new HTML Backbone is agnostic with respect to your code in render(), however... you are STRONGLY STRONGLY STRONGLY STRONGLY encouraged to use a Javascript templating library here
  31. Example

  32. Roadmap • Why Backbone • Events • Events • Models

    • Collections • Views • Router • Router
  33. Router Backbone.Router Backbone.Router Backbone.Router Backbone.Router provides methods for routing routing

    routing routing client- side pages, and connecting them to actions and connecting them to actions and connecting them to actions and connecting them to actions and side pages, and connecting them to actions and connecting them to actions and connecting them to actions and connecting them to actions and events events events events At a minimum, a router is composed of two main parts: • routes routes routes routes • routes routes routes routes – an hash that pairs routes to actions • actions actions actions actions – JS functions triggered when certain routes are navigated
  34. Routes It is an hash that maps URLs to functions

    on your It is an hash that maps URLs to functions on your It is an hash that maps URLs to functions on your It is an hash that maps URLs to functions on your router router router router router router router router URLs fragments can also contain dynamic dynamic dynamic dynamic data data data data via Backbone-specific URL parts: • parameter • parameter – match a single URL component between slashes • splat – match any number of URL components
  35. Example

  36. History History History History History serves as a global router

    to 1. handle hashchange events 1. handle hashchange events 2. match the appropriate route 3. trigger callbacks You should never access it directly, you just need call You should never access it directly, you just need call Backbone.history.start() to begin monitoring hashchange events, and dispatching routes in your app
  37. Summary: Classical Workflow 1. You dig into JSON objects 2.

    look up elements in the DOM 2. look up elements in the DOM 3. update the HTML by hand JS scripts DOM events DOM updates DOM you data sources interacts data & events updates
  38. Summary: Backbone You organize your interface into logical views backed

    by models Each view can be updated independently when the model Each view can be updated independently when the model changes, without having to redraw the page Model View interacts DOM events model updates model events DOM updates DOM Model Router data sources model updates sync routing updates
  39. Summary: Backbone You can bind your view‘s render() You can

    bind your view‘s render() function to the model‘s "change” event now everywhere that model data is displayed in the UI, it is always is displayed in the UI, it is always immediately up to date
  40. References http://backbonejs.org