Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply



Published on

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

Published in: Education, Technology, Business

1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Backbone.js Ivano Malavolta ivano.malavolta@univaq.it
  • 2. Roadmap• Why Backbone• Events• Model• Collection• View• Router
  • 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. 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. IntuitionBackbone gives you STRUCTURE
  • 6. BackboneFrom the Backbone website... represent data manipulate lists of models the DOM
  • 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. Roadmap• Why Backbone• Events• Models• Collections• Views• Router
  • 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. object will react to the “alert” event Events API (the “off” functiondetaches the event) event parameters the “alert” event is fired
  • 11. Roadmap• Why Backbone• Events• Models• Collections• Views• Router
  • 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. 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. Example of Modelcustom method setting an event fired attribute when “color” changes custom method invocation
  • 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. Example
  • 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. 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. 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. 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. Roadmap• Why Backbone• Events• Models• Collections• Views• Router
  • 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. 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. Example
  • 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. Roadmap• Why Backbone• Events• Models• Collections• Views• Router
  • 27. ViewsViews represent and manage the visible parts of your applicationThey are also used to listen to interaction events and react accordingly
  • 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. 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. 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. Example
  • 32. Roadmap• Why Backbone• Events• Models• Collections• Views• Router
  • 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. 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. Example
  • 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. 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. 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. 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. References