Backbone.js
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Backbone.js

  • 544 views
Uploaded on

This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014. ...

This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.

http://www.ivanomalavolta.com

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
544
On Slideshare
538
From Embeds
6
Number of Embeds
2

Actions

Shares
Downloads
30
Comments
0
Likes
0

Embeds 6

https://www.linkedin.com 4
http://www.slideee.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Gran Sasso Science Institute Ivano Malavolta Backbone JS
  • 2. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 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 + 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. Why Backbone Backbone gives you STRUCTURE
  • 5. 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
  • 6. Why Backbone From the Backbone website... manipulate the DOM lists of models represent data
  • 7. Why Backbone Additionally, Backbone provides also features for: sync for managing how to persist models (default is via REST) events for managing how data and control are exchanged within your app router for managing the interaction flow among views
  • 8. Who is using Backbone?
  • 9. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 10. Events Any object communicates with other objects via events It gives the object the ability to bind and trigger custom named events It is extremely useful for exchanging data and control among objects
  • 11. Events Basically, each object can: •  listen to events •  trigger events
  • 12. Events Two types of events: you define your own types of event built-in custom
  • 13. Events API object will react to the “alert” event (the “off” function detaches the event) event parameters the “alert” event is fired
  • 14. Events API Events methods: on object.on(event, callback, [context]) off object.off([event], [callback], [context]) once object.once(event, callback, [context]) trigger object.trigger(event, [*args]) listenTo object.listenTo(other, event, callback) stopListening object.stopListening([other], [event], [callback]) listenToOnce object.listenToOnce(other, event, callback)
  • 15. Events summary
  • 16. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 17. Models Models represent your data Each model represents a data type in your app, together with the logic surrounding it, like: •  persistence •  conversions •  validation •  computed properties •  access control MVC: Notify their observers about state using the Observer pattern
  • 18. Models You 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 •  REST-based persistence
  • 19. Example of model custom method g an attribute event fired when “color” changes custom method invocation
  • 20. Model constructor and attributes initialize() it is triggered every time you create a new instance of a model it works also for collections and views it can take a JS object for setting also attributes get() & set() they are used to set and retrieve the value of certain attributes defaults a property named 'defaults' in your model declaration
  • 21. Example http://goo.gl/UOahsP
  • 22. Model persistence Backbone.sync is the function that Backbone calls every time it attempts to read or save a model By default, it uses Ajax to make a REST-ish request to a server Resources represented as JSON strings
  • 23. Sync signature sync(method,  model,  [options])   method the CRUD method ("create“, "read“, "update", or "delete") model the model (or collection) to be synced options success and error callbacks, and all other jQuery request options example of overriden sync: http://bit.ly/KWdxNN Sync returns a jQuery XMLHttpRequest (jqXHR) object It implements the Promise interface
  • 24. Sync usage Normally you will not use the sync method directly, you will do it implicitly when you call one of these methods Model •  fetch: gets the most up-to-date values of the model instance •  save: persists the model instance •  destroy: deletes the model instance Collection •  fetch: gets all the models of the collection from the server •  create: creates a model, saves it to the server and adds it to the collection
  • 25. Overriding sync You can override it in order to use a different persistence strategy, such as: •  WebSockets •  Local Storage •  WebSQL Backbone.sync is the default global function that all models use unless the models have a sync method specifically set
  • 26. Models summary
  • 27. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 28. 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 layers) •  find models or filter collections themeselves The model attribute of a collection represents the kind of model that can be stored in it Any event that is triggered on a model in a collection will also be triggered on the collection directly MVC: Notify their observers about state using the Observer pattern (same as models)
  • 29. Collection example http://goo.gl/UOahsP
  • 30. Collections summary
  • 31. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 32. Views Views represent and manage the visible parts of your application They are also used to •  listen to interaction events •  and react accordingly views can be rendered at any time, and inserted into the DOM you get high-performance UI rendering with as few reflows and repaints as possible MVC: observe models, and update itself according to the state of the models + manage user inputs (it’s a controller, to this sense)
  • 33. Interaction with the DOM All views refer to a DOM element at all times, even if they are already in the page or not   this.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 DOM If none of them is specified, this.el is an empty <div>
  • 34. Rendering the view The render() method is used to update the this.el element with the new HTML The default implementation of render() is a no-op à you have to override it to update this.el with your HTML code Backbone is agnostic with respect to your code in render(), however... you are STRONGLY encouraged to use a JavaScript templating library here
  • 35. View example http://goo.gl/UOahsP
  • 36. Interaction with the user Events map “event_name selector”: callback Events callbacks
  • 37. Views summary
  • 38. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 39. The router Backbone.Router  provides methods for routing client-side pages, and connecting them to actions and events At 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
  • 40. Routing Every router contains an hash that maps routes to functions on your router URLs fragments can also contain dynamic data via Backbone-specific URL parts: parameter  (:param)   match a single URL component between slashes splat  (*fragment)   match any number of URL components
  • 41. Routing routes map routing functions
  • 42. History History serves as a global router to 1.  handle hashchange events 2.  match the appropriate route 3.  trigger callbacks You should never access it directly, you just need call Backbone.history.start()  to begin monitoring hashchange events, and dispatching routes in your app Call Backbone.history.navigate(ROUTE_NAME,  {trigger:  true}); to activate a specific route of the router   Technically, it uses the HTML5 History API to listen to to its job For older browsers, it uses URL hash fragments as fallback
  • 43. Router summary
  • 44. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 45. Classical workflow 1.  You dig into JSON objects 2.  Look up elements in the DOM 3.  Update the HTML by hand
  • 46. Backbone-based workflow •  You organize your interface into logical views backed by models •  Each view can be updated independently when the model changes, without having to redraw the page 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 immediately up to date
  • 47. Is Backbone real MVC? Let’s look at the description of the Model-View-Presenter pattern on Wikipedia: an interface defining the data to be displayed or otherwise acted upon in the user interface passive interface that displays data (the model) and routes user commands (events) to the presenter to act upon that data acts upon the model and the view. It retrieves data from repositories (the model), and formats it for display in the view Model View Presenter
  • 48. References http://backbonejs.org
  • 49. + 39 380 70 21 600 Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo ivano.malavolta@univaq.it www.ivanomalavolta.com