![Page 2: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/2.jpg)
ABOUT ME
I work at Miracle Interface as Chief Technical Officer.Software ArchitectFocus on delivering applications with good
performance
![Page 3: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/3.jpg)
ABOUT ME
A certified OCP in oracle 10g.a Programmer by heart.Also involved with ASPNETCOMMUNITY
![Page 4: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/4.jpg)
AGENDAS
Problems facing with jQuery-only Application
SolutionBackboneBackbone :: ArchitectureTips
![Page 5: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/5.jpg)
Problems facing with jQuery-only Application
![Page 6: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/6.jpg)
Problems facing with jQuery-only application
Data is tightly coupled with DOMjQuery Callback is hellMostly get lost in forest of jQuery selectors
and callbacksScripts get scattered
Problem while debugging code
![Page 7: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/7.jpg)
Problems facing with jQuery-only application
Data is tightly coupled with DOM
![Page 8: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/8.jpg)
Problems facing with jQuery-only application…
Data is tightly coupled with DOM
![Page 9: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/9.jpg)
Problems facing with jQuery-only application…
jQuery Callback is hell
![Page 10: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/10.jpg)
Problems facing with jQuery-only application…
Mostly get lost in forest of jQuery selectors and callbacks
![Page 11: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/11.jpg)
Problems facing with jQuery-only application…
Scripts get scatteredWe love bugs
While trying to debug a jQuery application, I drink lots of caffeine
![Page 12: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/12.jpg)
Solution?
![Page 13: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/13.jpg)
SOLUTION
Decoupling Data from UI
![Page 14: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/14.jpg)
SOLUTION…
Abstractionabstraction is the process of separating ideas from
specific instances of those ideas at work. Wikipedia
We already know about it.Model/CollectionViews/TemplatesController/Router
![Page 15: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/15.jpg)
SOLUTION…
Callback Management (Events) Data & UI can be updated. Action & application status
![Page 16: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/16.jpg)
SOLUTION…
Code Management
![Page 17: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/17.jpg)
SOLUTION…
JS frameworks/librariesAngularJsBackboneJsCanJsEmberJsMeteorJsExtJs
![Page 18: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/18.jpg)
Backbone.js
![Page 19: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/19.jpg)
BACKBONE.JS,
Its MV* structure
Backbone does not force you to use a single template engine. Views can bind to HTML constructed in your favorite way.
![Page 20: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/20.jpg)
BACKBONE.JS
Can easily be used in existing application or in a component of existing application.
The focus is on supplying you with helpful methods to manipulate and query your data.
![Page 21: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/21.jpg)
BACKBONE.JS
Synchronous events are used as the fundamental building block. And if you want a specific event to be asynchronous and
aggregated, no problem.
http://underscorejs.org/#debounce
Backbone scales well, from embedded widgets to massive apps.
![Page 22: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/22.jpg)
BACKBONE.JS
Backbone is a library, not a framework, and plays well with others. Dojo D3 visualization Knockoutjs Meteorjs
"Two way data-binding" is avoided. Extension available.
![Page 23: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/23.jpg)
BACKBONE.JS DEPENDS ON
Underscore.jsjQuery or ZeptoJson2.js
![Page 24: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/24.jpg)
BACKBONE.JS IS BACKBONE OF
Well known apps https://trello.com/ https://delicious.com/ http://www.khanacademy.org/ & many more
Project Done by my team Eternal Message Cocolink-discussion
Startup project onTreat.com (WIP)
![Page 25: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/25.jpg)
Backbone.js, components?
![Page 26: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/26.jpg)
BACKBONE.JS :: COMPONENTS
Backbone.ModelBackbone.CollectionBackbone.ViewTemplate (Underscore.js)Router
![Page 27: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/27.jpg)
MODEL
Presents dataThrows eventsReusableHandles persistence
![Page 28: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/28.jpg)
MODEL :: COMMUNICATE
RESTfulFetch http GET /urlSave(New) http POST /urlSave http PUT/url/id
Destroy http DELETE /url/id
![Page 29: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/29.jpg)
MODEL :: COMMUNICATE
For legacy web server without REST/HTTP.Then use Backbone.emulateHTTP = true
![Page 30: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/30.jpg)
MODEL :: DEFINE
key field
URL to perform RESTful operation
![Page 31: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/31.jpg)
MODEL :: USECreate object of Model
class
Set data in model
call the function to save it.
![Page 32: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/32.jpg)
Model :: more…
http://backbonejs.org/#Model
![Page 33: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/33.jpg)
Collection
List of modelsOnly used for pulling data from server.
![Page 34: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/34.jpg)
Collection :: Define
![Page 35: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/35.jpg)
Collection :: Use
![Page 36: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/36.jpg)
Collection :: More…
http://backbonejs.org/#Collection
![Page 37: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/37.jpg)
View
Dom manipulationDom event handlingUses model/collection
![Page 38: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/38.jpg)
View :: Define html element where
the view will be rendered
![Page 39: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/39.jpg)
View :: Define (with events)
Define events & trigger point
function that will be called when event is
triggered.
![Page 40: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/40.jpg)
View :: Use
![Page 41: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/41.jpg)
View :: more …
http://backbonejs.org/#View
![Page 42: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/42.jpg)
Template
Default template engine is underscore.jsCan use other template engines,
MustacheHandlebarjQuery-tmpl
![Page 43: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/43.jpg)
Template :: Define
Model’s attribute
(data field)
![Page 44: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/44.jpg)
Template :: Define
compile
template
generate html
![Page 45: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/45.jpg)
Routers
Maps hash url to functionNeed to enable backbone history
Backbone.history.start();
![Page 46: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/46.jpg)
Routers :: Define
Without parameter
![Page 47: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/47.jpg)
Routers :: Define
With parameter
![Page 48: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/48.jpg)
Routers :: Use
![Page 49: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/49.jpg)
Tips
![Page 50: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/50.jpg)
TIPS
AMD Require.js, common.js
MVC structure http://marionettejs.com/ http://chaplinjs.org/
Model-view binding Stickit
Extensions, Plugins, resources https://github.com/jashkenas/backbone/wiki/Extensions%2C-Plugins%2C-Resources
Tuts https://github.com/jashkenas/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites
![Page 51: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/51.jpg)
REFERENCES
http://backbonejs.org/http://www.slideshare.net/nabeelahali/backbone-in
trohttp://www.slideshare.net/iloveigloo/clientside-mvc
-with-backbonejs
![Page 52: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/52.jpg)
Questions
![Page 53: Organized web app development using backbone.js](https://reader033.vdocument.in/reader033/viewer/2022042614/554fc319b4c9053d018b4ca8/html5/thumbnails/53.jpg)
Thank you.
THANK YOU