**
What is MVC ?
**
MVC (Model, View, Controller) is an architectural design pattern used in web development. It aims to process information in a structural way in our web applications. It is used by most of the popular programming frameworks like ruby on rails, express, angular, code-igniter, django and many others. The idea of MVC is to separate functionality, logic, and interface for our applications so that it is easy to work well with other developers.
History Of MVC
The MVC pattern was first introduced in 1979 by computer scientist Trygve Mikkjel Heyerdahl Reenskaug. He wanted to solve the problem of breaking complex user applications into smaller manageable components.
The MVC pattern was primarily used in desktop applications in the 80’s and early 90’s, but in today’s world it is the ideal design choice for organizing your code.
Components Of MVC
M === Model : This is the database schema (MySQL, PostgreSQL, MongoDB => Mongoose). It is responsible for the data logic behind the application.
V === View : This is the client/ui. Essentially what the user sees, it is dynamically shown to the user using templates (EJS, Handlebars, pug).
C === Controller : This is the server. It is like the brain that connects to the model and the view. Server examples includes linux/windows server. PHP, python, ruby.
Advantages Of MVC
MVC structure allows for better organization and easy troubleshooting.
It supports the separation of concerns (SoC) principle; this means that the backend and the frontend code are broken into separate components this way it is easier to manage without breaking anything.
It makes collaboration with other developers easy.
Structure of MVC
The Process
When a user makes a request to a url using a browser, the request first hits the router then sends the request to the controller.
The controller then, based on the request type, either goes to the view or to the model and then the database to get some kind of user data.
The data is then sent to the view, which dynamically converts it to html, and sends it back to the controller.
The controller then sends it back to the user. All these actions happen in seconds.
Model (data)
The model is the brain of the application, it is responsible for getting and manipulating the data. The model processes data to and from either a database, API or a JSON Object.
Models’ are higher-order constructors that take a schema and create an instance of a document for the collection to use. It only communicates with the controller.
Components of the Model
The model mostly houses the database Schema. A Data Model Schema defines how data points are organized and connected.
The schema is the blueprint for your data. It essentially specifies how the data should be received.
Summary
The model is how you interact with your data.It only communicates with the controller.
The controller requests data through the model. The schema is the blueprint.
Schema Code Example
The code example above is what you will ideally see in a file in the model folder. This essentially shows the database schema and indicates the type of data that should be expected.
View (Client)
The view is the client. It displays information to the user. A view usually consists of html and css along with dynamic values sent from the controller.
The controller communicates with the view. Dynamic values are generated using template engines. The template engine is what allows dynamic data because pure html will not output variables or use logic and if statements. Examples of template engines, pug, handlebars, ejs, react etc.
Components of the View
The view houses the html templates.
Summary
The View displays information to the user. The view listens only to the controller. The view follows direct instructions from the controller.
Controller (server)
The controller is the middleman between the model and the view. It takes information from the user, processes the information and talks to the database if needed.
It receives info from the database. It speaks to the view to explain presentations to the viewer.
The controller is what is interacting with the user. It processes GET/POST/PUT/DELETE requests. It handles all server side logic.
The controller asks for data from the model, the controller will then load a view, the template engine in the view
does some logic to show the data to the browser.
The controller can also sometimes load a view without passing in data from the model.
Mongoose Schema
Mongoose is an Object Data Modelling (ODM) library for MongoDB. MongoDB is a schema-less NoSQL document database and unlike SQL databases, structure isn’t enforced, mongoose is used to provide structure to MongoDB. Mongoose translates between objects in code and the representation of that object in MongoDB.
Mongoose schema is a document data structure that is enforced via the application layer. It is the blueprint of the application. It gives structure and organization to our user data.
Object Mapping via Mongoose
Mongoose Schema Code Example
Notice in the code above that Mongoose is first required in the document and then a mongoose schema is created.
File Architecture Using Mongoose
The most attractive concept of the MVC pattern is separation of concerns. MVC components are partitioned in separate folders to prevent the server from being cluttered with all the logic in one file. It allows for easy debugging.
The config folder houses the .env file and the database. The .env is where private files and secrets like api keys, database connection strings, port etc are stored. The database file is where the app connects to a database, NoSQL or SQL
The controller folder is the server, all server logic are stored in the controller folder. The model is where is the mongoose schema is stored.
The public folder houses our client-side code (css and javascript). All the page routes are stored in the route folder so that the data can be easily traced.
The template engines that outputs html are usually stored in the view folder.
Most of this logic all happens behind the scenes away from the user.
Routing Data Through An Application
A user trying to get access to their profile information
When a user clicks on a button that is mapped to a url, a get request is triggered in the route and view appends the ID data for the current user. /edit/pages/profile/[unique user id]
The server controller reads the request and then sends the request to the router, the router then connects the request to the specific route /edit/pages/profile/[unique user id]
The router checks the next part of the url and locates the function in another controller that matches the portion of the path /edit/pages/profile/[unique user id]
The user ID function is then passed into the function as a parameter. A request is sent to the database to retrieve user info via the model which provides structure to the data.
The model receives the data, passes it to the controller, the controller then sends the request to the view to be mapped to the appropriate page template.
Finished template is then sent to the browser and rendered as HTML for the user to view.
Summary
The controller takes information from the user, processes the information and talks to the database if needed.
The controller is the middleman between the model and the view
MVC Summary
Model
responsible for getting and manipulating the data. It is the brain of the application. It communicates with only the controller.
View
this is the actual view of the application, it is the user interface, it is what the user sees when they interact with the app.
*Controller *
the controller receives user input from the routes or view. The controller processes a post, get, put, and delete request.
Thank you!
I hope this has helped you understand MVC as much as writing it has helped me. Goodluck in all your endeavors!
Sarah 🖤
Top comments (0)