1.
(ORGANIZED) WEB-APP DEVELOPMENT USING
BACKBONE.JS
SHAKTI SHRESTHA
shakti.shrestha@gmail.com

2.
ABOUT ME
I work at Miracle Interface as Chief Technical
Officer.
Software Architect
Focus on delivering applications with good
performance

3.
ABOUT ME
A certified OCP in oracle 10g.
a Programmer by heart.
Also involved with ASPNETCOMMUNITY

4.
AGENDAS
Problems facing with jQuery-only
Application
Solution
Backbone
Backbone :: Architecture
Tips

5.
Problems facing with jQuery-only Application

6.
Problems facing with jQuery-only application
Data is tightly coupled with DOM
jQuery Callback is hell
Mostly get lost in forest of jQuery selectors and
callbacks
Scripts get scattered
Problem while debugging code

7.
Problems facing with jQuery-only application
Data is tightly coupled with DOM

8.
Problems facing with jQuery-only application…
Data is tightly coupled with DOM

9.
Problems facing with jQuery-only application…
jQuery Callback is hell

10.
Problems facing with jQuery-only application…
Mostly get lost in forest of
jQuery selectors and callbacks

11.
Problems facing with jQuery-only application…
Scripts get scattered
We love bugs
While trying to debug a jQuery application, I drink
lots of caffeine

12.
Solution?

13.
SOLUTION
Decoupling Data from UI

14.
SOLUTION…
Abstraction
abstraction is the process of separating ideas from specific
instances of those ideas at work. Wikipedia
We already know about it.
Model/Collection
Views/Templates
Controller/Router

15.
SOLUTION…
Callback Management (Events)
 Data & UI can be updated.
 Action & application status

16.
SOLUTION…
Code Management

17.
SOLUTION…
JS frameworks/libraries
AngularJs
BackboneJs
CanJs
EmberJs
MeteorJs
ExtJs

18.
Backbone.js

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

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

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

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

23.
BACKBONE.JS DEPENDS ON
Underscore.js
jQuery or Zepto
Json2.js

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

25.
Backbone.js, components?

26.
BACKBONE.JS :: COMPONENTS
Backbone.Model
Backbone.Collection
Backbone.View
Template (Underscore.js)
Router

27.
MODEL
Presents data
Throws events
Reusable
Handles persistence

28.
MODEL :: COMMUNICATE
RESTful
Fetch  http GET /url
Save(New)  http POST /url
Save  http PUT /url/id
Destroy  http DELETE /url/id

29.
MODEL :: COMMUNICATE
For legacy web server without REST/HTTP.
Then use Backbone.emulateHTTP = true

30.
MODEL :: DEFINE
key field
URL to perform
RESTful operation

31.
MODEL :: USE
Create object of Model
class
Set data in
model
call the function to save it.

32.
Model :: more…
http://backbonejs.org/#Model

33.
Collection
List of models
Only used for pulling data from server.

34.
Collection :: Define

35.
Collection :: Use

36.
Collection :: More…
http://backbonejs.org/#Collection

37.
View
Dom manipulation
Dom event handling
Uses model/collection

38.
View :: Define
html element where the
view will be rendered

39.
View :: Define (with events)
Define events &
trigger point
function that will be
called when event is
triggered.

40.
View :: Use

41.
View :: more …
http://backbonejs.org/#View

42.
Template
Default template engine is underscore.js
Can use other template engines,
Mustache
Handlebar
jQuery-tmpl

43.
Template :: Define
Model’s
attribute
(data field)

44.
Template :: Define
compile
templat
e
generat
e html

45.
Routers
Maps hash url to function
Need to enable backbone history
Backbone.history.start();

46.
Routers :: Define
Without
parameter

47.
Routers :: Define
With
parameter

48.
Routers :: Use

49.
Tips

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

51.
REFERENCES
http://backbonejs.org/
http://www.slideshare.net/nabeelahali/backbone-intro
http://www.slideshare.net/iloveigloo/clientside-mvc-with-
backbonejs

52.
Questions

53.
Thank you. 
THANK YOU 