For the demonstration, I made a shopping list application which is available on github. Included is a web service which is used to manage the shopping list. You will need to install node.js to run the web service.
A traditional view of MVCWhen first looking at backbone, I was thinking of an MVC framework in terms of the ASP.Net implementation. Here, the framework does not impose anything upon the model. The model is full of classes to capture the state and the behaviour of the system. For my shopping list it would contain types for an item, the list class, the price of the item and the state of the item. All of these would have methods which capture the behaviour. This model consists of a lot of small classes working together to define the system.
The controller is responsible for incoming requests. It will then validate the request and process it. If it is a query it will gather the required data and return it. If it was a command it will find a handler and update the model.
When complete it will load the correct view passing in the state required to render it.
Breaking with traditionIn backbone.js, the model object is very simple. It does not model the behaviour of a system accurately in fact, there may only be one model object. Therefore, it is not a system for building fully featured domain models.
Coding the data sideThe first thing I did to find out how backbone can help my development was to create a model and a collection and point it at my web service.
I created a model object to represent an item in my shopping list:
There are three things happening above:
- I have created a model called ShoppingItem. This is told to use the Products collection in the constructor. It is also given some default values to be used by new instances.
- Here I create the collection of shopping items. In this simple demo I only have to set the endpoint for my web service and set the model object for the collection.
- Finally, I create a new instance of the collection.
The page itself has no real content, just a title. By using the console window in Firebug I can create, edit and delete new items in my shopping list
Here I can create a new item and when the save method is called, backbone sends a POST request to the service, creating the item.
Running this code in the browser will show backbone first POSTing the new item to the service. Then issuing a PUT to update the State, and finally a DELETE with the Id to remove it. Internally backbone uses either jQuery or Zepto for communication.
CollectionsIn backbone, a Model has to belong to a collection, in fact, it is a rare application where a single entity exists in isolation. Here is the Collection for my shopping list:
A very simple collection, it is told what type of Model it holds, and the URL for the web service to persist the objects to. The model object will use this URL when communicating with the web service. Finally it has method called toobuy which returns a list of all items in the collection where the state is “To buy”.
This highlights one of the first advantages of using backbone.js. I have concentrated on how my application will interact with the service before creating any UI components.
Look at the backbone.js site for more information and a growing list of examples.