Primer to Backbone.js

Backbone is a front end MVC framework that provides the ability to structure data. When I first heard of Backbone being a client side MVC framework I thought,

"I know how MVC works on the server side, but what does MVC mean in the context of the client?"

MVC is a design pattern; MVC applied to a back-end server is only one implementation of that design pattern. MVC on the client side is a different implementation of the same pattern. The model interacts with the server, performs data manipulation, and communicates with our view. The view renders our model data, listens for events, and makes changes to the DOM. The view ensures that model data is being represented accurately in the DOM.

The notion of controller has different meanings in different front end frameworks. The model and view are both straight forward and consistent among all frontend MVC frameworks, but the controllers role differs between frameworks. In the context of Backbone, the controller could be likened to our routes and navigation. The users ability to navigate around the page and how that navigation effects our data.

What is the purpose of Backbone.js?

Anyone who has ever made a non-trivial web application knows how inefficient it can be to try to manage data through nothing but DOM interactions. Using vanilla Javascript and jQuery can make it difficult to manage large amounts of data. Backbone solves this problem by providing models, which provides a place to store information, and views, which allow us to easily make changes to the DOM that correspond to any changes in our models. Backbone provides client-side app structure by giving us models to represent data and view to hook up models to the DOM.

Backbone.js Models: Managing Data

Create a model class

var TodoItem = Backbone.Model.extend({});

Create a model instance

var todoItem = new TodoItem({body: "Pick up dry cleaning stuff", id: 1});

Get an attribute

todoItem.get('body');

Set an attribute

todoItem.set({body: "Do NOT pickup dry cleaning"});

Sync to server

todoItem.save();

Backbone Views: Displaying Data

Create a view class

var TodoView = Backbone.View.extend({});

Create a view instance

var todoView = new TodoView({ model: todoItem });

Notice we are passing in the model object we declared previously. Model objects and view objects have a one to one relationship. That is, every model object has a single view object which handles the rendering of it. Additionally every view object has a top level element that is by default a <div>. Every view represents an html element. We can create a render method to display the html representation of our data:

var TodoView = Backbone.View.extend({
  render: function() {
    var html = '<h3>' + this.model.get('description') + '</h3>';
    $(this.el).html(html);
  }
});

This declares the render method on our class declaration of ToDoView. this.el refers to the top level element of the view object, which will be a <div> since we did not set it manually. The render method is creating the following HTML structure:

<div>
  <h3>descriptive text here</h3>
</div>