Backbone.js Installation — Set Up Backbone in Your Project
In this tutorial, you will learn about Backbone.js Installation. We cover key concepts, practical examples, and best practices to help you master this topic.
Backbone.js installation requires three dependencies: Underscore.js for utility functions, jQuery or Zepto for DOM manipulation, and Backbone itself. You can install via CDN for quick prototyping, npm for modern builds, or download directly from the website.
What You'll Learn
In this tutorial, you'll set up Backbone.js in your project using CDN, npm, and direct download. You'll verify the installation works and understand the dependency chain.
Why It Matters
Proper installation ensures all dependencies load in the correct order. Backbone depends on Underscore and jQuery. Loading them out of order causes undefined reference errors that waste debugging time.
Real-World Use
Every Backbone project starts with setup. A security dashboard at a SOC might load Backbone through a build system like Webpack, while a quick prototype might use CDN script tags. Knowing both approaches lets you choose the right one.
flowchart LR
A[index.html] --> B[jQuery CDN]
A --> C[Underscore CDN]
A --> D[Backbone CDN]
D --> E[Your App Code]
B --> D
C --> D
Method 1: CDN Installation
The fastest way to start is linking Backbone from a CDN. Scripts must load in order: jQuery first, then Underscore, then Backbone, then your code.
<!DOCTYPE html>
<html>
<head>
<title>Backbone App</title>
</head>
<body>
<div id="app"></div>
<!-- Dependencies must load in this order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script>
<!-- Your application code -->
<script src="app.js"></script>
</body>
</html>
No output — the browser loads Backbone into the global Backbone object. Open browser DevTools and type console.log(Backbone.VERSION) to verify.
Expected console output:
1.4.0
Method 2: npm Installation
For modern projects using a build tool, install via npm.
npm install backbone underscore jquery
Then import in your JavaScript file:
var Backbone = require('backbone');
var $ = require('jquery');
var _ = require('underscore');
// Backbone needs jQuery and Underscore attached globally
Backbone.$ = $;
console.log('Backbone loaded:', Backbone.VERSION);
Expected output:
Backbone loaded: 1.4.0
Method 3: Using with ES Modules
If you use ES modules with a bundler like Webpack or Rollup:
import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';
Backbone.$ = $;
var Task = Backbone.Model.extend({
defaults: {
title: 'New Task',
done: false
}
});
var task = new Task();
console.log(task.get('title'));
Expected output:
New Task
Verifying Your Setup
Always verify that all three libraries loaded correctly before writing application code.
// verification.js
console.log('jQuery:', typeof $ !== 'undefined');
console.log('Underscore:', typeof _ !== 'undefined');
console.log('Backbone:', typeof Backbone !== 'undefined');
console.log('Backbone version:', Backbone.VERSION);
// Try creating a simple Model
var Test = Backbone.Model.extend({});
var t = new Test({ id: 1, name: 'test' });
console.log('Model works:', t.get('name'));
Expected output:
jQuery: true
Underscore: true
Backbone: true
Backbone version: 1.4.0
Model works: test
Project Structure for a Backbone App
Organize your files by feature for maintainable Backbone applications.
backbone-app/
index.html
css/
style.css
js/
vendor/
jquery.min.js
underscore.min.js
backbone.min.js
models/
task.js
project.js
collections/
taskList.js
projectList.js
views/
taskView.js
taskListView.js
appView.js
routers/
appRouter.js
app.js
This structure keeps models, collections, views, and routers in separate folders. Each file defines one component. The app.js file initializes everything.
Common Mistakes
- Loading Backbone before Underscore. Backbone depends on Underscore functions like
_.extendand_.each. If Underscore is missing, Backbone throwsUncaught TypeError: Cannot read property 'extend' of undefined. - Forgetting
Backbone.$ = $in npm setups. When using npm, Backbone does not automatically get jQuery. You must assign it explicitly. - Loading multiple versions of jQuery. Conflicting versions cause unpredictable behavior. Load jQuery exactly once.
- Using an incompatible jQuery version. Backbone 1.4+ requires jQuery 2.0+ or 3.0+. Older jQuery versions may have incomplete Deferred support.
- Placing application scripts before library scripts. The browser loads scripts sequentially. Your app code cannot reference Backbone until Backbone is loaded.
Practice Questions
- What are the three dependencies required by Backbone.js?
- Why must scripts load in a specific order when using CDN?
- How do you attach jQuery to Backbone in an npm-based project?
- What is the purpose of the
Backbone.$assignment? - Challenge: Create a minimal Backbone project from scratch using npm. Install backbone, underscore, and jquery. Create a single Model and log its attributes to the console. Do not use any build tool — use Node.js require.
FAQ
Mini Project
Create a project scaffold script that generates the folder structure above. The script should create empty model, collection, view, and router files with basic boilerplate. Test it by loading the generated app in a browser.
What's Next
Now that Backbone is installed, learn about Backbone Models and how they store and manage data. Then explore Backbone Collections for working with ordered data sets. Also read the Backbone.js Introduction for context on the framework architecture.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro