MVC architecture: Explained with an example

What is an MVC architecture ?

An MVC is a popular software design pattern which is used to make applications by dividing the user interface(UI) and the logic of the program into different components. MVC stands for Model, View and Controller.In simple terms, it is used to divide the server code and the client code into different parts.

How I used to think an MVC structure was at first. But don't be scared its not that complex okay !

Why use MVC ?

If you already using React, then you know how writing code into 'components' has made our life easier than before. An MVC architecture has an almost similar approach - meaning we can write code into 3 main components which has the following benefits:

• Easy to maintain and expand since each important parts are in separate files namely Model,View and Controller.
• Can easily be tested individually without affecting one another.
• There are already many frameworks which uses MVC frameworks to build out web apps e.g Express, Ruby on Rails etc.

So what are Model,View and Controller first of all ?

• View

  • Consists of the UI(What the User actually sees and interacts with)
  • e.g React can be considered a view or if you are using a JavaScript templating engine like Ejs,this can be a view too.

• Model

  • Contains all the logic of how the data should structure inside a database. e.g Mongoose Schemas (if you are familiar with it) or in simple terms the structure in which data is to be stored in the Database.
  • Handles all the behind the scenes activities of storing data into the Database(Inserting,deleting,updating data etc.)

• Controller

  • The controller is like the intermediary through which all the requests and data between the View and the Model go through. Also do notice that: the View and the Model never meet or pass data with each other,every request must pass through the controller making it such an important component in an MVC architecture.
  • It basically handles all the requests like (GET,POST,PUT,DELETE etc) through the use of View.

Pictorial explanation

So lets explain this concept with a help of a diagram:

1. So what happens here is there is a User, who wants to add a movie.He uses the View (which is the UI of the web app) to makes some changes to it - by inputting some movie details into an input field.

2. When the user submits the Data using a submit button in Step 1, a request( in this case its a HTTP POST request) is made to the Controller. So in simple terms we are sending the input value to the Controller.

3. The Controller receives this data from the View and then handles or passes the request (in our case it is a POST request) to the Database for storing - Because unless the data is stored,we wont be able to retrieve it later on.For this we need to send it to the Model.

4. The Model handles all the data logic for getting this data from the Controller and then storing it in the Database behind the scenes (e.g storing the data with the correct 'key:value' pair in the Database).In our case, we are inserting this movie details into our database which contains a list of movies. But its not finished yet, because the data is only inserted into our Database's movie list but the user is not made aware of this. That is why we have to send the "updated movie list" back to the user. How do we do this?

The Model sends the updated movie list back to the Controller with a message - "Hey I have successfully inserted the movies into the Database okay ? :)". But if the Model fails to insert the movie,then it sends an error message instead saying "Sorry but the movie couldn't be inserted into the Database :( ".

1. Now the Controller cannot 'control the happiness' (yep, pun intended!) of receiving the updated movie list from the Model and shares its happiness with the View.

2. In the View the movie list is finally updated and sends this results back to the browser that the user is using. Now the user can finally see the updated movie list on his screen including the new movie that he has created.

An example of how the MVC code structure looks like for a simple app.

#1 When using Ejs template engine as the view

Inside the 'Views' folder contains all the necessary pages that a user will interact with

#2 When using React as the view


*Inside the 'client' folder contains all the UI.

Conclusion

Learning the MVC pattern can be pretty useful when you want to big bigger apps that are easy to manage.If you havn't understood this concept in your first shot,no worries it takes some time.Please let me know if there are any mistakes or suggestions to be made in this article :)

Incase we are meeting for the time - Hi ! my name is Ridhik, I love building stuff up from scratch and jot down my learning into articles. Feel free to connect with me on Twitter(@fluffyRidz).

Comments

[Shihaan W S]

Great article. Thanks :)

[Ridhik Govind]

Glad you liked it ;)