Updated March 31, 2023
Introduction to MVC Architecture
MVC is not a framework or programming language. It is a design pattern which helps you to write code in such a manner that it becomes easy for distribution of task, testing and maintaining the application. It focuses on segregating the code based on the concern of the code. The code is divided mostly into the three parts namely Model, View and Controller. This is what MVC stands for Model-View-Controller pattern. There are also other types of design patterns like MVC which are Model- View-ViewModel(MVVM), Model-View-Presenter(MVP), and Model-View-Whatever(MVW).
MVC Separate Concerns
Model View Controller design pattern mostly focuses on separating the business logic, user display interface and data from each other. The purpose of three separate concerns is as mentioned below.
1. Model
It holds the data and the business logic or service layer logic of the code. It contains all the data structures, properties, and attributes of the content that we need to transfer and manipulate. It contains entities, domain models and view models.
2. View
It is the user interface that contains the layout and displays the logic of code. It makes user interaction with the system and helps in accepting the inputs and displaying appropriate outputs to the user. This code is generally written using HTML, CSS, and javascript in web-based applications. The View Sends the request to the controller and renders the response received from the controller and displays the model content.
3. Controller
It routes the request and response, renders the request and communicates between the view and model parts of the code. Controller Renders and sends the response to the View and manipulates the Model. Sometimes, it manipulates and then sends the updated Model to the View.
Interaction and Example
Now, we will learn how the three components interact with each other, what is the role played by each of them and how they collectively help in making the code maintainable. Consider, an example of Online shopping where we need to maintain track of the items added by the user in his/her cart. We have to build an application for cart maintenance.
1. Model
It stores the data and whenever the state of data in it changes it usually notifies the View if we need to display the data to the user or to the Controller in case if the data needs to be processed further. In the above example of cart maintenance, the instance of the model will store the details like item name, quantity, price, and customer name. And whenever there will be any change in the content it will send it to display the change to View part of code or to the controller for further manipulation before displaying like GST calculation.
2. View
The view handles and contains the display and layout for the user which can be used by him or her to interact with the system. In our application of shopping cart, the View will display the list of the items in the cart and retrieve the data from the model when required and send the request to the controller if any new operation is done like insertion, updating or deletion of the item from the cart.
3. Controller
The controller contains the main logic of routing the request and updating and manipulating the model or View when needed. In the above example, the controller will collect the request from the View and then process and manipulate the model and then send the updated data to the View. For example, in case if the quantity of the particular item in the cart is increased then the view will send the request to update the quantity in the model to the controller and the controller will update the model and send the response back to the client along with the updated model instance. There may occur a case when there is no need to manipulate the model. For example, when the user just refreshes his/her cart or wants to sort the cart data on the basis of a certain parameter like price. In such cases, there is no need to update the model. The controller will directly perform an action and resend data to View.
MVC Architecture in Web-based Applications
- A design pattern is basically the solution that is suggested for most commonly occurring issues. Maintainability of the code has always been a difficult part. MVC pattern is one such design pattern and solution which is used by the developer to solve the issue of code maintenance and make the task easier and code more understanding.
- This pattern is very popular and most often used in web applications from the 1980s. Previously, this pattern was followed only for server-side programming like ASP .Net which is majorly used today too. The code on the server-side is split into different components like controller which handled the API request, business logic or the service code and the model part which holds the data which needs to be stored in the database, manipulated and sent to the client-side for the View part of the code.
- But with an increase in the web technologies and arrival of XMLHttpRequest that even made possible to do partial updation of the page as and when required. Hence, most of the time in web applications more logic is written on the client-side to increase the performance of the application and give an early response to the end-user. This has resulted in the following of MVC design pattern and architecture in many client-side languages too which include Angular.js, Amber.js, and Node.js. All of these frameworks and technologies use MVC design patterns in the same or the different ways.
Conclusion
We should always try to use the MVC pattern and architecture while coding for our applications. MVC pattern has many advantages like it helps in writing the clean code and separation of concerns make it easy for the further developers and maintainers of the code to understand the code and do any changes in it.
The distribution of labor and assignation of the task becomes easy and independent. Moreover, it helps in decoupling your code which further makes testing easier. MVC pattern can be followed on the server-side as well as client-side technologies.
Recommended Articles
This is a guide to MVC Architecture. Here we discuss an introduction, three separate concerns with examples and web-based application. You can also go through our other related articles to learn more –
