0
Backbone.js         Ivano Malavolta    ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
Roadmap•   Why Backbone•   Events•   Model•   Collection•   View•   Router
Why BackboneWe are building apps, not web sitesIf your code is not structured:• it is extremely easy that your web app   b...
What we want to avoidImagine yourself trying to change• how a movie should be rendered in your app• the REST API providing...
IntuitionBackbone gives you STRUCTURE
BackboneFrom the Backbone website...                                         represent data manipulate            lists of...
Backbone (continued)Backbone provides also features for:• sync   – for managing how to persist models• events   – for mana...
Roadmap•   Why Backbone•   Events•   Models•   Collections•   Views•   Router
EventsEvents is a module that can be mixed in to any objectIt gives the object the ability to bind and trigger  custom nam...
object will react to  the “alert” event                       Events API (the “off” functiondetaches the event)           ...
Roadmap•   Why Backbone•   Events•   Models•   Collections•   Views•   Router
ModelsModels represent your dataEach model represent a data type in your app, together  with the logic surrounding it, lik...
ModelsYou extend Backbone.Model with your domain-specific  methods, and Model provides a basic set of  functionality for m...
Example of Modelcustom method                           setting an                                         event fired    ...
Model Constructor and Attributes• initialize()  initialize()   – it is triggered every time you create a new instance of a...
Example
SyncBackbone.sync is the function that Backbone calls  every time it attempts to read or save a modelBy default, it uses A...
Sync UsageUsually, you will not use the sync method directly you                                             directly,  wi...
SyncYou can override it in order to use a different  persistence strategy, such as:• WebSockets• Local Storage• WebSQLBack...
Sync Signature              example of overriden sync:                              http://bit.ly/KWdxNNThe method signatu...
Roadmap•   Why Backbone•   Events•   Models•   Collections•   Views•   Router
CollectionsCollections are ordered sets of modelsYou can• bind "change" events to be notified when any model  in the colle...
CollectionsAny event that is triggered on a model in a collection  will also be triggered on the collection directlyThe mo...
Example
Collection MethodsMethods on collections include:•   fetch:    fetch gets all the models of a collection•   create:    cre...
Roadmap•   Why Backbone•   Events•   Models•   Collections•   Views•   Router
ViewsViews represent and manage the visible parts of your  applicationThey are also used to listen to interaction events a...
ViewsAll views have a DOM element at all times, even if they  are already in the page or not   views can be rendered at an...
View DOM elementthis.el is a reference to the DOM element, it is  created from:• tagName   – for example body, ul, span, i...
View DOM render()The render() method is used to update the this.el  element with the new HTMLThe default implementation of...
Example
Roadmap•   Why Backbone•   Events•   Models•   Collections•   Views•   Router
RouterBackbone.Router provides methods for routing client-  side pages, and connecting them to actions and  eventsAt a min...
RoutesIt is an hash that maps URLs to functions on your  routerURLs fragments can also contain dynamic data via  Backbone-...
Example
HistoryHistory serves as a global router to1. handle hashchange events2. match the appropriate route3. trigger callbacksYo...
Summary: Classical Workflow1. You dig into JSON objects2. look up elements in the DOM3. update the HTML by hand           ...
Summary: BackboneYou organize your interface into logical views backed by modelsEach view can be updated independently whe...
Summary: BackboneYou can bind your view‘s render()  function to the model‘s "change”  event   now everywhere that model da...
Referenceshttp://backbonejs.org
Upcoming SlideShare
Loading in...5
×

Backbone.js

1,334

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

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

Published in: Education, Technology, Business
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,334
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
100
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Backbone.js"

  1. 1. Backbone.js Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
  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: http://bit.ly/KWdxNNThe 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. Referenceshttp://backbonejs.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×