backbonejs
TRANSCRIPT
![Page 1: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/1.jpg)
Backbone.jsClient-side MVC framework
![Page 2: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/2.jpg)
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/)
![Page 3: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/3.jpg)
Backbone.js is not…
DOM selector
Effect tool kit
All in one package
![Page 4: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/4.jpg)
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.
![Page 5: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/5.jpg)
The Model
![Page 6: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/6.jpg)
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)
![Page 7: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/7.jpg)
The Collection
![Page 8: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/8.jpg)
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.
![Page 9: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/9.jpg)
The View
![Page 10: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/10.jpg)
The View or Controller…
Connect View and Model/Collection
Delegate DOM events
Subscribs Model/Collection change events
![Page 11: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/11.jpg)
The Routing-engine
![Page 12: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/12.jpg)
The Routing-engine
Useful to initiate application state
ex: window.location.hash = “start”;
Enable go back/forward browser functionality.
Makes application states bookmarkable!
![Page 13: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/13.jpg)
Demo : TodoBackbone.js official example
![Page 14: Backbonejs](https://reader033.vdocuments.us/reader033/viewer/2022060123/5596a9f61a28abdf408b46ef/html5/thumbnails/14.jpg)
Q&A