This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016. http://www.ivanomalavolta.com

1. Gran Sasso Science Institute
Ivano Malavolta
Backbone JS

2. Roadmap
• Why Backbone
• Events
• Models
• Collections
• Views
• Routers
• Summary

3. Why Backbone
We are buildingapps, 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
• maintainingeach 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 (1)
From the Backbone website...
manipulate
the DOM
lists
of models
represent
data

7. Why Backbone (2)
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. Backbone in a nutshell

9. Who is using Backbone?

10. Roadmap
• Why Backbone
• Events
• Models
• Collections
• Views
• Routers
• Summary

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

12. Events
Basically, each object can:
• listen to events
• trigger events

13. Events
Two types of events:
you define your own types of event
built-in
custom

14. Events API
object will react to the “alert” event
(the “off” function detaches the event)
event parameters
the “alert” event is
fired

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

16. Events summary

17. Roadmap
• Why Backbone
• Events
• Models
• Collections
• Views
• Routers
• Summary

18. Models
Models represent your data
Each model represents a data type in your app, together with the logic surroundingit, like:
• persistence
• conversions
• validation
• computed properties
• access control
MVC: Notify their observers about
state using the Observer pattern

19. Models
You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of
functionalityfor managing changes, like:
• getter and setter
• id
• constructor
• REST-based persistence

20. Example of model
custom method
setting an
attribute
event fired when
“color” changes
custom method
invocation

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

22. Example
http://goo.gl/UOahsP

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

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

25. Sync usage
Normally you will not use the sync method directly, you will do it implicitlywhen 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

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

27. Models summary

28. Roadmap
• Why Backbone
• Events
• Models
• Collections
• Views
• Routers
• Summary

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

30. Collection example
http://goo.gl/UOahsP

31. Collections summary

32. Roadmap
• Why Backbone
• Events
• Models
• Collections
• Views
• Routers
• Summary

33. Views
Views represent and manage the visible parts of your application
They are also used to
• listen to user 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: a view observes a model, and
updates itself according to the state
of the model + manage user inputs
(it’s a controller, to this sense)

34. Interaction with the DOM
All views refer to a DOM element at all times
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>

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

36. View example
http://goo.gl/UOahsP

37. Interaction with the user
Events map
“event_name selector”: callback
Events callbacks

38. Views summary

39. Roadmap
• Why Backbone
• Events
• Models
• Collections
• Views
• Routers
• Summary

40. The router
Backbone.Router provides methods for routingclient-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 functionstriggered when certain routes are navigated
It can be seen as the “implementation”
of a navigation model

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

42. Routing
routes map
routing
functions

43. 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
monitoringhashchange 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 its job
For older browsers, it uses URL hash
fragments as fallback

44. Router summary

45. Roadmap
• Why Backbone
• Events
• Models
• Collections
• Views
• Routers
• Summary

46. Classical workflow
1. You dig into JSON objects
2. Look up elements in the DOM
3. Update the HTML by hand

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

48. Is Backbone real MVC?
Let’s look at the description of the Model-View-Presenter pattern on Wikipedia:
an interface definingthe 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

49. LAB
1. Organize the software architecture of the app using Backbone’s MVC paradigm
2. implement the Product, Producer, and User models
3. implement the Products and Producers collections
• if needed, override the sync method so that it can fetch data from the Loveitaly API
4. implement the views
5. implement the router of the app

50. References
http://backbonejs.org

51. Contact
Ivano Malavolta |
Gran Sasso Science Institute
iivanoo
ivano.malavolta@gssi.infn.it
www.ivanomalavolta.com