Eli5 (Explain Like I'm 5): MVC the Batman Edition

#beginners #tutorial #100dev

Let's set the stage, you are the person who the services of the bat-signal is for. The client of the bat-signal if you will:

BATMAN

With that out of the way, let's start explaining what MVC is.

What is MVC

MVC stands for Model, View, and Controller. It is not a language; it is a way to organize your code. All of these three objects have different jobs but they work together to solve the same problem.

MVC Explained (with Batman)

Client: Batman

View: Bat-signal

Is what the user visually interacts with, such as a website.

Controller: Gordon

The controller receives requests and gathers data and sends the data to the view. The controller is the middleman between the model and the view.

So Gordon (the controller) receives batman's request "Gordon. I want to be informed about the latest, juiciest crimes, especially if they involve Joker". Gordon then gathers data (such as police reports about active crimes) and passes the data to the view (the bat-signal).

"(The) View and Controller are specifically designed to work together." -Steve Burbeck, Ph.D.

The bat-signal and Gordon are designed to work together to tell batman its time to fight crime!

In real life, the controller would listen for the user clicking on the mouse or typing on the keyboard and update the model and view (website) about these changes.

Model: Concerned Citizens

The model is responsible for managing the information/data and requests for this information/data.

In our example, this is a concerned citizen who has witnessed a crime (data) in action and now wants to talk to the controller to explain what is happening.

The model (concerned citizens) directly interacts with the database, which in this case is the crime's environment.

Database: Crime's Environment

When the model (concerned citizen) needs more information, it looks to the database to get more information.

So if the police/Gordon (controller) was asking the citizen (model) for more information about the crime, the citizen (model) would look around their environment (database).

Example of MVC in the Batman Universe

Now lets bring it all together with an example:

Batman (Client/user) : "Gordon. I want to be informed about the latest, juiciest crimes, especially if they involve Joker"

Gordon (Controller)" On it batman!"

(Phone rings)

Gordon (Controller): "Hello this is the crime line, tell me what's happening"

Citizen( model): (Citizen says they heard screams and explosions at the Amusement Mile)

Gordon (Controller): "Is this crime related to the Joker?"

Citizen (Model): "Well, let's see!"

Citizen looks and listens (Model is looking in the database)

Citizen (Model): "Why yes, that laughter I hear must mean its that loony sod again!"

Gordon (Controller): "Okay, thank you anonymous citizen (Model) for your time"

Gordon (controller): Turns on bat-signal

Bat-Signal (view): Visually informs batman that a crime is happening

PsuedoCode Example

In this section of code, Batman is asking for information about crimes, especially if they involve Joker.

Gordon is keeping an eye out for crimes that involve Joker by talking to concerned citizens.

Concerned citizens are reporting crimes and in this case Gordon is trying to "select" a crime which involves Joker.

Gordon turning on the bat-signal, which batman sees and runs to.

Gordon transmitting the data (crime information) to batman.

Why use MVC?

Using MVC allows you to make easily reusable section of code, makes it easier to edit, and helps you keep your code organized. So it takes less time to make changes to your code.