What is an MVC?
MVC stands for Model, View, Controller. It is a pattern, or style, of organizing code by predetermining how the different pieces of the code will interact. This patterning makes code easier to understand, and makes it simpler to keep track of next steps while writing. The model receives user input data from the controller and holds onto the app’s data. The view presents relevant pieces of this data to the user and the controller feeds model data to the view and reacts to the user’s interactions with the view.
Why use an MVC?
JavaScript is a very flexible language. It supports numerous styles and approaches to completing the same tasks. This flexibility includes semi-recent major updates, like 2015's ES6 syntax that can be used directly alongside ES5, to various instantiation patterns, to syntactical sugar. This means that this there are many ways to solve almost any problem in JavaScript, and that all of these solutions look pretty different. Once you add in all of the other languages and libraries that have been required to create an application in the recent past, such as HTML, CSS, and JQuery, you might be looking at code that is long, difficult to skim, and complicated to debug.
MVC Frameworks and Libraries
MVCs are a way of keeping code organized by separating concerns. This separation ensures modularity. MVCs often reduce code length by obfuscating some of the tasks that developers have handled in the past with lengthy HTML or JQuery.
Below is a snippet of my code from Billypedia, a project where I first learned to use entry-level JQuery features. Even though I used the most basic of methods, this code is pretty long and repetitive. While you can’t tell from this single snippet, each part of the JavaScript and JQuery I used in this project are contained in a single file.
No one wants to go back to Billypedia.
In contrast, the MVC model builds in separation of concerns so that different part of the page, like the sidebar and the main body, never directly affect one another. Instead they are both views and children of the model. As siblings, they never interact. This makes it easier to read the code later and easier to debug by creating a physical separation between different parts of the products. This separation also makes it easier to track down bugs and conveniently creates clear divisions among parts of a single program so that teams can easily work simultaneously on different parts of a single application.
MVCs in Practice
Although the MVC model is a solid base on which to organize app building workflow, in practice, many commonly-used "MVC" frameworks and libraries, do not strictly follow the MVC model. For example, Backbone and React are both libraries that were created to help users follow the MVC model, but are commonly described as following an MV* (the star stands for anything) or MVW (the W stands for whatever) model. AngularJS
is a framework that is often described as following an MVVM (Model View View Model) architecture. In all of these cases, the role of the Controller is subsumed into View or Model components, or both.
Conclusion
In conclusion, MVCs can make your code cleaner, more modular, and more concise. This pattern is designed to keep you organized while writing, and to make it easier for teams to divide work in clear ways. There are many MVC frameworks and libraries to choose from, many of which are being constantly updated to meet the ever-changing demands of the technology that we build. While an MVC architecture can keep you organized, we as developers can change and flex this style to fit our needs.
Top comments (0)