Quick Introduction to MVC and Its Origin
MVC (aka, Model View Controller) is simply a way of organizing the code (of an application) into three different sections based on the purpose of each piece of code. Trygve Mikkjel Heyerdahl Reenskaug invented MVC in 1979 as a way to help coders divide their applications into smaller and more manageable pieces. Something worth mentioning is that there are a few JavaScript libraries and frameworks that can help coders to implement proper MVC-style organization into their code. A few of these JavaScript libraries/frameworks include AngularJS, Backbone,js, React, Vue.js, EmberJS, and KnockoutJS.
Model
The purpose of the model is to contain information (data) and components that can be used by other parts of the code. The model is usually used to update the data presented to the user in the view.
View
The view contains code that interacts with the user in some way, which includes code that determines how data is presented to the user and/or code that defines how an user can interact with certain parts of an application. The view changes the looks and style of an application as-well-as how a user can interacts with the application to give the view data to be submitted to the controller.
Controller
The controller is what connects the model and the view together. The controller can take in and process inputs from the user (obtained from the view) in order to commit some sort of action based on said inputs. After obtaining and/or processing data from the view, the controller can either manipulate the view directly or manipulate the model, which will in turn update the view as a result of a change in the model’s data. If you are still unsure of what the model, view, and controller are and how they work; then the upcoming analogy should help you with that.
Analogy
Imagine you are an owner of a store. The products that you have in storage and are trying to sell are like the data in the model. The products are presented to customers by placing them on shelfs, putting them on displays, or even by having pictures of them present in an online store. The way you present these products to your customers and allow said customers to put them in their cart (either literally or digitally) is similar to how the view presents data to a user and determines how users can interact with the data or application to send an input to the controller. Speaking of the controller, the cashier and online checkout are similar to the controller. Both the cashier and online checkout process customers’ requests to purchase items, modify the recorded profit amount, and modify the list of total products to account for the sale. This is similar to how a controller receives an input from an interaction between an user and the view, resulting in the controller making modifications to the model based on the data the controller was given. If the cashier has extra time, they may even straighten out or reorganize the products on the displays to make them look nicer. This is similar to how the controller is sometimes capable of directly altering the view. Now let’s move on to a more technical example.
Example
(Here is a link to the JS Bin containing the example. The code itself was too large to neatly put into this blog.)
https://jsbin.com/bocehef/edit?html,js,output
In this example, I tried my best to simulate a mvc format using HTML and vanilla JavaScript (to some success). I created a “machine” that allows you to add and remove your desired items to and from a list. The HTML acts as the View and houses everything that the user can interact with and can see; including the “decorations” on the “machine”, the “Add” button, and the box you can input the name of your item into. The JavaScript file contains a Model section that holds the items in the list. The Model would usually update the View automatically upon being updated itself, but since this is JavaScript and I’m a novice coder, I had to insert functions into the Model that would update the View whenever it needed to be updated. The JavaScript file also contained a Controller section that received inputs from the View’s interactions with the user, processed the inputs into a more usable form, and sent the inputs to the Model to update the View in return.
Conclusion
MVC helps programmers to organize their code by splitting the code up into code that interacts with the user and affects the looks of the application (view), code that holds all of the application’s data (model), and the code that holds the application’s functions and links the rest of the code together (controller). While there are a few frameworks that base themselves around MVC-style organization of code (like AngularJS), MVC is just a method of organizing the different parts of an application’s code based upon their function.
Links to Sources Used
-https://www.codecademy.com/article/mvc
-https://developer.mozilla.org/en-US/docs/Glossary/MVC
-https://www.w3schools.com/angular/angular_intro.asp
-https://www.freecodecamp.org/news/mvc-architecture-what-is-a-model-view-controller-framework/#:~:text=History%20of%20the%20Model%E2%80%93View%E2%80%93Controller%20Pattern%20The%20MVC%20pattern,first%20used%20in%20the%20programming%20language%20Small%20Talk.
-https://squashapps.com/blog/javascript-mvc-frameworks/
Top comments (0)