Web Devolution

Understanding MVC Architecture

November 30, 2018

What is MVC?

Model-View-Controller (MVC) is a software architectural pattern for implementing user interfaces. Simply put, it is one of the most influential ways of organizing code. It divides the application into a controller which reacts to user actions and a view which displays the state of the model or data. So there is a strong separation between what is being presented (view and controller) and the domain (model).

At the heart of MVC, and the idea that was the most influential to later frameworks, is what I call Separated Presentation. The idea behind Separated Presentation is to make a clear division between domain objects that model our perception of the real world, and presentation objects that are the GUI elements we see on the screen.

Domain objects should be completely self contained and work without reference to the presentation, they should also be able to support multiple presentations, possibly simultaneously. This approach was also an important part of the Unix culture, and continues today allowing many applications to be manipulated through both a graphical and command-line interface.

Martin Fowler

According to Tom Dalling, you’ll find three fundamental parts in a typical application:

  • Model: Represents the data and does nothing else. The model does not depend on the controller or the view.

  • View: Displays the model data, and sends user input to the controller.

    The view can be:

    • independent of both the model and the controller.

    or

    • actually be the controller and therefore depend on the model.
  • Controller: Provides model data to the view. The controller depends on both the view and the model and, in some cases, the controller and the view are one in the same.

In MVC, the domain element is referred to as the model. Model objects are completely ignorant of the UI…

The presentation part of MVC is made of the two remaining elements: view and controller. The controller’s job is to take the user’s input and figure out what to do with it.

Martin Fowler

MVC Illustration

What are some real-world applications of MVC?

Let’s say you want to create an application entirely in JavaScript using the Node.js runtime environment. Your Express framework’s file structure could possibly end up looking something like this:

Express Directory Tree

According to this file structure, it isn’t difficult to point out where the code for the views templates are located, but what about the controller? There isn’t a directory labeled ‘controller’ but there is one called ‘routes’. Routes, in an Express application, are where HTTP requests are forwarded to the appropriate controller functions.

Controller functions are usually found in files within the ‘routes’ directory and look like this:

Controller Function

This is what’s called a HTTP GET request or method, the function within it creates a req (request), looks for a res (response), and moves on to the next block of code in the file.

What of the model? Express is usually paired with MongoDB, a NoSQL (Not Only SQL) database, which utilizes Mongoose ODM (Object Document Mapper). Mongoose defines schemas to create models. For example:

Model

Conclusion

Not every app directory structure begins with three folders labeled ‘model’, ‘view’, and ‘controller’. The point to keep in mind is that MVC design is at play here although the directory structure may appear different.

MVC is not the only architectural pattern in development. There are others; namely, Model-View-Presenter (MVP) and Model-View-ViewModel (MVVM). Here is a concise explanation of the difference between the three.

Today, the MVC pattern is used by well-known frameworks such as Ruby on Rails, Apple iOS Development, ASP.NET MVC, etc. While MVP is mostly used for ASP.NET Web Forms applications and MVVM is used by WPF, Caliburn, Silverlight, nRoute, and more.

Rishabh Software


Matthew Conrad

Written by Matthew Conrad, a web developer in Seattle. You can follow me on Twitter and GitHub.