1. Backbone.js is a lightweight JavaScript library that adds structure to client-side code and makes it easy to manage concerns in an application. 2. It uses an MVC pattern with models to manage data, views to manage the UI display, and routers to manage client-side pages and links events to actions. 3. Backbone.js dependencies include Underscore.js and either jQuery or Zepto, but it does not replace jQuery which handles DOM interactions and events.

1. Introduction to
Backbone.js
Pragnesh Vaghela | @technologythree | technologythree.com

2. Problem
1. web application that involves a lot of JavaScript
2. applications end up as tangled piles of jQuery
selectors and callbacks
3. hard to keep data in sync between the HTML UI,
JavaScript logic & the database
4. you can end up with a pile of spaghetti code - code
that is disorganized and difficult to follow
@ 2013 Technology Three 2

3. What is Backbone.js?
1. lightweight JavaScript library that adds structure to
your client-side code
2. makes it easy to manage and decouple concerns in
your application
3. MVC for the client
4. open sourced by company called DocumentCloud
5. light weight at under 4kb
@ 2013 Technology Three 3

4. Backbone.js MVC
1. your data as Models, which can be created, validated,
destroyed, and saved to the server
2. UI action causes an attribute of a model to change, the
model triggers a "change" event; all the Views that display
the model's state can be notified of the change, so that they
are able to respond accordingly, re-rendering themselves
with the new information
3. when the model changes, the views simply update
themselves
4. Backbone.Router provides methods for routing client-side
pages, and connecting them to actions and events.
@ 2013 Technology Three 4

5. Backbone.js dependencies
1. only hard dependency is either Underscore.js ( >=
1.4.3) or Lo-Dash
2. either jQuery ( >= 1.7.0)or Zepto
@ 2013 Technology Three 5

6. Does it replace jQuery?
1. NO
2. complementary in their scopes with almost no
overlaps in functionality
3. Backbone handles all the higher level abstractions,
while jQuery – or similar libraries – work with the
DOM, normalize events and so on
@ 2013 Technology Three 6

7. Where should I use Backbone.js?
1. ideally suited for creating front end heavy, data
driven applications
2. scales well, from embedded widgets to massive
apps
3. think Gmail
@ 2013 Technology Three 7

8. @ 2013 Technology Three 8
Real world
Backbone.js
Applications

9. USA Today
takes advantage of the
modularity of
Backbone's
data/model lifecycle —
which makes it simple
to create, inherit,
isolate, and 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
@ 2013 Technology Three 9

10. LinkedIn Mobile
to create its next-
generation HTML5
mobile web app.
Backbone made it
easy to keep the app
modular, organized
and extensible so
that it was possible
to program the
complexities of
LinkedIn's user
experience
@ 2013 Technology Three 10

11. Walmart Mobile
to create the new version of
their mobile web application
@ 2013 Technology Three 11

12. Airbnb
in many of its
products. It started
with Airbnb Mobile
Web (built in 6
weeks by a team of
3) and has since
grown to Wish
Lists, Match,
Search,
Communities,
Payments, and
Internal Tools
@ 2013 Technology Three 12

13. Pandora
to help manage the
user interface and
interactions. For
example, there's a
model that represents
the "currently playing
track", and multiple
views that
automatically update
when the current
track changes. The
station list is a
collection, so that
when stations are
added or changed, the
UI stays up to date
@ 2013 Technology Three 13

14. Thank You
Pragnesh Vaghela | @technologythree | technologythree.com