This document provides an introduction to the JavaScript library Backbone.js. It describes some common problems with JavaScript applications, such as tangled code and difficulty keeping the UI, logic and database in sync. Backbone.js addresses these issues by providing an MVC-inspired framework that organizes code into structured models, views and controllers. It also supports single page applications through its use of a router and by handling synchronization between the client and server through RESTful APIs. Several large companies are highlighted that use Backbone.js for its modularity, extensibility and ability to build complex, interactive interfaces.

1. INTRODUCTION TO BACKBONE JS
- Mohammed Saqib

2. AGENDA
2
Problems with JS
What is Backbone JS
Model –View - Presenter
Single Page Application
Why Backbone
Quick Facts
Real time applications using Backbone JS
Summary
References

3. PROBLEM WITH JAVASCRIPT APPLICATION
 Web application that involves a lot
of JavaScript applications end up
as tangled piles of JQuery selectors
and callbacks.
 Hard to keep data in sync between
the HTML UI, JavaScript logic & the
database.
 Pile of spaghetti code - code that is
disorganized and difficult to follow.
 Unstructured approach
3
JAVASCIRPT IS VERY POPULAR

4. WHAT IS BACKBONE JS

5.  Backbone JS is JavaScript library of components
with a RESTful JSON interface and is based on
the model–view–presenter (MVP) application
design paradigm.
 Very lightweight, as its only dependency is on
one JavaScript library, Underscore.js
 Underscore is a JavaScript library which provides
utility functions for common JavaScript tasks.
 It is designed for developing single-page web
applications and for keeping various parts of
web applications (e.g. multiple clients and the
server) synchronized.

6. Backbone JS is a framework?
 Backbone is library not a framework.
 Framework and library are the code written by some one else. This code
give us a functionality.
 In framework we change the structure of our code according to the rules
given by them. In order to use the functionality provided by them.
 In library we can use the functionality directly without changing our code.
 Frameworks need configuration, usually a HTML.
 Libraries have pre built functions ready to use. E.g. Jquery.
 Example:
– Libraries: knockout JS, Backbone JS
– Frameworks: Angular JS, Ember JS.
6

7. Backbone Organizes the code
 Creates clean and efficient code.
 Based on Model-View-Controller.
 Backbone Components:
– Models
– View
– Collections
– Events
– Router
7

8.  Model-view-presenter (MVP) is a derivative
of the MVC design pattern which focuses on
improving presentation logic.
 Presenter component contains the user
interface business logic for the view.
 The presenter acts as a mediator which talks
to both the view and model, however both
of these are isolated from each other.
 Make it very easy to handle complex views
and user interaction where MVC may not fit
the bill.
 Simplify maintenance greatly .
MVP

9. Single Page Application
 Also known as Single Page Interface(SPI).
 Provides a fluid user experience similar to a desktop application.
 Navigation is performed by changing the state.
 In SPA all the necessary codes like HTML, CSS and JavaScript are retrieved
in a single page load; or resources are loaded on demand without
reloading the page at any time.
 the web page is constructed by loading chunks of HTML fragments
Why SPA?
 Capable of decreasing subsequent load time of pages by storing the
functionality once it is loaded the first time.
 Achieve a complex user interface with minimal communication to server.
 To build very interactive and data driven dashboards and also build Event
driven application.
9

10. WHY BACKBONE JS

11.  Highly customizable.
 Minimalistic library has very small footprint. (6.5kb)
 Modularity and Reusability.
 Designed more towards consuming RESTful web service.
 Very easy to implement complex user interaction.
 Free to use any JavaScript template engine.
 Vibrant community of plugin and extension authors.

12. QUICK FAQ

13. Does it replace
jQuery?
• NO
• Complementary
in their scopes
with almost no
overlaps in
functionality
• Backbone handles
all the higher
level abstractions,
while jQuery – or
similar libraries –
work with the
DOM, normalize
events and so on
Where can I use
• Ideally suited for
creating front end
with heavy data
driven
applications
• Scales well, from
embedded
widgets to
massive apps
• Think Gmail
can still use other
libraries
• Absolutely.
• Typical DOM
accessing, AJAX
wrapping.
• The templates and
script loading
libraries.
• It's very, very
loosely coupled,
which means you
can use almost all of
your tools in
conjunction with
Backbone.

14. Has a steep learning curve.
As the code grows the application becomes difficult to manage, its
always better to use helper libraries to modularize the application.
(e.g. marionettejs, chaplinejs, layoutmanager etc)
Ineffective view management might lead to zombies views and
duplicate events
Nested collection and Nested model structure is difficult to manage
Backbone js is built for restful services which makes it troublesome
while dealing with soap and regular html responses.
14
CHALLENGES FACED

15. Real world Backbone.js
Applications

16. USA Today
Takes advantage of the
modularity of Backbone's
data/model lifecycle —
which makes it simple to
- create
- Inherit
-isolate
- link application objects
to keep the codebase
both manageable
and efficient.
Website also makes
heavy use of the
Backbone Router to
control the page for both
pushState-capable and
legacy browsers.

17. LinkedIn Mobile
 Backbone made it easy to keep
the app modular, organized and
extensible in order to improve
LinkedIn's user experience.
 Views are rendered using
underscore templates.
 Backbone models / collections –
To store the JSON data received
from the server.
 It uses RESTful API request
through Backbone.Sync - to read
or save a model to the server.

18. Wal-Mart Mobile
 To create the new version of their
mobile web application.
 Uses Backbone.js as core library of
their mobile shopping cart.
 created two new extension
frameworks in the process - Thorax
and Lumbar.

19. Airbnb
It started with Airbnb
Mobile Web and has
since grown to :
– Wish Lists
– Match
– Search
– Communities
– Payments
– Internal Tools
Airbnb uses Backbone.js
to let users and search
engines browse available
travel accommodations.

20. SUMMARY
 Limitations with plane JavaScript.
 What and Why of Backbone JS.
 Brief description about MVP and SPA.
 Frequently asked Queries and Clarifications.
 Big companies who use Backbone JS.
 Backbone has many operations and options and is
always evolving, so be sure to visit the official website
and documentation for more details and the latest
features.
20

21. 21
Please, please, please !!!
A hammer is an excellent tool, but it’s not used for everything !!!

22. References
• http://backbonejs.org
• http://underscorejs.org
• http://addyosmani.github.io/backbone-fundamentals/
• http://www.pluralsight.com/training/Courses/Find?highlight=true&searchTerm=ba
ckbone
• http://backbonetutorials.com/
• http://www.codebeerstartups.com/2012/12/introduction-to-backbone-js-and-
setting-up-an-working-environment/
• http://code.tutsplus.com/tutorials/getting-started-with-backbonejs--net-19751
• https://www.youtube.com/watch?v=FZSjvWtUxYk
• http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-
getting-started/

23. QUESTIONS

24. Thank
You
Bangalore
Backbone JS
Hackers
24