MVC architecture, Understanding Concept !

Reading Time: 4 minutes

MVC in MVC architecture stand for Model, View and Controller. MVC architecture divides the code into three parts, so that the developer can work on these parts independently. It divides a web application into Model, view and controller. When it was invented , it was basically used for desktop GUI apps, but now it is mostly used for web apps. Almost all major frameworks employ MVC architecture (eg. ROR- Ruby on Rails, MERN(React) and MEAN(Angular) stacks) however some use a slightly different architecture like Django uses MVT (Model, view and template) that is nothing but just the updated way to use MVC architecture.

Model

Model is where the logic related to data goes. This part is connected to the database and help to retrieve data and use that data in the rest of the application. Suppose we are using MySQL database for storing student details with test-marks and someone wants to see the marks scored by a student named “X” in a particular test. So using the model part we can fetch the marks scored by student (in this case “X”) in that particular test. The main takeaway here is that the model will never establish a direct connection with the view, that’s when controller comes into the picture. Lets discuss about view and controller next.

View

View is used to represent data to the client, so what basically we see on the website when we visit is due to the view part of MVC. In other terms it is related to the front-end part of the website (HTML, CSS, JS etc.). View is created by the logic related to data written in model, however the data-logic is not decoded (and represented) by the view directly.

Controller

Controller acts as a broker between model and view as it gets the data from the model and sends it to the view so that data can be represented to the user (client). Without controller it would be impossible to establish the connection between model and the view.

Advantages of MVC:

  • Model, view and controller can be designed separately
  • Easy to scale, hence also suitable for large applications
  • Components (Model, view and controller) can be reused

Drawbacks of using MVC:

  • Implementing MVC is not a good idea for small projects as it may increase unnecessary complexities.
  • You must use a controller if you want view to talk to model.
  • Maybe more complex for new developers.

Practical example of MVC:

Let’s say you go to buy a paddle bicycle. So you reach out to salesman or the owner and tell him your requirements (like you want 22 inch frame, with electric horn, with basket, with water-bottle space, mountain-bike etc.). Then the salesman will show you the bicycles that fit your requirements. After that, You will probably decide to buy the bicycle that you like the most. You tell the shopkeeper about your choice. Salesman will then tell the service-boy to fit (assemble) the bicycle you have chosen. After assembling and selling the bicycle to you, he will update the inventory (if there were 30 bicycles of the same model that you have chosen, and you bought 1 bicycle so he will update the bicycle number to 29 in the (inventory) records). So in this example if you have noticed that you only communicated with the salesman (or shopkeeper). You did not tell service-boy how to assemble and stuff plus you also did not change the data in the inventory. So in the context of this example, you are the “view” (client-side), salesman(or owner) is the “controller” (handling your instructions) , service-boy can be seen as “model” (processing the instructions and logic) and lastly inventory can be seen as the “database” (to which the model uses).

Let’s take an another example, Suppose you are watching a video on YouTube, so as a viewer you just need to click (or tap) on the video and let’s say you also download the video. So in this process of doing different actions you only interact with the YouTube application (YT application UI(user interface) to be more specific). So as you are interacting only with the UI part (client-side) you can be considered as view. YouTube application’s UI (user interface) part can be considered as the controller because it is handing your instructions (playing and downloading the video in this case). YouTube application (as a whole (excluding UI)) can be seen as a model (processing the feedback it got from the UI). Finally to make you able to watch a particular video, YouTube will get that video from its cloud (or other) storage and to save the video it will download it on your app storage(internal). So the cloud storage and your app storage can be seen as the database (model or YouTube app interacts with it).

Summary:

  • MVC was first introduced by Trygve Reenskaug.
  • Ruby, Struts, Java (Spring) etc uses MVC architecture.
  • Django uses MVT (Model, View and Template) version of MVC (Model, View and Controller)
  • Model is for handling business logic and it communicates with database.
  • View is for client-side part.
  • Controller acts as an mediator between Model and View and make communication happens between them.