MVC Architecture in Web Applications

MVC architecture has become an extremely common and favoured design pattern for creating web applications. Let us explore more and learn why is it so famous and preferred in the world of web design.

MVC stands for:-

✓ Model(M): Handles the data(database).

✓ View(V): Handles what the user sees(html, css, js).

✓ Controller(C): Acts as a mediator between view and model.

Most modern web frameworks in JS follow the MVC design pattern encouraging developers to write clean, structured code. It allows the developers to benefit all the benefits of modularity along with integrating a structure that accommodates multiple developers working on the same project.

MVC separates business logic and view logic.

Let us explore each term to understand in detail which components play what role in this architecture.

Model

• The Model component deals with the data of the application.
• This component is responsible for managing the data, logic, and rules of the application.

View

• Handles the User Interface(UI). This component typically consists of the html, css, and static js files.
• The view component is used to attach and trigger user events but the event handling comes under the domain of the controller.

Controller

• The primary responsibility of a controller is to handle the events triggered by user input and also acts as a mediator between the view and model.
• In other words, the controller contains client-side specific logic.
• The controller provides various functions based on events that can be triggered and then contacts the model for reading/updating data and presents the new information to view component to be shown to the user.

Note: A router handles the HTTP requests or events towards the function in the controller that handles them. Now let’s understand their working properly.

▹ The user interacts with the browser. [Triggers event]

▹The browser then sends a HTTP request to the web-server.

▹The router gets a HTTP request from browser and directs it towards the controller.

▹The controller than interacts with model to modify/read data from the database.

▹The new information is then passed onto the view which changes its state accordingly and sends it back to the browser for the user to see.

Directory Structure

A common way to implement this architecture is to have the files for respective components in different folders. A very basic directory structure for a project created as per MVC architecture might look something like this →

project-folder 
    │
    ├───controller
    │       controller.js
    │        
    ├───model
    │       db.js
    │       
    └───view
    │       home.html
    │
    └───index.js(entry-point to project)

Note: Obviously the file-names could be anything and the folder structure might differ a little too. In most cases, there are more folders too containing static files, resource files, cache, routing, etc.

• The model folder contains the schema for the database, functions to access it and might also contain configurations to connect to the database. (Most developers prefer to have the file to connect to the database separately in a different folder. Its a design preference depending on the developer)
• The controller folder contains various event handlers and has access to functions in model.
• The view folder contains the html, css and js files for viewing. Again, most developers prefer to have css, js files in a separate static or assets folder.

Conclusion

The MVC(Model-View-Controller) is a three-component architectural design each having its own role.

✦ Model handles data

✦ View handles User Interface(UI)

✦ Controller mediates between model and view.

MVC has following benefits for the user →

• Modularizes the application
• Scalable coding design
• Separates business logic and view logic
• Allows simultaneous work between developers who are responsible for different components (such as UI layer and core logic).

Please post your feedback in the comments below.

Happy Learning!