Backbone.js accomplishes all of this by enforcing organized, neat code with its unique evolution on the MVC design pattern.
What is the model view controller design? It’s an approach to development that is all about separation of code. Typically used in server-side development, it’s designed to break out components—database code, browser view code, and the scripts that bridge the two. This development paradigm is central to Backbone.js’s functionality.
MVC-designed code is always broken into three sections—a process called decoupling. The MVC components include the:
- Model: the code that stores and retrieves the application’s data. It sends updates to the View, and gets manipulated and updated by the Controller.
- View: the code that displays the Model data onto whatever graphical interface is being used, like a tablet or a computer screen. It’s the user interaction component, and sends any user requests to the Controller for processing.
- Controller: the code that bridges the Model and the View components, acting like a mediator between the two. It receives user input from the View (like a click or a mouse-over) and sends and receives an update from the Model, then returns that to the View.
Backbone.js, however, isn’t quite MVC—it’s MVC-inspired, or MV*. Here’s a look at why.
BACKBONE.JS’S KEY DIFFERENTIATORS
Backbone.js has no Controller. More recent versions of Backbone don’t have a separate Controller component. The Controller functionality of bridging the Model and the View has been allocated into other components.
The components of Backbone.js:
- Model—contains the business logic, validations, and data storage for an application. In Backbone.js, the model receives HTTP requests from events passed by the view via the router and then synchronizes that data from the database before sending the response back to the client.
- Collection—an ordered set of models which can bind to events whenever a model in the collection is modified. Like an individual model, a collection fires events whenever a change occurs. Whenever a model is added or removed from a collection a change event is fired.
- Event—a module that can be mixed into any object, giving it the ability to bind and trigger custom named events like user clicks or mouse overs. This allows almost any object in Backbone.js to listen to and dispatch events.
- Routers—which create a navigational structure. A similar function to the traditional MVC controller, and where most of that former functionality now resides in Backbone.js
- Sync—which drives most of the communication between the Backbone.js framework and any server-side technology, like the application’s database