ELI5: MVC Pattern

Things can become messy really fast depending upon the application you are building. That's why we have a way of building and organizing things called the MVC pattern. Here we divide the application into 3 parts: Model, View and Controllers.

In one word Model "Data Storage", View "Visual elements like UI" and Controllers "Controls the flow of Data between Model and View".

Lets look at an example of IKEA store

  1. The Customer wants to buy a Chair, and places order to the Cashier.

  2. The Cashier then asks the group of workers to build the Chair.

  3. The Workers get individual parts from the Warehouse(Model) to build the chair. Then they assemble the parts and build a chair.

  4. They then return this chair to the Cashier.

  5. The cashier delivers this Chair to the customer.

Cashier is similar to UI of the app. Controller class is similar to the workers and the API/Database is similar to models.

What is happening inside an app ?

  1. When you click on an App, you are asking the app to display the UI.

  2. Then App's UI requests data from the Controller class.

  3. The Controller class requests the data such as Img, title, description etc from the API client.

  4. Then the API client fetches data from API/Database in the form of JSON, XML or HTML and sends it to the Controller class.

  5. Controller class converts this JSON data into Class Objects. So that we can easily modify and present this data.

  6. Now this object model is passed to the UI which access and displays on the screen.

References

  1. Code sensi: https://www.youtube.com/watch?v=zjfViRCjT5U&t

  2. Learned implementation from dbestech youtube channel