Backbone.jsClient-side MVC framework

Backbone.js is…

Model/View/Controller Javascript framework

Structure provider

RESTful JSON Connector

Hash-Routing engine

Event-driven

LightWeight (6.3kb packed & gzipped)

Hard dependency on Underscore

(http://underscorejs.org/)

Backbone.js is not…

DOM selector

Effect tool kit

All in one package

Benefit ?

Backbone provides an easy way to organize your code by

its MVC pattern.

Easy to create an one page application.

Focus on one thing.

The Model

The Model

Easy to auto generate

Holds data better then the DOM

Throws data change event (add, delete, sync, sort …)

Can connect to a URL to populate from or persist to server

(Follow CRUD method or need to override sync function)

The Collection

The Collection

Easy to auto generate

For bulk handling model objects

Throw data change event .

Can connect to a URL to populate from server.

Query functions.

The View

The View or Controller…

Connect View and Model/Collection

Delegate DOM events

Subscribs Model/Collection change events

The Routing-engine

The Routing-engine

Useful to initiate application state

ex: window.location.hash = “start”;

Enable go back/forward browser functionality.

Makes application states bookmarkable!

Demo : TodoBackbone.js official example

Q&A