Model-View-Controller (MVC) Explained with Food, Because Food is Delicious
If you have ordered from a restaurant, then you’ve already experienced MVC.
Sometimes programming concepts can get mundane and dry. The model-view-controller (MVC) architectural pattern is one of the most important blueprints for modern web programming. Many self-taught or junior programmers understand how to make things work, but in a world where communication and organization is crucial to company success, understanding MVC is your path to writing good code.
Note: I am self-taught and I was the aforementioned coder so I hope you find this helpful on your learning journey.
MVC is a standard way of organizing code into reusable boxes.
Lets get to eati — err, I mean coding.
After scrolling through yelp for new restaurants, you decide on a quaint, local Indian restaurant. You are a user looking to place an food order. You walk into a small, dimly lit room with soft Carnatic music playing in the background. You browse through the menu and finally decide on the special. When it’s your turn to order, you point to the menu and order (user input), “One bhindi masala with paratha, please!”
Before we get too into our example, lets succinctly explain the 3 pieces of MVC
Model: Holds your data and defines the essential pieces of your app.
View: This is what the user sees and interacts with.
Controller: The intermediary between the model and view. It takes user input and relays it to the model. It also receives data updates, sending commands to update the user interface.
Now back to the food 🥘
There are an assortment of pre-made sabji’s (vegetable curries) laid out in organized fashion behind the glass and the server gets right to work creating your dish. In this example, the server’s brain is the controller. When you place an order in a language the server’s brain understands, the serving work begins with the following instructions:
- Charge you for the dish
- Grab a plate
- Search for Bhindi
- Add 1 serving of Bhindi to the plate
- Add 2 paratha to the plate
- Add yogurt
- Deliver plate to you
While the process is nearly identical to you ordering Chicken Tikka Masala, it has distinct ingredients that the server will never get confused (The Chicken Tikka Masala Curry). It is also important to realize that the server can only use the tools and resources that are located at their restaurant. If you asked for a burger, the server wouldn’t be able to complete your request as this restaurant only serves curry. This specified and limited set of tools is your model.
- Plates
- Curries
- Breads
- Sides (yogurt & pickle)
- Curry Ladle
- Server’s hands and feet
When the server delivers the meal you can see and eat, this is called the view. This view was built from a specific set of instructions from the model and delivered by the controller (server) to your table.
What happens if I want more paratha? Well obviously asking your bread basket to replicate won’t accomplish much. You would need to ask the server for more bread which would initiate a new process.
It is important to have a well organized restaurant. In theory the faster the server delivers dishes, the more money they will make. You want to minimize the amount of time it takes to search and deliver. This is also why all the curries are prepared ahead of time.
Multiple Developers can work on the MVC concurrently.
MVC can be used for most web development languages
I will however, be demonstrating the example with Java.
Curry is your model class. It includes all the private ingredients with your getters and setters.
public class Curry
{
private String name;
private Boolean includeYogurt;
private String bread;
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public Boolean getIncludeYogurt() {
return includeYogurt;
}
public void setIncludeYogurt(Boolean includeYogurt) {
this.includeYogurt = includeYogurt;
}
public String getBread() {
return bread;
}
public void setBread(String bread) {
this.bread = bread;
}
}Here is the brains of the meal preparation, your controller.
public class ServerController
{
private Curry model;
private CurryView view;
public ServerController(Curry model, CurryView view)
{
this.model = model;
this.view = view;
}
public void setCurryName(String name)
{
model.setName(name);
}
public String getCurryName()
{
return model.getName();
}
public void setCurryBread(String bread)
{
model.setBread(bread);
}
public String getCurryBread()
{
return model.getBread();
}
public void setCurryIncludeYogurt(Boolean includeYogurt)
{
model.setIncludeYogurt(includeYogurt);
}
public Boolean getCurryIncludeYogurt()
{
return model.getIncludeYogurt();
}
public void updateView()
{
view.printCurryDetails(model.getName(), model.getBread(),
model.getIncludeYogurt());
}
}Here is the view or what you would see output to the screen.
public class CurryView
{
//what you can see on your table
public void printCurryDetails(String curryName, String bread,
Boolean includeYogurt)
{
System.out.println("Curry: ");
System.out.println("Name: " + curryName);
System.out.println("Bread Choice: " + bread);
System.out.println("Yogurt: " + includeYogurt);
}
}And finally, here you are as the user. This code demonstrates what would happen if you decided to order another meal after your first. Try running the code in your IDE to understand the flow better.
public class User {
public static void main(String[] args)
{
Curry model = retriveCurryFromDatabase();
CurryView view = new CurryView();
ServerController controller = new ServerController(model,
view);
controller.updateView(); //You ordering another meal
controller.setCurryName("Chicken Tikka");
controller.updateView();
}
private static Curry retriveCurryFromDatabase()
{
Curry curry = new Curry();
curry.setName("Bhindi");
curry.setBread("Paratha");
curry.setIncludeYogurt(true);
return curry;
}
}
Note: I realize this is not the best example to code, but in following with a good analogy I like to follow up with application. If you want more examples try a TODO app or this Student example from tutorialspoint.