Your introductory sentence was actually a very good statement about the differences between Backbone.js and jQuery, so let's unpack it a bit.
On the one hand, the two libraries do not compete at all - they are free.
As an example, here are some things I would do with jQuery:
- Animated Slideshows
- Shape control enhancements, such as iOS spinner number
- Toggle element visibility based on class name
And some things that I could do in Backbone.js:
- Create a photo album where the user clicks on a thumbnail and can view a larger version of the photo, as well as some data, such as the camera used, location and name of the photographer.
- Create a master page / part type that represents the data grid and allows the user to click on individual elements and update them in the form.
jQuery stands out at the micro level - selecting page elements, smoothing out differences in how browsers handle events.
Backbone.js is larger. It helps you manage the logic of data and applications. In the above example of a photo album, Backbone provides several useful structures: you have something to contain all the data associated with the photos (model), a list of all the photos in the album (collection), and somewhere you put the logic that determines what happens when the user clicks on a thumbnail (view). These are the basic controls for a database or application.
Backbone.js benefits from jQuery, though, or something like that to help display the results of your data and application logic in the DOM. For example, you can use jQuery to select an element on a page that will serve as a container for your Backbone application. Also commonly used is jQuery $(function () {}); to launch parts of your backbone control. You will probably also see error messages checking form fields using jQuery.
In jQuery, you can create large, complex user interfaces. We have several applications that I support at work. But it’s difficult to work with them, since jQuery is not intended to provide the structure of the application. In particular, the jQuery API, based on the selection of groups of elements and then passing callback functions that control these elements, is not a good template for use in a large complex control or application. You have many nested functions, and it’s very difficult to understand what is going on.
I am currently recycling one of these controls in Backbone.js. As a final example, here is a brief description of how my thought process differs when working with the same control in both different libraries.
In jQuery, it bothers me:
- Am I using the right selector to capture a group of
li elements that I want? - Do I need to re-populate this list of values when this Ajax call ends?
- How can I put these array values back into the
input elements on the page?
In Backbone, I'm more focused on:
- What is the correct logic for checking this set of properties of my model element?
- When the user clicks the “Add” button, should I immediately add a new item to the collection or do I need to wait until they fill all the data, and is this “really”?
- How should an item in my collection respond when an item is immediately before or after it is deleted?
jQuery handles detailed details, while Backbone handles higher-level ones.
In conclusion, note that I used the words "control" and "app" when discussing Backbone.js examples. It is not true that Backbone.js is for single-page applications only. It is true, however, that Backbone.js is good for creating complex applications that manage data and handle a lot of logic. It would be foolish to use it for small user interface elements - the additional structure that it imposes is not required.
Update: Regarding multiple pages, yes, Backbone really provides a powerful mechanism for saving your data. Each model has a save method that will make an AJAX call to store changes on the server. Thus, while you save your data, you can use a multi-page application. This is a very flexible model, and how we are likely to end using Backbone at work. Although I would like to create a one-page application, we have 10 years of experience in our existing multi-page application. We aim to rebuild some of our more intensive user interface components in Backbone, and then synchronize the changes with the server before the user moves to another page.