glue code that looks into the DOM to find an element with a specific id, and update the HTML manually
Handling complex user events Persistently sync data between client - server
Introduction to backbone_js
INTRODUCTION TO BACKBONE JS
- Mohammed Saqib
Problems with JS
What is Backbone JS
Model –View - Presenter
Single Page Application
Real time applications using Backbone JS
Web application that involves a lot
as tangled piles of JQuery selectors
Hard to keep data in sync between
Pile of spaghetti code - code that is
disorganized and difficult to follow.
JAVASCIRPT IS VERY POPULAR
with a RESTful JSON interface and is based on
the model–view–presenter (MVP) application
Very lightweight, as its only dependency is on
It is designed for developing single-page web
applications and for keeping various parts of
web applications (e.g. multiple clients and the
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.
– Libraries: knockout JS, Backbone JS
– Frameworks: Angular JS, Ember JS.
Backbone Organizes the code
Creates clean and efficient code.
Based on Model-View-Controller.
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
Simplify maintenance greatly .
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 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
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
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.
Vibrant community of plugin and extension authors.
Does it replace
in their scopes
with almost no
• Backbone handles
all the higher
while jQuery – or
similar libraries –
work with the
events and so on
Where can I use
• Ideally suited for
creating front end
with heavy data
• Scales well, from
• Think Gmail
can still use other
• Typical DOM
• The templates and
• It's very, very
which means you
can use almost all of
your tools in
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
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.
Takes advantage of the
modularity of Backbone's
data/model lifecycle —
which makes it simple to
- link application objects
to keep the codebase
Website also makes
heavy use of the
Backbone Router to
control the page for both
Backbone made it easy to keep
the app modular, organized and
extensible in order to improve
LinkedIn's user experience.
Views are rendered using
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.
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
It started with Airbnb
Mobile Web and has
since grown to :
– Wish Lists
– Internal Tools
Airbnb uses Backbone.js
to let users and search
engines browse available
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
Please, please, please !!!
A hammer is an excellent tool, but it’s not used for everything !!!