MVC: The Code Structure MVP
Almost all apps and frameworks have a common feature of growing both in size and complexity overtime. What might have started as a few lines of code developed by one person can often quickly transform into a much larger chunk of codes involving multiple teams and people with different levels of experience.
As a project grows, it becomes more meaningful to maintain a logical and consistent structure. Hmm! speaking about structure, in practical terms, it means to arrange or organize code in a particular way for easy comprehension.
Why do people organize things in the first place? Basic answer is that it helps with finding things. Take the library for instance, the larger a library, the greater the need to organize it properly so that the required information can be found relatively easily and quickly.
The acronym MVC stands for Model, View and Controller and it is a popular way of organizing your code so that each section of your code has a purpose and those purposes are different.
The Components of MVC
- The Model represents the raw data that defines the component of your app. The model does not depend on the controller or the view. In plain terms, the model depicts the real world things. For example, if you were building an Events app, the model code would define the “type” of event, the “guests” and “location” as these are what comes to mind in organizing an event.
- The View displays the model data, and sends user actions (e.g. button clicks) to the controller. The view code defines how your user sees and interacts with it.
- The controller provides model data to the view, and interprets user actions such as button clicks. The controller depends on the view and the model. In some cases, the controller and the view are the same object. So lets say that the controller is the middle man that receives user input and decides what to do with it.
Lets look at the MVC structure like the cardiovascular system. As the heart beats, it pumps blood through a system of blood vessels. The main blood vessels which are the arteries, capillaries and veins are like the Model.
The process the blood vessels undergo to ensure that blood is being transported to the heart is like the controller. The controller is the pump the heart makes for blood to flow through the vessels(Model). Without the blood vessels as a medium, blood cannot be transported to the heart. In other words, the controller depends on the model.
Then, the continuous flow of blood which is your heart beat makes you breath. Your existence is the View. It displays a functioning controller that is the heart.
MVC APPLICATION
MVC is helpful when planning your app, because it gives you an outline of how your ideas should be organized into actual code. Let’s imagine you are building a notes app. This app is a note taking app that helps you to add notes, list notes, read notes that have been added and to delete notes as well.
The Model in a notes app might define what a “note” is and that a “list” is a collection of note. The View code will define what the notes taking app look like visually. The notes could have large font, italicized or be a certain color. Lastly, the Controller could define how a user adds a note, reads a note and deletes the note. The Controller connects the View’s add button to the Model, so that when you click “add a note,” the Model adds a new note.
Taking the time to think about how your app fits into the MVC framework will level-up your skills as a developer by teaching you how to make clean code structures that will make your apps better! Hope this was helpful!
To learn more about the MVC structure checkout brainvire.com, geeksforgeeks.org. Thanks for sticking to the end!
