Due to trends and advancement, people expect web pages to behave like a desktop app would. A seamless experience with an infrequent amount of page reloading. An application has a homepage and content should load within it.
What exactly is real-time? Simply said, it’s data that is presented to you without any action on your part. We see this sort of action in with the facebook newsfeed.
One type of library that has exploded are the MVC libraries. These types of libraries are the kinds of libraries that help you structure your app. Many of them assist greatly in creating the modern web sites that people expect, real-time apps. There are a lot of them, so how do you select one…
If you’re not sure what MVC is, it’s a design pattern that is heavily used in creating applications. From websites to iPhone Apps to desktop apps. In a nut shell, the MVC pattern helps you decouple your code into a logical subset. I’ll talk about it a little bit more later. If you want to learn more here are some resources.
Let’s go over some backbone basics. Firstly, Backbone has a dependency on the utility library underscore.js. The underscore library contains a large set of useful methods from iterating over Arrays to utility methods. Backbone also requires a DOM manipulation library. We’ll use jQuery because it’s the most popular, well known, and best documented.
Models define how your data is structured. These come with some useful methods. From methods for CRUD from your data to the server to simply retrieving said data from your model. We’ll get into these more later.
Collections are not just for holding sets of Models, but they also can fetch sets of data from the server. Collections also come with a ton of methods that are a part of the underscore library.
Views are in a sense like a controller. You could even call them ViewControllers. They typically take a model and/or collection as an argument when being instantiated. A render method is a method you frequently create when using views. It typically contains a small amount of logic that prepares a model to inject it’s data into a template. The underscore template method is frequently used when using Backbone because the underscore library is already available, though it is not necessary. Views can easily listen to DOM events, which we’ll see later. You can imagine a View as your DOM element in with code.
Backbone exposes an Events api that allows you to listen/trigger arbitrary events on Objects. The Events api uses the observer design pattern. Models, Views, and Collections ALL have the Events api built into them. This api is my favorite part of Backbone. A simple update to a single model can update 1 or more views simultaneously*. TODO wiki for observer pattern
It’s demo time! Let’s see Backbone in action.
Backbone comes built in with some great stuff, but it shouldn’t limit what you do with it. Backbone is the sort of framework that gives you a set of commonly seen practices when it comes to developing apps, but it doesn’t solve all your problems. Don’t be afraid to create your own base Models or Views to extend from that contain your applications commonly used practices.
* Trevor Landau New York Times @trevor_landau trevorlandau.net