Published on


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).

Published in: Education, Technology, Business
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Backbone.js Ivano Malavolta ivano.malavolta@univaq.it
  2. 2. Roadmap• Why Backbone• Events• Model• Collection• View• Router
  3. 3. Why BackboneWe are building apps, not web sitesIf your code is not structured:• it is extremely easy that your web app becomes a big mess of html + css + javascript• maintaining each part of your app asks for a deep analysis of ALL its aspects (logic, presentation, etc.)• you may waste a whole day due to a missing “<“
  4. 4. What we want to avoidImagine yourself trying to change• how a movie should be rendered in your app• the REST API providing info about movies
  5. 5. IntuitionBackbone gives you STRUCTURE
  6. 6. BackboneFrom the Backbone website... represent data manipulate lists of models the DOM
  7. 7. Backbone (continued)Backbone provides also features for:• sync – for managing how to persist models• events – for managing how data and control are exchanged within your app• router – for managing the interaction flow among views
  8. 8. Roadmap• Why Backbone• Events• Models• Collections• Views• Router
  9. 9. EventsEvents is a module that can be mixed in to any objectIt gives the object the ability to bind and trigger custom named eventsIt is extremely useful for exchanging data and control among objects
  10. 10. object will react to the “alert” event Events API (the “off” functiondetaches the event) event parameters the “alert” event is fired
  11. 11. Roadmap• Why Backbone• Events• Models• Collections• Views• Router
  12. 12. ModelsModels represent your dataEach model represent a data type in your app, together with the logic surrounding it, like:• persistence• conversions• validations• computed properties• access control
  13. 13. ModelsYou extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes, like:• getter and setter• id• constructor• JSON persistance
  14. 14. Example of Modelcustom method setting an event fired attribute when “color” changes custom method invocation
  15. 15. Model Constructor and Attributes• initialize() initialize() – 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() & set() get() – they are used to set and retrieve the value of certain attributes• defaults – a property named defaults in your model declaration
  16. 16. Example
  17. 17. SyncBackbone.sync is the function that Backbone calls every time it attempts to read or save a modelBy default, it uses Ajax to make a RESTful JSON request to a server
  18. 18. Sync UsageUsually, you will not use the sync method directly you directly, 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. 19. SyncYou can override it in order to use a different persistence strategy, such as:• WebSockets• Local Storage• WebSQLBackbone.sync is the default global function that all models use unless the models have a sync method specifically set
  20. 20. Sync Signature example of overriden sync: method signature of Backbone.sync is sync(method, model, [options])• method the CRUD method ("create“, "read“, "update", method: or "delete")• model the model (or collection) to be synced model:• options – success and error callbacks, and all other jQuery request options
  21. 21. Roadmap• Why Backbone• Events• Models• Collections• Views• Router
  22. 22. CollectionsCollections are ordered sets of modelsYou 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. 23. CollectionsAny event that is triggered on a model in a collection will also be triggered on the collection directlyThe model attribute of a collection represents the kind of model that can be stored in it
  24. 24. Example
  25. 25. Collection MethodsMethods on collections include:• fetch: fetch gets all the models of a collection• create: create creates a new model within the collection• reset: reset updates the collection in bulk• add: adds a model to the collection add• remove: remove removes a model from the collection• at: at returns a specific model from the collection• sort: sort sorts the collection
  26. 26. Roadmap• Why Backbone• Events• Models• Collections• Views• Router
  27. 27. ViewsViews represent and manage the visible parts of your applicationThey are also used to listen to interaction events and react accordingly
  28. 28. ViewsAll views have a DOM element at all times, even if they 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 reflows and repaints as possible
  29. 29. View DOM elementthis.el is a reference to the DOM element, it is created from:• tagName – for example body, ul, span, img• className – class name of some element within the DOM• id – id of an element within the DOMIf none of them is specified, el is an empty <div>
  30. 30. View DOM render()The render() method is used to update the this.el element with the new HTMLThe default implementation of render is a no-op you have to override it to create the new HTMLBackbone is agnostic with respect to your code in render(), however... you are STRONGLY encouraged to use a Javascript templating library here
  31. 31. Example
  32. 32. Roadmap• Why Backbone• Events• Models• Collections• Views• Router
  33. 33. RouterBackbone.Router provides methods for routing client- side pages, and connecting them to actions and eventsAt a minimum, a router is composed of two main parts:• routes – an hash that pairs routes to actions• actions – JS functions triggered when certain routes are navigated
  34. 34. RoutesIt is an hash that maps URLs to functions on your routerURLs fragments can also contain dynamic data via Backbone-specific URL parts:• parameter – match a single URL component between slashes• splat – match any number of URL components
  35. 35. Example
  36. 36. HistoryHistory serves as a global router to1. handle hashchange events2. match the appropriate route3. trigger callbacksYou should never access it directly, you just need call Backbone.history.start() to begin monitoring hashchange events, and dispatching routes in your app
  37. 37. Summary: Classical Workflow1. You dig into JSON objects2. look up elements in the DOM3. update the HTML by hand you DOM events JS DOMscripts DOM updates interacts data & events data sources
  38. 38. Summary: BackboneYou organize your interface into logical views backed by modelsEach view can be updated independently when the model changes, without having to redraw the page DOM model events events View DOM interacts DOM Model model updates updates sync routing data sources Router
  39. 39. Summary: BackboneYou 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 immediately up to date
  40. 40. References