1 of 10

What is MVC and why is it important?

Presented by Erika Rios

2 of 10

Model View Controller (MVC)

=> MVC is a software architectural design pattern that is used to organize and structure your code base

=> Allows for level of modularity and a clear separation of logic

3 of 10

Model - Controller - View

=> Controller communicates data back and forth between the view and model

=> Model handles data logic, defines where the data objects are stored, and interacts with the database

=> View is what the user sees when they interact with the application

4 of 10

Breaking Things Down - Router

=> Request are made from the client side device through the browser via different URL

=> The router hears the request and then connects to the individual controller that is set up to handle that specific request

=> Having a router component allows for another level of abstraction and processes what the user wants. It allows us to think of the requests as independent of what needs to happen when the request comes in

5 of 10

Breaking Things Down - Controller

=> Controllers receive the request from the router

=> Once the controller receives the request, it responds by informing the model and/or the view of what needs to happen to complete the request. It handles the flow of information between the model and view

=> The controller receives the updated changes from the model and view, then responds back to the client with that data, fulfilling the request

6 of 10

Breaking Things Down - View

=> View is what the user sees when they interact with the application. They are often created using templating languages (e.g. EJS, Handlebars, Pug)

=> The view receives instructions from the controller. It then handles how the data should be displayed, and dynamically renders usually in HTML based on the data that is received from the controller

=> View returns the updated presentation to the controller and the controller will send that to the user

7 of 10

Breaking Things Down - Model & DB

=> Model stores data and data related logic. It structures your data in a reliable consistent way.

=> Model listens for instructions from the controller and responds back accordingly

=> The model is the only component that interacts with the database. Models add and retrieve items from DB as well as processes data from or to the DB.

8 of 10

Models using Mongoose & MongoDB

=>Mongoose: ODM (Object-Document Modeling) library for MongoDB

=> Mongoose manages the relationships between data, provides schema validation, and translates between objects in our code and how they are represented as objects in MongoDB

=>Schema is a document data structure that is enforced via the application layer. It can make data more define, can structure data consistently, and can validate the data being entered

9 of 10

Benefits of MVC

=> Provides a level of organization and structure with a clear separation of logic. This makes it easier to not only understand the code but to work together as team on an application. One person can work on the view while another can work on the controller.

=> MVC allows for interchangeability and adds a level of modularity. We can easily change certain parts of our code without disrupting the entire code base. For example, if you wanted to change EJS to Handlebars, you can do so by going to the views folder

=> Helps make our code maintainable and we can test components independently

=> Components are reusable

10 of 10

Overview - MVC

=> Request are made from the client side device through the browser

=> Router organizes all the different types of requests coming in and connects to an individual controller that is set up to handle that specific request

=> Controller gives instructions to the view and model, receives the updated data, and presents that back to the user which fulfills the request. The controller passes the data received from the model to the view if the request called for it.

=> Model receives instructions from the controller, handles data logic and data storage, interacts with the database, and sends back a consistent response back to the controller

=> View receives instructions from the controller, handles how the data is presented, dynamically renders out the HTML and, returns the updated user interface to the controller