What is Model View Controller?

Model View Controller (MVC) Explained

Model View Controller
Model View Controller

Model View Controller is the idea is that any program code we write can be organized into three main categories:

  • Code that manages, serves and manipulates data is known as the Model code (M in MVC).
  • Code for the look and feel of a webpage or app is known as View Code (V in MVC).
  • Code that tells the M or the V what to do, is known as the Controller code (C in MVC).

By breaking code up into these three categories, it’s easier to diagram and organize an entire website and how it should work for every imaginable situation.

Model Code

I like to think of Model code as the “chef” at a restaurant. At a small restaurant or food truck, you can give your order to the chef directly. “I want a hamburger”, you say. The chef then begins making your order, and it takes some time. Finally, you get your hamburger and pay the chef.

The chef has a lot of knowledge about making hamburgers, because he spent time learning that. He also spent time creating a basic food menu so that when you say “I want a hamburger”, he knows exactly what kind of burger to make for you. There are a lot of details that go into making a hamburger, including bread type, meat type, the amount of heat on the grill to use, the amount of onion, tomato, lettuce, as well as condiments. You don’t care about any of that though, you just want a hamburger, and then you get it.

In the same way, when applying Model code to programming, your chef is the area of code that is dedicated to dealing with any input. The model must be smart enough to understand whatever is being asked of it, able to decipher it down to basic binary and then produce an output that you the human understand and can be satisified (or at Amazon, delighted) with. So if we ask a restaurant app (like Yelp) to tell us where the top 10 hamburger restaurants are, the Model code of Yelp needs to be able to process this information down, make certain assumptions (did you mean top 10 restaurants in your area?), and then give you back an answer you’ll be satisifed with (again, assumptions that you are like the 10 last people who asked the same question and were satisified).

Controller Code

Controller code to me is like the “waiter” at a restaurant. As time goes on, the chef might decide they want to open a restaurant. Business is good. But the chef now needs waiters, because otherwise the chef can’t do the cooking. Waiters help manage requests from people coming in so the chef doesn’t get overwhelmed. In some cases, the chef isn’t even needed, the waiter can provide the service instead. “I need a fork”, you say. Waiter can go get it. Chef isn’t distracted.

In the same way, Controllers in code handle the requests before they get to Model code. A Controller’s job is to make sure the request is actually a legitimate request the Model can actually fulfill. So in the case of perhaps a restaurant app, you might want the menu. The Controller code can get you that instead, and never talk to the Model code (chef).

View Code

View code can be thought of as what we see at a “restaurant”, e.g. the pretty interior design, the feeling of travel or escape, the music we hear, etc.

In the context of code, you can think of View code as the design of the website or app. It’s common in web development that View code be the HTML, CSS & basic JavaScript of an application. View code interfaces with Controller code, similar to how we would talk to waiters at restaurants. In a restaurant app for example, you might select “Hamburger” and click a button¬†Add To Cart¬†on the webpage (aka the View code). The View code then behind the scenes sends that information to Controller code, which among a series of checks returns code that the View can prompt the user for (yes, hamburgers are available — so the View code assembles a new page with Hamburger added to cart, or no, hamburgers not available so the View code shows an “out of stock message” instead).

Altogether Now

In the case of really complicated requests, Controllers can send messages up to the Model in language that the Model understands, get an answer, and then return that code back over to the View in language that you understand. Think of Models, Views and Controllers like a team that works together.

Think of Model View Controller As A Blueprint

It’s important to remember that Model View Controller is a design pattern, not an actual program you need to go and download. There are a lot of design patterns out there, including more variations on MVC, like Model-View-View-Model, or upside down MVC, but the main idea again is that these are just ideas at the end of the day to help organize how a website or app should work at a VERY high level. Think of MVC as a blueprint you could use to code your website or program.

It’s Really System Design

Going back to our restaurant analogy, if our chef decides they want to serve millions or even billions of customers, and guarantee all of those customers have the same “amazing” experience, we would REALLY need to come up with a great system to implement that vision. Welcome to system design, MVC was just the beginninng.

In fact, system design is an area that most programmers who want to work for companies like Google or Amazon SHOULD study (in addition to data structures and algorithms). Even if that’s not your goal, system design is still very fascinating. If you understand Model-View-Controller, you can start working harder at creating more sophisticated workflows for managing the incoming requests. Perhaps your Model code can live on its own server, or be cloned to multiple servers. What if you wrote more Controllers to handle all the different types of requests so that the Model code didn’t get taxed? (If this was a restaurant, maybe you could make it so your chefs weren’t even necessary, you could just offer self-serve options). I encourage you to really explore the subject of System Design if you want to become a better programmer.

What Are Examples of MVCs?

If you worked with PHP in the last decade, (like me), you probably heard of frameworks like PHP Slim, Cake, CodeIgniter, or Zend Framework. Code in these frameworks were organized according to MVC. Ruby on Rails is also a great example of an MVC framework (and I tend to think it has the best implementation). It was very common for “back-end” developers to do the Model and Controller code, while “front-end” developers did the View code. Typically View code was written in small snippets of PHP or Ruby along with HTML, CSS and JavaScript. Model and Controller code was written primarily in PHP and SQL (or Ruby/SQL).

React, Angular and Vue all came from ideas surrounding MVC. You’ll often hear that React and Vue are View libraries (V in MVC), and therefore not actual MVC frameworks because the Model is something that can be code agnostic, meaning written in any language. (E.g. the chef at a restaurant might not speak English, but can make great sushi).

Angular is sometimes referred to as a MVVM library instead of an MVC library.

You might be wondering why the Controller (C) is omitted. My take is that Controller code is becoming less needed given declarative programming. Many times it’s built in already into the View, so often you’ll see View and Controller merging (think you are the waiter, you can self-serve). As for the Model code, the idea is that in Angular, the Model can be your own computer, rather than a server somewhere else — so the more Model code that gets written in JavaScript and pushed to your machine, the lighter the load on Google’s servers. Your computer might already be very smart at answering questions for you, so it’s like Google is training your computer to be as good as the “chef” they have. Wouldn’t you like your own personal chef?

In any case, as you begin to spend time with frameworks, you’ll probably find a model view controller pattern you resonate with and decide is for you. There’s no one real solution that works all the time for every specific business case. You just have to experiment, play and be open to new ideas.

Conclusion: Do I Need To Use Model View Controller To Make A Website?

At the end of the day, your customer doesn’t care whether you use plain HTML or a full fledged model view controller website, so long as they can view your page and do what they wanted to do, perhaps place an order. That said, if you have a site adhering to model view controller design patterns, you can be sure that it will be A LOT easier to manage how your website scales up and interfaces with more customers as they start to come.

A small web portfolio written in HTML and CSS is fine for reading millions of times, but making a website that acts like your own employee would probably benefit from something like an MVC design pattern. It’s all about System Design ultimately, so as you start to build more websites, think BIG. Think millions, or even billions of customers — and how would you serve them all in real time? Good luck!