Table of content
MVC (Model View Controller) framework is an architectural/design pattern used in desktop and web applications. MVC framework separates the application into three main logical components: Model, View, and Controller. Each handles specific aspects of an application. Thus MVC makes the application development lifecycle effective and efficient.
The MVC framework was developed for desktop applications. But as the world wide web evolved with many functionality and complexity, the MVC framework was widely adopted as a framework for web development.
Components of MVC
Model
The model represents the application's data and business logic. It gets data handling requests through the controller, which it processes. After processing the request, it sends the updated information to the View (UI) through the controller.
It has the logical structure/representation of a database called a data model. Data models can represent tables (Relational Database) or documents (No SQL). The data model provides necessary functions/methods to manipulate the database (CRUD operations) like adding a new entry, updating the data, getting a list of all entries, getting data by id, etc. Using data models, different business logic is designed and implemented.
Controller
The controller is a collection of classes/functions that handle the flow of requests/responses by forwarding them to appropriate components where the actual processing occurs. It doesn't implement data logic and processes. It acts as an intermediatory component and establishes intercommunication between the model and the view.
The usual request/response handled by a controller are as follows:
- User's events and interactions (like clicking buttons, searching in the search bar) to Model
- Model response (like lists of entries extracted from the database (in JSON)) to View
- View response (like Updated list of entries in HTML format) to the user (browser window)
View
The view is the presentation component displayed to the end user through the client's software (browser). It is a collection of components that creates the user interface and web page example: buttons, forms, menu, etc. Users can interact with these UI elements and request various functionality from the server (where the controller resides).
The view consumes appropriate data from the model component through the controller and presents the rendered information in a format like HTML with CSS styles and JS.
Example
This section will demonstrate the MVC framework for a College Management System . These are general representations only to grasp some idea about the MVC framework.
Model Example
In the below example, we can see that each database table/document has its own model. Here the Student Model consists of the database schema and generic functions.
The database schema defines the structure of the student table in the database. Structure in this context means the name of the table columns (attributes), columns datatype, table constraints, etc. Schema maps the program data with the table representation in the database. Program data like JSON, XML, and variables are generally used for storing and communicating data within the application program. On the other hand, a database is designed with a focus on efficient data management and long-term storage. Thus to fulfill this gap, the schema is necessary.
Generic functions are the primitive functions provided by the model. These functions help to perform CRUD operations on the database. We can compose complex functions and business logic using primitive ones.
While creating models in real projects, we generally use object modeling packages for the respective platform and database. For example, mongoose.js is used for modeling the MongoDB database in node.js.
Controller Example
In this section, we can see that Student Controller has functions corresponding to the model component. The controller function receives request and response objects from the routes/URLs used in the view component. The controller function invokes the methods from the model component and passes the request object. After receiving the processed data from the model, the controller generates responses with appropriate status and sends them to the view component.
View Example
In Student View, <StudentList/> renders the list of students using GET request, <StudentForm/> is used to add new students to the list using POST request, and StudentUpdateForm is used to update the existing student's information using PUT request. URLs and API are used by UI elements to convey interactive events and requests to the controller.
Features
Separation of concerns
The MVC framework structures the application into distinct components and assigns responsibility to each. A component doesn't need to know about the implementation of others, which keeps separation of concern. The components can also exchange information through message-passing mechanisms like function invocation, and API calls, making them more integrated.
Modularity and Flexibility
Each component can be developed and tested separately, making it modular. Services don't need interruption while maintaining and updating. Besides that, scaling up the framework can support complex and large applications.
Conclusion
In this article, we learned about the MVC framework and its components. If you want to learn more about how to create REST API (node.js) using the MVC framework check out my Create REST API with Node and Express series here.
Thanks for reading this article. Don't forget to check out my other articles. You can support this article by sharing it.