MVC for JavaScript Web Applications

​

What is MVC?

MVC is a way to organize your backend code and it stands for…

Model: handles the data between the database and the server

View: handles the files used in rendering the data to the client/user

Controller: Receives the requests from the client/user through the browser and handles the core functionality in transferring data between the model(database) and the “view” files, giving this data back to the client/user.

​

MVC allows us to organize our backend structure to gives us great advantages as noted on the next slide…

Why use MVC for JS?

Pros

• Modularity
• Reusability
• Organization
• Group Programming
• Compartmentalization
• Targeted Testing
• Faster Troubleshooting

Cons

• MVC must have strict rules over methods (appropriate reactions from Controller)
• May be complex to understand structure
• Views may be overburdened from multiple requests and fall behind updating while rendering

Model

View

Controller

Here’s a diagram demonstrating the flow of data using MVC in JavaScript

Note: The Router is part of the Controller that further organizes the backend. It allows us to see exactly where our functions inside the Controller are located and shows us exactly what these functions do.

Thank you!

References:

• https://www.careerride.com/MVC-disadvantages.aspx
• https://github.com/100devs/todo-mvc
• https://blog.sessionstack.com/how-javascript-works-writing-modular-and-reusable-code-with-mvc-16c65cbd9f64

​