Backbone.js Introduction and Resources

Backbone.js is a JavaScript library that was created by Jeremy Ashkenas, who also created or co-created CoffeeScript, LiveScript, and Underscore.js. The project is hosted at GitHub and ongoing development is spearheaded by Ashkenas with a community of open-source contributors.

Backbone.js is intended to be used to build single-page JavaScript web applications. The library brings structure to the development of web applications by encouraging complete separation between application logic and the presentation of the application content.

Backbone.js Basics

Backbone.js is a client-side JavaScript library. Its dependencies include the Underscore.js and jQuery libraries, which must be loaded by the browser prior to loading Backbone.js. The library has a RESTful JSON interface, meaning that it can send and receive data to and from a web server using the lightweight JSON data format.

The library is designed with the Model-View-Presenter (MVP) programming architecture, a popular software design pattern for user interfaces. However, in the Backbone.js ecosystem, the terminology "models, views, and collections" is used.

Models, Views, and Collections

The philosophy behind Backbone.js is that application logic and the presentation of application data should be separated. This separation is maintained in the way that models and views are created and manipulated.

In Backbone.js, a model represents a single table of data along with the functions and logic needed to manipulate the data. The data is presented using one or more views, which are simply portions of a web application UI that translate the data in the model and adjust the webpage DOM to match. Views also listen for user input and send that input back to the appropriate model to update the data held in the model.

Backbone.js includes a built-in JSON API. When a model is changed, the change can be communicated back to a web server database over the JSON API. Since virtually all server-side programming languages can be equipped to send and receive JSON data, virtually any server-side language or application with a JSON API can be used to communicate data to and from a Backbone.js web application and update the application database accordingly.

Related models can be organized and managed by grouping them together into collections, which offer the added benefit of providing a single listening point whereby multiple views can be used to keep one or more views continuously updated.

What is Backbone.js Good For?

While Backbone.js is not as ubiquitous as the most popular JavaScript libraries such as jQuery and Modernizr, the library is among the top fifteen or so of all client-side JavaScript technologies. In addition, Backbone.js projects may not be as numerous, but projects that do use the library tend to be higher traffic web applications, some of which enjoy a high degree of name recognition.

For example, the Backbone.js website provides a list of known projects built with Backbone.js which includes a veritable who's-who of well-known internet startups and established digital titans such as:

  • Hulu
  • Quartz
  • Vox
  • WordPress.com
  • Disqus
  • Khan Academy
  • Walmart Mobile
  • Basecamp
  • Airbnb
  • Pandora
  • Code School
  • Trello
  • Stripe
  • And many more.

What sets Backbone.js apart from many other popular JavaScript frameworks — notable, AngularJS — is the relative freedom it offers to developers. While other leading frameworks may include built-in default features that are a great help (take two-way data binding for instance), Backbone.js does not. This is the key reason Backbone.js is referred to as a library rather than a framework. Instead, it provides developers with complete freedom to build a web application that conforms to their preferences rather than forcing the developer to accept a variety of pre-made decisions.

On the other hand, this does mean that more foundational groundwork must be laid when building a web application with Backbone.js than with a framework such as AngularJS that includes a pre-build foundational groundwork.

Resources

If you want to learn Backbone.js the first think you will need to do is to master JavaScript and jQuery. Since Backbone.js is a JavaScript library built to work alongside jQuery, mastering these two programming languages prior to tackling Backbone.js will save you a lot of time and frustration.

In addition, you'll want to get up to speed with Underscore.js, or it's descendant library, Lodash. Backbone.js requires that one of these two libraries be loaded prior to loading Backbone.js, so having a degree of familiarity with one or the other will come in handy.

Online Tutorials

If you want to get up and running with Backbone.js as quickly as possible, then tackling a few of the following tutorials is your best bet. We've sorted them in order of complexity. So, if you're a beginner, start with one of the first resources listed as the latter resources assume quite a bit of prior knowledge.

The Backbone.js GitHub repository also includes an extensive list of additional tutorials, blog posts, and examples of Backbone.js web applications.

Books

If you really want to master Backbone.js, or if you just prefer your education to be printed and bound, consider the following positively-reviewed texts.

Summary

Backbone.js is a JavaScript library designed for the development of one-page web applications. The library is noteworthy in the way that it offers full separation between application data and the views that display that data to application users, as well as the relative freedom — and corresponding responsibilities — it affords to JavaScript developers.


Further Reading and Resources

We have more guides, tutorials, and infographics related to coding and website development:

  • XML Resources: once thought to be the replacement for HTML, it is still a very popular data storage and transfer language.
  • PHP Introduction and Resources: the most popular server-side programming language in the world — and for a reason.
  • ASP.NET Resources: this guide will get you going with Microsoft's .NET framework for creating webpages.

What Code Should You Learn?

Confused about what programming language you should learn to code in? Check out our infographic, What Code Should You Learn? It not only discusses different aspects of the languages, it answers important questions such as, "How much money will I make programming Java for a living?"