The Real MVC

Sam Hall
2 min readOct 12, 2021

What is an MVC and how do we use the design pattern?

MVC is an acronym, and we love acronyms, that stands for Model-View-Controller. It is a Javascript technique used for app design that divides an application into three interdependent parts: the Model is the the data stored in the database or backend, the View is what a user sees when interacting with the app, and the Controller is the user interaction.

The Model-View-Controller design architecture

The MVC Architecture was developed in the 1970s as a set of guidelines for building front end user graphical interfaces for desktop applications. Unlike most early tech creations, it has stayed relevant over the decades and continues to be used in modern web application design.

The Model

The Model portion of the MVC is the most basic level of this application architecture: a backend or database, classes within used to define data and the logic that governs it. It contains the logic for maintaining existing data, and handling the organization of data entries or deletions. The View effectively displays the data stored in the Model in an organized way for the user. The Controller acts as a conduit between the the Model and View by translating user actions in the View to logical data manipulation in the Model.

The View

The View is most often represented by the HTML on a given page and the style elements, often CSS, that organize the elements of data from the Model on a webpage. The View is our frontend or User Interface, where the interactions between the User and the Machine occur. These interactions are fielded and translated by the Controller.

The Controller

The Controller portion of this architecture is the intermediary between the Model and the View, often defined by user controller actions. A router will determine the correct means of fielding a user input and execute some logic on the data stored in the Model. The controller will fetch and save, alter or destroy some data according to RESTful conventions according to what the user manipulates in t

he View.

Further Reading

https://towardsdatascience.com/everything-you-need-to-know-about-mvc-architecture-3c827930b4c1

https://www.sitepoint.com/mvc-design-pattern-javascript/

https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

https://guides.rubyonrails.org/action_controller_overview.html

--

--