What Is Backbone.js? Models, Views, Routers and Modern Alternatives

What Is Backbone.js?

Backbone.js is a small, open-source JavaScript library that gives web applications structure through models, collections, views and routers. It is an open-source component of DocumentCloud, was first released in 2010, and is MV-style rather than a full framework: it connects your data to a RESTful JSON API and leaves the rest of the architecture to you. Backbone's only hard dependency is Underscore.js, and jQuery is optional but needed for Backbone.View DOM handling and REST persistence. The current release is 1.6.0, according to backbonejs.org.

In the early 2010s, Backbone was one of the first libraries to bring organized client-side code to single-page applications, before React, Vue and Angular dominated. Companies like Airbnb, Hulu and SoundCloud used it. Today it mostly lives on in older codebases, so knowing how it works is useful if you maintain one.

The Four Core Pieces of Backbone

Models

A model holds data (attributes) and the logic around it, including validation and syncing with a server.

const Todo = Backbone.Model.extend({
  defaults: { title: '', done: false },

  validate(attrs) {
    if (!attrs.title) return 'A todo needs a title';
  },
});

const todo = new Todo({ title: 'Write the post' });
todo.set('done', true);

Models fire a change event whenever an attribute changes, which is how views know to update.

Collections

A collection is an ordered set of models with helpers for sorting, filtering and fetching from an API. It fires events when models are added or removed.

const Todos = Backbone.Collection.extend({
  model: Todo,
  url: '/api/todos',
});

const todos = new Todos();
todos.fetch(); // GET /api/todos

Views

A view owns a DOM element, renders it from a template, and listens to DOM events and model events. Backbone views are not templates themselves, they are the glue between your data and the DOM.

const TodoView = Backbone.View.extend({
  tagName: 'li',
  events: { 'click .toggle': 'toggleDone' },

  initialize() {
    this.listenTo(this.model, 'change', this.render);
  },

  toggleDone() {
    this.model.set('done', !this.model.get('done'));
  },

  render() {
    this.$el.text(this.model.get('title'));
    return this;
  },
});

Routers

Routers map URL fragments to functions, so a single-page app can have bookmarkable pages.

const AppRouter = Backbone.Router.extend({
  routes: {
    '': 'home',
    'todos/:id': 'showTodo',
  },
  home() { /* render the list */ },
  showTodo(id) { /* render one todo */ },
});

new AppRouter();
Backbone.history.start();

Backbone vs React, Vue and Ember

The big difference is who updates the DOM. In Backbone you write render() and wire events yourself. In React and Vue you describe the UI for a given state and the framework updates it. Read more in my Vue 3 guide, or see how Ember.js approaches the same problem with conventions.

Should You Still Use Backbone?

For new projects, probably not. React, Vue, Svelte and Solid all provide declarative rendering and bigger ecosystems, and SolidJS is a good example of the modern signals approach. Backbone still makes sense when you maintain an existing Backbone app, need a tiny dependency for a small widget, or want to understand where later frameworks borrowed their ideas from. Its pieces (models with change events, collections, routers) show up in many descendants.

If you are migrating, move one view at a time, wrap new components so they can live beside Backbone views, and replace models last.

Frequently Asked

What is Backbone.js used for? Structuring client-side JavaScript apps with models, collections, views and routers, usually against a REST JSON API.

Does Backbone.js require jQuery? No, its only hard dependency is Underscore.js. jQuery (or a substitute such as Zepto) is needed for Backbone.View and REST persistence.

Is Backbone.js dead? It is mature and rarely updated. It is still maintained and used in legacy apps, but most new projects choose React, Vue or similar.

What replaced Backbone.js? Component frameworks like React, Vue, Angular and Svelte, plus opinionated frameworks like Ember.