An Intro to the Model-View-Controller (MVC) Framework

The Model-View-Controller (MVC) framework is an architectural pattern in software development that allows programmers to create a separation of concerns when building applications.

It’s easy to write disorganized code when building complex applications, but MVC encourages us to be intentional. The model, view, and controller act as buckets where we can store different concerns, or sections of code.

Concerns should serve a specific purpose, like evaluating a user’s logged in status or returning the number of existing blog posts in the database.

The client-server relationship

Before we break down the MVC framework, let’s take a quick look at how the client-server model works, and what happens when you interact with a website.

Example scenario

1. You login to your account on Twitter.
2. You see your friend’s tweet and click on their profile.
3. Your browser loads their profile page and you can see all their tweets.

What happens behind the scenes

Your web browser, the client, makes a request to Twitter’s servers, asking them to retrieve information based on your actions. The server then finds the appropriate information, like your friend’s profile page, and sends it back to the client, which then loads on your browser.

To put it simply, the client is the browser that displays information to the user, and the server runs the application that lives in the cloud.

Summary of the MVC framework and how it fits into the client-server model.

Breaking down MVC

In the MVC framework, each component has a very specific role:

• The Model contains logic that manipulates the data.
• The View renders a visual display to the user.
• The Controller contains application logic and controls the interactions between the model and the view.

Let’s use our previous example scenario to map out the MVC relationships.

Example scenario

1. You see your friend’s tweet and click on their profile:
   The client makes a request to the Controller on what to do next. The Model determines the database logic. What information is stored in a tweet? What are the associations between a user and a tweet?
2. Your browser loads their profile page and you can see all their tweets:
   The View updates the client to show the appropriate information.

Summary of how the components in an MVC framework work together.

Conclusion

The MVC framework is an integral software development pattern that helps us build complex applications. It forces us to be intentional with our code and helps us stay accountable with our functions.

Sources

• Wikipedia – Client-server model
• Wikipedia – Model-view-controller
• Wikipedia – Integration testing
• Learn.co – Rails Model View Controller