Backbone.js Architecture

by

The structure to the web applications in Backbone.JS can be easily understood and specified by its architecture. The separation of the business logic and the user interface logic is easily possible with this architecture. There are mainly seven modules in the Backbone.js Architecture: HTTP Request, Router, View, Events, Model, Collection and Data Source.

 

MODULE FUNCTION
HTTP Request HTTP requests are sent by the HTTP Clients in the form of a request message.
Router A router routes client-side application to actions and events.
View The response to the client requests is displayed by View.
Events When an event occurs, the view displays the data of the model.
Model The data from the database is retrieved and is populated by the model.
Collection A collection is a set of models.
Data Source The data source is the storage of the data requested by the client.

 

HTTP Request:

Considering the web browsers, search engines etc., as the HTTP clients, the HTTP requests are sent by them, usually for a file such as documents, images etc. The requests are sent in the form of a request message using the HTTP request protocol.

 

Router:

The client request is sent by an HTTP client using a router. The main purpose of a router is to route client-side applications. The router uses the URL to connect the client-side applications to actions and events. Thus routing can be simply understood as a URL representation of an application’ objects. To specify an application’ state which needs to be sent to the user, a URL is used. It also offers the feature of manual change of the URL by the user. For important locations in the app, web applications may provide linkable, bookmarkable, and shareable URL and this is when a router is needed because of its mechanism of copying the URLs to reach the view.

 

View:

A user request is made using a router. The response to these requests is displayed by a user interface, often called Views. The View module in the Backbone.js view does not only display the response but also specifies how to display and what to display from the concerned application. Instead of having HTML markup for the application. the View offers to the user with the model’s data. Being unaware of the HTML and CSS, the View displays the looks of the concerned data model. If a change has occurred in the model, each view can be updated independently, and thus this process does not require the reloading of the whole page.

 

Events:

The view displays the data of the model when an event occurs, and thus event is a vital part of an application. The user’s custom events can be bound to an application using an event, and this capability of the event is not only restricted to the binding process but is also expanded to the triggering of the custom events. The attribute of the events in Backbone.JS to get mixed to any object is an advantage. The binding of the custom events can be done by using the name of a choice.

 

Model:

The core of a JavaScript application is a Model. The data is retrieved and is populated by the model. The data storage acts as a storehouse to serve both the purpose of the models’ retrieval and models’ saving. It mainly consists of:

  • the data of an application and,
  • the logic of the data

A Model is a representation of a basic data object in the framework and is also a representation of the business entities with some business logic and business validations which is used for data storage and business logic.

 

Collection:

A set of models is called a collection. The type of model and the instance of properties can be defined for a collection. A collection is created to serve the purpose of event binding when a modification is made in the collection. The list of models in collection support sorting and filtering and thus the processing in the loop is easier.

 

Data Source:

A connection set up from a server to a database is defined as a data source. The data requested by the client is present in the data source. In Backbone.js architecture, the structure of the data source can be described in some simple steps:

  • The router is used to send a client request by an HTTP client.
  • The View displays the response to the users’ requests and also specifies how to display and what to display from an application.
  • The data from the database is retrieved and is populated by the model and collection by binding custom events.