Problem

According to the Backbone Documentation "Backbone should continue to be a tool that gives you the freedom to design the full experience of your web application", this leaves so many options for the developers to define their own implementation for the application, leaving the architecture decisions be defined according to the developer expertise. This flexibility allows to create great variety of implementations but also open the window to have poor and not scalable applications.

Objective

Create a scalable single page application using Backbone JS, Underscore JS, Require JS and Bootstrap applying the MVC pattern.

Implementation

Backbone is more a Model View Model (MVM) "framework" instead of Model View Controller (MVC). This is because does not provide a "Controller" component by default.

There are some many discussions about what a "Controller" should be and if this is not already cover by the Router, in my opinion the Router has a very specific function listening for the changes on the URL, but there is not component who actually is just responsible to integrate multiple views and make them work together, this is the 'Controller'.

For this example, I integrated a custom component called "Controller" who is the responsible to encapsulate chunks of functionality wrapping different "Views" in a single component and handling the interactions between them.

The "Controller" is just an object with a common signature that includes the methods:

• init: Called at the beginning, before the controller is executed to setup variables or the layout for the component.
• run: It is the main method of execution who receives the data and region where the component needs to be displayed. It is important to allow the component be reused.

Each controller is been executed for the function ExecuteController that is the responsible to provide the "Data" and "Region" the controller could use to render the content.

Layouts

Other key component in the implementation is the use of the Layout, who is the responsible to render the views in a specific section and avoid Zombies views effects making sure the section is cleaned and the events are unbind on the view destruction.

Exceptions

As each controller is responsible just for specific functionality to be render in a specific section, if there is any issue while processing the component, it is possible to display an error just in that section, not affecting all functionality.