Backbone.js is a client-side MVC framework that provides structure and connects to RESTful APIs. It includes models to hold and sync data, views to render models and handle DOM events, and a router to handle application states and back/forward buttons. The framework is lightweight at 6.3kb gzipped and focuses models, views, and controllers to build single page applications that are organized and connect to RESTful services.

1. Backbone.js
Client-side MVC framework

2. 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/)

3. Backbone.js is not…
DOM selector
Effect tool kit
All in one package

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

5. The Model

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

7. The Collection

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

9. The View

10. The View or Controller…
Connect View and Model/Collection
Delegate DOM events
Subscribs Model/Collection change events

11. The Routing-engine

12. The Routing-engine
Useful to initiate application state
ex: window.location.hash = “start”;
Enable go back/forward browser functionality.
Makes application states bookmarkable!

13. Demo : Todo
Backbone.js official example

14. Q&A