Organized web app development using backbone.js

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 