Guide · Open source
How to use Backbone.js: models, views and collections explained
Updated · written with AI from the project's own documentation and checked against our catalogue data
Backbone is an open-source JavaScript library that adds structure to browser apps that do a lot of work in JavaScript. This guide explains its main building blocks, how to get the code, and where it fits compared with other options. After reading it, you should understand what models, collections, views and events are for and whether Backbone suits your project.
Backbonejashkenas/backbone · ★ 28.1k · MIT Install options & downloads Quick start
- 1Read the docs. Start at https://backbonejs.org for the documentation, licence and downloads.
- 2Get the code. Clone the repository with git clone https://github.com/jashkenas/backbone.
- 3Add Backbone to your project. Include it through your existing package or build setup so your app can import it.
- 4Define a model. Create a model to hold your data and listen for its change events.
- 5Group models in a collection. Put related models into a collection and use its enumerable helpers to work with them.
- 6Build a view. Attach a view to markup and declare the user events it should handle.
- 7Connect to your backend. Use the RESTful JSON interface to load and save models through your server.
What does Backbone.js give your JavaScript app?
Backbone supplies structure to JavaScript-heavy applications. It offers models with key-value binding and custom events, collections with a rich set of enumerable functions, and views with declarative event handling. It can also connect your front end to an existing application over a RESTful JSON interface.
- Models: hold data and support key-value binding and custom events.
- Collections: groups of models with a set of enumerable helper functions.
- Views: handle user events in a declarative way.
- RESTful JSON: connects the front end to a backend that serves JSON.
Install Backbone.js from the repository
The README lists no prerequisites. It shows one install command, which clones the repository from GitHub. The project's analysis notes that it is installed with a package manager.
For the full documentation, licence, tests and pre-packed downloads, the README points to the project homepage rather than repeating them.
- Homepage with docs and downloads: http://backbonejs.org
- Bug reports and feature requests: the project's GitHub issues page
git clone https://github.com/jashkenas/backboneCreate models and listen for changes
A model is the place to keep an application's data. Backbone models support key-value binding and custom events, so other parts of your code can react when a value changes. Refer to the official docs at backbonejs.org for the exact method names and examples, since the README does not list them.
- Store the data for one item in a model.
- Subscribe to events on the model to respond to changes.
- Trigger your own custom events when something important happens.
Group data with collections and render with views
Collections hold sets of models and come with a rich API of enumerable functions for working with them. Views handle user events declaratively, which keeps event wiring close to the markup it belongs to.
Connect the app to a server by using Backbone's RESTful JSON interface so that models can be read and saved through your backend.
- Use a collection when you need to filter, sort or loop over many models.
- Use a view to respond to clicks and other user input.
- Point your backend's JSON endpoints at your models to load and save data.
Get help and report problems
The README directs questions to Stack Overflow under the backbone.js tag, to a Gitter chat room, and to the Backbone Google Group. Bugs and feature suggestions go to the GitHub issues page. The project's code of conduct and security policy are linked from the repository.
- Stack Overflow: tag backbone.js
- Gitter chat: #jashkenas_backbone
- Google Group: backbonejs
- GitHub issues for bugs and feature requests
What people use it for
- Maintaining or extending an existing JavaScript app that already uses Backbone.
- Adding structure to client-side code without adopting a full framework.
- Connecting a JavaScript front end to a RESTful JSON backend.
Frequently asked questions
Is Backbone.js free to use?
Backbone is released under the MIT licence, as the project's repository states. The MIT licence is permissive, but read the licence file in the repository for the full terms.
What are the requirements for Backbone.js?
The README does not list any prerequisites. For the current setup and any environment notes, check the documentation at backbonejs.org.
How do I install Backbone.js?
The README shows a git clone command for the repository at github.com/jashkenas/backbone. The project's analysis describes the install method as a package manager, and the homepage has the docs and pre-packed downloads.
Is Backbone.js still worth learning?
It suits teams that already maintain Backbone code or want a small, unopinionated structure for client-side code. The README does not compare it with newer component frameworks, so weigh that yourself for a new project.
What are alternatives to Backbone.js?
Projects listed as comparable include Marionette, Knockout and Ember.js. Marionette is built on top of Backbone, while Knockout and Ember.js are separate options.
Where can I get help if something breaks?
Ask questions on Stack Overflow with the backbone.js tag, in the Gitter chat or on the Google Group. Report bugs on the GitHub issues page.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Backbone is a good fit for developers who maintain an existing Backbone app or want a small, unopinionated structure for client-side JavaScript that talks to a RESTful JSON backend. Beginners who want a complete, batteries-included framework, or teams starting a new project who want the most popular component model, should look at other options such as Ember.js or Knockout.
Install options & downloads