Explain the Architecture of Backbone.js

Backbone.js was developed by Jeremy Ashkenas. The first version of backbone.js was released on 13th October 2010. It is a lightweight and powerful tool used for developing single-page client-side applications. It is based on the Model-View Controller framework that binds data, which is abstracted into models, and DOM which is abstracted into views, using events. It is a JavaScript library.

Applications of Backbone.js: Following are the applications of Backbone.js.

• It is used to create single-page client-side applications.
• It allows you to implement complex functionalities in your codebase in a structured manner.
• The MVC framework allows you to develop an application that works fast with a much simpler codebase.

Architecture of Backbone.js:

The architecture of Backbone.js consists of the following entities

1. HTTP Request
2. Router
3. View
4. Events
5. Model
6. Collection
7. Data Source

• HTTP Request: The client application(browser etc.) makes an HTTP request to a server requesting for some data resource ( files, images, text etc.) It uses the router to make the request to the server. Both request and response are governed by the HTTP protocol.  
• Router: The router is used to take the user from the current webpage to another. It navigates the application from one location to another. It is used to represent application entities in the form of a URL. Backbone.js uses the router to understand which page is to be rendered on the application. 
• View: View is a portion of the page where some data (text, images etc.) is rendered by the Backbone.js. A page consists of one or more views. A view has nothing to do with the HTML markup for the application. It has no information about the styling of the page either. It is basically the logical representation of the data model for the user which is updated in the UI of the application.  
  The best part about views is that a user needn’t refresh the page for any view to be reloaded. They are dynamic in nature and can be updated accordingly. Whenever an event occurs and the model changes, the view is updated as programmed automatically.  
• Events: In order to impart dynamic nature in the website, we use events. All the events are coupled with actions. Whenever an event is triggered, the corresponding action is invoked and performed. They are an integral part of the JavaScript DOM.
  Whenever an event occurs, it updates the view of the application by using the data models. They are an integral part of any application and are handled by the program in a synchronous manner.
• Model: Models consist of the application data that is required to be stored, the data logic and the primitive data objects. It is also used for storing the business logic. They are considered a core part of Backbone.js because they are responsible for data retrieval and data updation on the application UI.  
  The HTTP request sent to the server by the Routers is delivered to a model by the view which performs the required action (data retrieval or updation) and prepares the response that is to be delivered back.
• Collection" The collection is an array of logically-similar models. It is used to bind events with models. A collection can be formed as per business needs, you can define which models will be a part of the collection and what properties they’ll possess. It supports filtering and sorting for models that are a part of the collection. Whenever an event is triggered for any event, the same is triggered for the entire collection as well.  
• Data Source: Data source is the point of contact between the application and the database. It holds the data that is being updated or being retrieved from the database.

Working of Backbone.js: Following is the workflow of Backbone.js:

• The user sends a HTTP request to the server.
• Router is used to send that request and to navigate users to the URL of the response page.
• The view of the page logically represents the data model to the user.
• An event corresponding to the action required by the request is triggered in the collection.
• The models of the corresponding collection performs the necessary action and retrieves the requested data from the data source.

Reference: https://backbonejs.org/

shruti456rawal

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• Geeks Premier League
• Geeks-Premier-League-2022
• JavaScript-Questions
• Backbone.js

+1 More