MVC eli5

So having gone through more than half of my tenure at the Flatiron School for Software Engineering I finally get a better idea of how the frontend marries the backend. Often times though a user simply loads up a site such as Facebook or Reddit and like magic, amazing content appears!

In reality there’s multitudes of things happening in the background that users aren’t aware of. Having gone through the sausage factory I can tell ya it’s both eye opening and bewildering so I want to break down in an analogy everyone can understand. ELI5: Explain it like I’m 5.

Background

Sinatra is a Domain Specific Language (DSL) implemented in Ruby used for writing web apps. Think HTML. If you’re old enough to enjoy the glory days of social media under MySpace, then you’ve had plenty of time to tinker around your MySpace to make it enticing for friends to visit. It was founded and created by a guy named Blake Mizerany whose language is used by notable companies like BBC, GitHub, and notable logos like Apple. While older comparatively, it still serves as a great tool to teach about creating pages, showing users these pages, messing around and editing them, and of course, deleting content to fit needs. This last bit is known as CRUD (Create, Read, Update, Destroy) and the building blocks of most sites not exclusive to Ruby or Sinatra.

MVC broken down is View, Controller, and Model. View is what you, me, and everyone else sees on a website. A Controller receives a request from the view, points that to the model, and passes the response back to the view. Lastly, Model takes info from the controller, processes that info, and passes it right back to the view.

Okay okay, ELI5 already?

Scratching the Surface

A popular analogy floating around those that deal with these languages is the cook, server, and diner patron.

In this example, the diner is, you guessed it, folks like us who are reading this very page. We come in expecting something from this or any sites without any afterthought of what happens in the background. However! We know what we want and why we’re here. The View.

The Controller is simply the middleman and is similar to the server at a restaurant. They take down what you’d like to order, goes back to the kitchen, and bring out food. This is important because we cannot go into the kitchen. Despite that, we know that we’ll be served with a delicious meal from our request.

The cook in this case is the model. They’re the real MVP here taking the order from the server or Controller, creates the meal our specifications, and then brings us out the food.

This rudimentary cycle is the bread and butter of most websites and not exclusive to Ruby as other languages like C# Java, and many more.

Hope you have a good analogy for what happens to a website when you visit it. Now that we’ve scratched the surface of what MVC is, let’s dive a bit deeper into this idea with some examples highlighting React and Sinatra.

Taking a Closer Look

Above you see an example of Instagram. That’s easily understood as the view where we get to login, browse content, share photos, edit messages that we send out, and likely delete these images after an impulse upload. This simple and relatable example are actions that we can perform that simulates what happens underneath the hood.It’s one that we’re all familiar with as far as View goes.

Lastly, we have associations happening here where these search terms and photos are stored in tables by way of the Model. This table, like a chef, prepares us the data that we need. We do not know that it’s happening but all this is going on the background that allows us to be informed, entertained, or whatever else brings you to the site.

It’s an easy concept to grasp but takes a hot minute to really understand when building an app. I like analogies as it gives me a better idea of how to proceed.

Related posts:

Your YouTube channel is growing at the rate of one new subscriber per week, which you’re happy with. But you want more, much more! In this article, we’ll provide 7 actionable tips that can help you…

I was curious to see how difficult it would be to use direct-to-consumer (DTC) DNA test results to figure out if a person had a mutation that caused a specific genetic disease. A colleague donated…

Hace minutos que paseo entre canal y canal buscando algo para ver. No sé por qué me detengo a ver la típica publicidad de detergente para la ropa en la que muestran una tela de muy muy cerca girando…