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

1. Backbone.js
Ivano Malavolta
ivano.malavolta@univaq.it
http://www.di.univaq.it/malavolta

2. Roadmap
• Why Backbone
• Events
• Model
• Collection
• View
• Router

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

5. Intuition
Backbone gives you STRUCTURE

6. Backbone
From 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. Events
Events is a module that can be mixed in to any object
It gives the object the ability to bind and trigger
custom named events
It is extremely useful for exchanging data and control
among objects

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

11. Roadmap
• Why Backbone
• Events
• Models
• Collections
• Views
• Router

12. Models
Models represent your data
Each model represent a data type in your app, together
with the logic surrounding it, like:
• persistence
• conversions
• validations
• computed properties
• access control

13. 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
• JSON persistance

14. Example of Model
custom 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. Sync
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 RESTful JSON
request to a server

18. Sync Usage
Usually, 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. 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

20. Sync Signature example of overriden sync:
http://bit.ly/KWdxNN
The 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. 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 layer)

23. Collections
Any event that is triggered on a model in a collection
will also be triggered on the collection directly
The model attribute of a collection represents the
kind of model that can be stored in it

24. Example

25. Collection Methods
Methods 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. Views
Views represent and manage the visible parts of your
application
They are also used to listen to interaction events and
react accordingly

28. Views
All 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 element
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, el is an empty <div>

30. View DOM render()
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 create the new HTML
Backbone 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. 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

34. Routes
It is an hash that maps URLs to functions on your
router
URLs 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. 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

37. Summary: Classical Workflow
1. You dig into JSON objects
2. look up elements in the DOM
3. update the HTML by hand you
DOM
events
JS DOM
scripts
DOM
updates
interacts
data & events
data
sources

38. Summary: Backbone
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
DOM
model events events
View
DOM interacts
DOM
Model model updates updates
sync routing
data
sources Router

39. Summary: Backbone
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

40. References
http://backbonejs.org