Upload
shakti-shrestha
View
500
Download
6
Tags:
Embed Size (px)
DESCRIPTION
Organized web app development using backbone.js
Citation preview
(ORGANIZED) WEB-APP DEVELOPMENT USING BACKBONE.JSSHAKTI SHRESTHA
ABOUT ME
I work at Miracle Interface as Chief Technical Officer.Software ArchitectFocus on delivering applications with good
performance
ABOUT ME
A certified OCP in oracle 10g.a Programmer by heart.Also involved with ASPNETCOMMUNITY
AGENDAS
Problems facing with jQuery-only Application
SolutionBackboneBackbone :: ArchitectureTips
Problems facing with jQuery-only Application
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
Problems facing with jQuery-only application
Data is tightly coupled with DOM
Problems facing with jQuery-only application…
Data is tightly coupled with DOM
Problems facing with jQuery-only application…
jQuery Callback is hell
Problems facing with jQuery-only application…
Mostly get lost in forest of jQuery selectors and callbacks
Problems facing with jQuery-only application…
Scripts get scatteredWe love bugs
While trying to debug a jQuery application, I drink lots of caffeine
Solution?
SOLUTION
Decoupling Data from UI
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
SOLUTION…
Callback Management (Events) Data & UI can be updated. Action & application status
SOLUTION…
Code Management
SOLUTION…
JS frameworks/librariesAngularJsBackboneJsCanJsEmberJsMeteorJsExtJs
Backbone.js
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.
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.
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.
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.
BACKBONE.JS DEPENDS ON
Underscore.jsjQuery or ZeptoJson2.js
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)
Backbone.js, components?
BACKBONE.JS :: COMPONENTS
Backbone.ModelBackbone.CollectionBackbone.ViewTemplate (Underscore.js)Router
MODEL
Presents dataThrows eventsReusableHandles persistence
MODEL :: COMMUNICATE
RESTfulFetch http GET /urlSave(New) http POST /urlSave http PUT/url/id
Destroy http DELETE /url/id
MODEL :: COMMUNICATE
For legacy web server without REST/HTTP.Then use Backbone.emulateHTTP = true
MODEL :: DEFINE
key field
URL to perform RESTful operation
MODEL :: USECreate object of Model
class
Set data in model
call the function to save it.
Model :: more…
http://backbonejs.org/#Model
Collection
List of modelsOnly used for pulling data from server.
Collection :: Define
Collection :: Use
Collection :: More…
http://backbonejs.org/#Collection
View
Dom manipulationDom event handlingUses model/collection
View :: Define html element where
the view will be rendered
View :: Define (with events)
Define events & trigger point
function that will be called when event is
triggered.
View :: Use
View :: more …
http://backbonejs.org/#View
Template
Default template engine is underscore.jsCan use other template engines,
MustacheHandlebarjQuery-tmpl
Template :: Define
Model’s attribute
(data field)
Template :: Define
compile
template
generate html
Routers
Maps hash url to functionNeed to enable backbone history
Backbone.history.start();
Routers :: Define
Without parameter
Routers :: Define
With parameter
Routers :: Use
Tips
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
REFERENCES
http://backbonejs.org/http://www.slideshare.net/nabeelahali/backbone-in
trohttp://www.slideshare.net/iloveigloo/clientside-mvc
-with-backbonejs
Questions
Thank you.
THANK YOU