America’s Next Top Model View Controller
At the heart of web application creation is the MVC design pattern. MVC stands for Model, View, and Controller. Essentially, it is the accepted paradigm by which we model our applications. This pattern is used by many programming languages, like Python, JavaScript, C#, and my first (and only, so far) experience with it was through Ruby/Rails, which is what this article is based on!
Essentially, the Model, View, Controller model separates web-app design into three interconnected areas. Understanding the structure of MVC is essential to understanding the design patterns programmers use to build apps every day, and will help you immensely on your journey to building your own.
Personally, the best way that I learn information is by relating it to something I’m familiar with. By the title of this article I think you can guess what I’m about to do…
Yes. America’s Next Top Model View Controller. I’m sorry in advance.
Take a look at this graphic as you follow along, and save this somewhere you can reference back:
We start with the browser. Information is requested from the server by the client. That’s you, our hopeful contestant! From there, that request is shown to the router. Let’s think of the router as the casting director, shall we? We loved your video and there’s a high chance you’ll bring the TV worthy drama. Depending on your request, the router will send it over to…
The Controller
I think of the Controller as the mastermind of the MVC framework. So obviously, the Controller is the Tyra Banks of web-application design.
The Controller holds all of our appropriate actions and keeps the peace between the Model and the View. All of your appropriate CRUD actions (Create, Read, Update, Delete) are held within the controller and executed depending on what information is received from the server.
Is Tyra going to take your information and Create a new model? Is she going to give you a FIERCE makeover and make some Updates to your look? Or, if you aren’t smizing hard enough you may not even make the cut, and your information is Deleted from the database. Sorry!
Let’s say Tyra/the Controller loved your audition. You’re not here to make friends, and she loves that about you. She takes your information and adds it to the database. That means it’s time to start working with…
The Model
The Model is where all relevant information is stored in your web-application. Models represent data. They can also hold logic that can make changes via the controller if data is changed. There can be a singular Model, which is commonly represented by an Object, or there can be multiple Models.
In Rails, Ruby classes represent our models and they interact with the database and perform the logic. They have to do the bulk of the tasks because they are how we get to all of that fun data we set up to make our app work. That is why the model is well, the Model!
I know, it’s no Naomi Campbell. But the Model is you, our hopeful contestant, because it’s up to you to put in the work, the long hours, the endless runway walks, so you can be ready to show yourself to the world. Once you’ve blossomed into a budding superstar (or finished gathering and manipulating the appropriate data from our database, whichever comes first), you are ready to make your debut. And that’s one of the last pieces of the puzzle…
The View
So — you’ve sent in your request, you’ve been dealt with by Tyra and team, and you’ve been put through the ringer. You did it! It’s time to show yourself off and try to win that prize. Much like a journey through America’s Next Top Model, the View is the final stopping point for our MVC design pattern.
The View is what the user sees: our collection of JavaScript, HTML, CSS, and any other frontend stuff we might need to make our page pop. The View does not have any say in what it shows. That still comes from Tyra, I mean, the controller. It may choose to render the view as an HTML formatted webpage, JSON, etc. It’s all still up to the controller, of course!
Before it goes out into the world, it goes back through the Controller for one final look, and then is finally sent out into the world back to the user. Congratulations!
Overview
In short, the MVC design pattern is a useful and helpful paradigm by which we software engineers design our web applications. Sometimes you may feel like there is a “better” way to do something in your web apps, but following these time-honored processes is a way to ensure everyone can follow along with your though process and work collaboratively.
Once you have a solid basis of how these different structures interact with each other, designing your web app will feel so much more intuitive, and you will begin to see how information flows easily through the client, browser, and server.
In other words, you’re gonna be on top!
