1. an intro to the javascript mvc framework

2. plan
Why Backbone
Backbone architecture
Examples

3. What we want to avoid
We have to store object informations into the DOM

4. What we want to avoid
callback hell

6. Why Backbone
So, what do we need?
• Abstraction.
• Decoupling UI from Data.
• No more callbacks.

7. Backbone.js
From the Backbone website...
represent datas
Backbone.js gives structure to web applications by providing
models with key-value binding and custom events,
collections with a rich API of enumerable functions,
views with declarative event handling, and connects it all to your
existing API over a RESTful JSON interface.
manipulate doms list of model

8. Architecture

9. Backboneʼ s Model
Representing data
Handling persistence
Throws events

10. Backboneʼ s Model

11. Backboneʼ s Model

12. Backboneʼ s View
 Manipulates the Dom
 delegates Dom events

13. Backboneʼ s View

14. Backboneʼ s View

15. Backboneʼ s Collections
Collections are ordered sets of models
bind "change" events to be notified when any model
in the collection has been modified
fetch the collection from the server (or other
persistence layer)

17. Backboneʼ s Collections
_.include([1, 2, 3], 3);
=> true

18. APP

19. Architecture
Dependencies:
• jQuery or Zepto
• Underscore.js 16k
backbone.js 12k
Mustache.js 14k

20. Examples

25. Q u e s t io n s ?