How does Backbone.js relate to “traditional” MVC ?

Backbone.js is a lightweight and flexible JavaScript framework designed to develop single-page applications (SPAs) that run entirely in the browser. It is an implementation of the Model-View-Controller (MVC) design pattern, a software architecture commonly used for creating web applications. However, Backbone has its own take on the traditional MVC pattern and is often referred to as a “modified” or “simplified” version of MVC.

In this topic, we will explore how Backbone relates to traditional MVC by looking at the roles of each component, how they interact with each other, and how this relationship can be demonstrated with a simple example.

Traditional MVC: Before we dive into Backbone, let’s first examine the traditional MVC pattern. In traditional MVC, the application is divided into three interconnected components:

1. Model: The model is responsible for managing data and the business logic of the application. It represents the application’s data and defines how it is manipulated and stored.
2. View: The view is responsible for rendering the user interface (UI) and displaying the data to the user. It receives input from the user and sends it to the controller for processing.
3. Controller: The controller is responsible for managing the flow of data between the model and the view. It receives input from the view, processes it, and updates the model accordingly. It also retrieves data from the model and updates the view with the new data.

The MVC pattern separates the application’s concerns into distinct components, allowing for easier maintenance, testing, and development. It also promotes code reusability and reduces code duplication.

Backbone MVC: Backbone.js implements a modified version of the MVC pattern that simplifies the components and their interactions. It is often called a “simplified” version of MVC, but it is more accurately described as a “modified” version that adapts the pattern to fit the needs of single-page applications.

Backbone’s version of the MVC pattern consists of three main components:

1. Model: This component is responsible for representing the data of the application. It contains the state of the application and provides an interface for accessing and modifying that state. Models can also contain business logic and data validation rules.
2. View: This component is responsible for displaying the data of the application to the user. It listens for changes to the Model and updates itself accordingly.
3. Controller: This component is not explicitly defined in Backbone’s interpretation of MVC. Instead, Backbone provides a Router component, which is responsible for mapping URLs to actions in the application. The Router is similar to a Controller in traditional MVC, but it does not have any direct relationship with the Model or View components.

Now let’s look at an example of how Backbone can be used to build a web application. In this example, we will build a simple todo list application. The application will allow users to create and manage todo items, and it will use Backbone’s MV* architecture to organize the code.

First, let’s define the Model component. The todo list application will have a single Model, which will represent a todo item. The Model will have two properties: a description, which will contain the text of the todo item, and a completed flag, which will indicate whether the item has been completed or not. The Model will also have a toggleCompleted() method, which will be used to toggle the completed flag.

Javascript

var TodoItem = Backbone.Model.extend({
    defaults: {
        description: '',
        completed: false
    },

    toggleCompleted: function () {
        this.set('completed', !this.get('completed'));
    }
});

In the todo list application example, the control view component can be thought of as the user interface (UI) element that allows the user to interact with the model and trigger updates to it.

In the case of the `TodoItem` model, the control view component might be a checkbox that allows the user to toggle the completed attribute of the model. The code you provided includes a method called `toggleCompleted,` which would likely be called in response to a user action on the checkbox UI element.

Here’s an example of how you might use the `TodoItem` model with a control view component in a Backbone View:

Javascript

var TodoItemView = Backbone.View.extend({
    tagName: 'li',

    template: _.template($('#todo-item-template').html()),

    events: {
        'click .toggle-completed': 'onToggleCompleted'
    },

    initialize: function () {
        this.listenTo(this.model, 'change', this.render);
    },

    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    onToggleCompleted: function () {
        this.model.toggleCompleted();
    }
});

var todoItem = new TodoItem({
    description: 'Take out the trash'
});

var todoItemView = new TodoItemView({
    model: todoItem
});

$('#todo-list').append(todoItemView.render().el);

In the todo list application example, we have used Backbone’s MV* architecture to organize the code. As I explained earlier, in Backbone’s interpretation of MVC, the Controller component is not explicitly defined. Instead, Backbone provides a Router component, which is responsible for mapping URLs to actions in the application. The Router is similar to a Controller in traditional MVC, but it does not have any direct relationship with the Model or View components.

In our example, we have not defined a Router component because our application is relatively simple and does not require complex routing. However, in a more complex application, we might define a Router to handle navigation and user input.

For example, let’s say we wanted to add the ability for users to filter the todo list by completed status. We could define a Router that listens for changes to the URL and updates the View accordingly. Here’s an example of what that might look like:

Javascript

var TodoRouter = Backbone.Router.extend({
    routes: {
        '': 'showAll',
        'completed': 'showCompleted'
    },

    showAll: function () {
        todoList.filterCompleted = null;
        todoList.trigger('filter');
    },

    showCompleted: function () {
        todoList.filterCompleted = true;
        todoList.trigger('filter');
    }
});

var todoList = new TodoList();
var todoRouter = new TodoRouter();
Backbone.history.start();

In this example, we have defined a Router that has two routes: an empty route, which shows all todo items, and a route called “completed”, which shows only completed todo items. When the Router matches a route, it calls the corresponding function, which sets a filter value on the todoList and triggers a “filter” event.

The todoList listens for the “filter” event and updates the View accordingly. In this way, the Router acts as a Controller by coordinating between the Model and View components and responding to user input.

Conclusion: Overall, Backbone provides a lightweight and flexible approach to MVC that can be easily adapted to various project requirements. It’s a useful tool for building single-page applications, and it’s worth considering for any developer looking to build scalable, maintainable, and modular web applications.