MVC Magic!

Need to buy something online, look up directions to a restaurant or watch a video on an app? No problem! We just click a button or submit a search in the browser and voila! The information we requested now appears in a matter of seconds. Magic right? It definitely feels that way, however there is a lot going on behind the scenes to make this all possible. Let’s pull back the curtain here and take a quick peek…

MVC Overview

Have you ever noticed that over time websites have evolved from simple HTML pages (with some basic CSS) to the complex applications we see today? How did we get here? Well, in order for developers to work on the these complex applications efficiently, they began to use reliable patterns to lay out their projects, which made their code easier to decipher and work with. One of the most popular design patterns developers still use today is the Model-View-Controller (MVC), which is used by all types of programming languages such as Java, C#, Ruby and PHP. The goal of this framework is to divide a large application into specific sections that all have their own purpose.

Model

Generally, the model is responsible for storing and managing the data as well as passing the information to the controller.

View

The view takes the data from the controller and defines how it should be displayed. This is where you can format the data, add images, charts, tables and checkboxes among many other features to make your app more dynamic. You can also design your layouts, create forms, as well as customize your view page overall to engage the user.

Controller

The controller is what connects the model and view. In a nutshell, the ‘controller receives input from view, uses logic to translate the input to a demand for the model, the model grabs the data, the controller passes data from the model back to the view for the user to see in a nice display’ (educative).

Now that we have reviewed the separation of concerns and responsibilities of each role, we can see how it all flows together once the user makes a request!

1. The user clicks a button and requests a specific page from a server. Based on the type of url request, the server will pass it on to the controller that is responsible for handling this process.
2. Since the controller acts as a middleman between the model and view, it passes the user’s request to the proper model.
3. The model then interacts with the database to check if there is relevant information on the user’s request to pass on to the controller.
4. When the controller receives feedback from the model, it renders that information to the view.
5. Once the view receives the information from the controller, it is able to display the data to the user.

The view is the only part of the application that the user interacts with directly

In conclusion, MVC is one of the many design patterns that provides programmers a modular approach to solve problems when designing an application. By keeping the presentation and logic of the data completely separate, this makes creating complex applications much easier. Hopefully with this knowledge, the next time you click a button or submit a request, you’ll appreciate all of the inner-workings that MVC does behind the scenes to provide that magic!