MVC

MVC: Model, View, and Controller. The three pillars of web application development. We inflate the term MVC to mean two things: an architecture or framework. Let’s break it all down and try to understand why this pattern of building software is so popular today.

MVC Architecture is merely a proposal. That’s it. It’s a pattern for how to organize code in a user-facing application. There isn’t just one MVC architecture, in fact, there are many. MVC architecture sorts into 3 separate types of object class components. The Model: manages our program state; View: presents the state to the user; Controller: Receives input from the user. These three components nicely interact with each other so that our application is user-friendly and intuitive.

MVC Frameworks are libraries that help you to write code in the MVC style. There is a tonne of different libraries out there, some used more than others i.e AngularJS, React, Backbone, Ember, etc. A framework’s goal is to help structure the code-base and separate the concerns of an application into the three parts described above. It’s important to note that not all frameworks are MVC frameworks, but you will find that most frameworks are based on a similar pattern of interactions.

This diagram represents the direction of interactions between each component.

Let’s start at the Model. The Model represents our perfect state before any interactions from the user have occurred. The Model provides an event interface that updates the View component when it hears an event has occurred. Notice the Model doesn’t directly access the DOM, rather it updates the View component, which in turn updates the DOM. As stated, the View component is responsible for what the user sees. It reads information from the model, to put things on the DOM for our user to see. It represents the mapping from one model instance to one on-screen rectangle; a map from abstract truth to user experience. Moving on, the user when using the application will interact with the DOM, either through an input or clicking a button or refreshing the page. Our controller listens for those behaviors. The controller represents the mapping from user behavior to user intent within one region. It transforms intentions into reality; “play this song”, “like this photo”, “refresh this page”, are the ‘messages’ the controller gives to our perfect state Model. The cycle continues with the Model having its perfect state manipulated meaning it updates the Views component changing what the user sees.

Any time you need to learn a new web development framework, you will come across this consistent MVC pattern. And if a particular framework differs from this, you can be sure that the authors will explain their new pattern with reference to MVC.