Backbone.js is a JavaScript MVC framework that provides structure to web applications. It includes models to represent and persist data, collections to store and enumerate models, views to manipulate the DOM based on models/collections, and connects it all through a RESTful JSON API. The framework aims to abstract away complexity, decouple UI from data, and avoid callback hell. Examples show how models represent data, collections store models, and views tie them together through the DOM.

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 ?