Developer Dictionary: Model View Controller

This post is part of a resource called Developer Dictionary. More about why I'm writing this here

MVC is a pattern commonly used while creating web applications — where a user interacts with code and data stored on some server, using their browser. It is essentially a way of organizing the code and data, both physically and logically. Physically in different code files, different methods and different 'modules' within the web application codebase. Logically separating the code based on its responsibility.

This is helpful to separate internal representation of data from the ways data is presented to and accepted from the user.

Okay, we need to move to a visual example fast, because this all sounds abstract so far!

Example

Imagine that we have a common todo list application. The goal of the application is to allow the user to manage their tasks. The user can add new tasks, mark a task as complete and maybe delete tasks.

The view would be a screen displaying the tasks as below. We start off with the screen on the left and end up with the screen on right.

The model would be the database table storing task id, task name, it's complete/incomplete status, date it was added, etc.

The controller gets involved like this: when a user completes a task by interacting with the view (e.g by clicking the checkbox), a specific controller gets called. The controller method tells the model to update the status column in the database for the given task id. The controller, in turn, also updates the view to match the model, so that the completed task is visually different for the user (e.g. the check-mark and crossed-off text).

Essence of the Pattern

MVC is a pattern which means it can be adapted to each application's needs. It is not set in stone. If you google 'model view controller' and click on 'images' you will see 3 to 4 boxes with a variety of arrows pointing in different directions. This implies that there is no one perfect/correct way to represent the Model View Controller pattern. Visualizing is useful for learning though. Below is one possible visualization of this pattern:

Model is about storing and organizing data related to the application. It receives user input from the controller.

View is about displaying information to the end user of the application. Multiple views of the same data are sometimes desirable. For example, one view for the web UI and another one for the mobile UI may make sense.

Controller is the logic for going back and forth between model and view. For example, displaying to the user what's in the database. Also updating or adding new user provided data to the database.

Tradeoffs

The big idea around MVC is to separate software modules based on their responsibility. Like everything in the world of Software this has tradeoffs. One tradeoff is the ability to easily read code pertaining to one feature (e.g. check-off todo items). You have to navigate around different areas of the code and find which piece of code is part of the feature of interest.

Some History

MVC pattern was one of early insights from the development of graphical user interfaces on desktop computers. MVC was introduced into Smalltalk in the 1970s and 1980s. In 1988 an article in The Journal of Object Technology (JOT) expressed MVC as a general concept.

The use of the MVC pattern in web applications exploded in popularity around 1996. Later, the MVC pattern became popular with Java developers with Spring framework (released October 2002). Frameworks like Django for Python (July 2005), Rails for Ruby (December 2005), and Laravel for PHP (June 2011) increased MVC's popularity outside enterprise software.

Now you know the essence of this pattern for organizing code based on it's responsibility and you can visualize an example of user action and data flows between model, view, and controller. If you use one of the web frameworks based on MVC, you will be able to connect this concept to the default code structure and scaffolding provided within frameworks like Rails and Django.