an intro to the javascript mvc framework

plan

Why BackboneBackbone architectureExamples

What we want to avoid

We have to store object informations into the DOM

What we want to avoid

callback hell

Why Backbone

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

Backbone.jsFrom the Backbone website...

Backbone.js gives structure to web applications by providingmodels 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.

represent datas

list of modelmanipulate doms

Architecture

Backbone s Modelʼ

Representing data

Handling persistence

Throws events

Backbone s Modelʼ

Backbone s Modelʼ

Backbone s ʼ View

Manipulates the Dom

delegates Dom events

Backbone s ʼ View

Backbone s ʼ View

Backbone s ʼ Collections

Collections are ordered sets of models

bind "change" events to be notified when any modelin the collection has been modified

fetch the collection from the server (or otherpersistence layer)

Backbone s ʼ Collections

_.include([1, 2, 3], 3);=> true

APP

Architecture

Dependencies:• jQuery or Zepto• Underscore.js 16k

backbone.js 12kMustache.js 14k

Examples

Q u e s t io n s ?