What is MVC?

What is MVC?

·

3 min read

It is possible to have one file for everything but these days, even the most simple looking app could get messy quickly. You might be already familiar with "Separation of Concern" for the frontend which is why you might be have already been using 3 different files for your HTML, CSS, and JavaScript even though it is possible to just have a single index.html file with inline CSS and all your scripts together. MVC shares similar fundamental principles of Separation of Concerns when working with the backend and when more complex applications.

MVC which stands for Model View Controller is a popular design pattern used as a way of organizing your code and separate functionality. As you can imagine, this will make things easier when working on a project, assigning other developers to specific files, and help you sleep better knowing that this has less risk to breaking other parts.

What is a design pattern?

A design pattern is a proven reusable solution to a common problem. MVC-pattern is one of the most common and useful pattern for software developers.

Model

The model is responsible for getting and manipulating data.

This is what interacts with your database( eg. MongoDB, MySQL).

It communicates with the controller.

View

This is what the user sees.

It communicates with the controller.

View consists of "Templating Languages" (like EJS, Handlebars, Pug, ...etc) for displaying dynamic data.

Controller

It is the middleman that receives inputs. This is the only component that communicates with both the Model and the View.

Processes GET, PUT, POST, DELETE operations.

MVC.png

How does your Code Structure could look like?

mvc code.png

In your IDE like VSCode, don't you agree this looks more organized having separate folder and files? As a beginner, many tutorials might start off by showing to code everything inside the server.js or app.js file, but as you can now see, this is one way professional developers structure to code to make this simpler.

It doesn't matter now how many files are inside the controller or views folder, you can navigate to any specific route. Even when it comes to how the data is structured, now you know to check the models folder without needing to check your database. The data could be structured using Mongoose Schema, but this is a different topic.

Why is MVC useful?

  • Swapping components easily.
  • The ability to reuse your MVC template for future projects.
  • Clean structure can help with targeted testing and troubleshooting.

Conclusion

MVC is not a solution but a best practice you can use when building your next application as an approach/template to keeping thing organized, making less errors and could lead to better solutions to your project.

If you are codenewbie in web development, MVC pattern might be unnecessary for building simple projects, that is why you won't see MVC in any tutorial video and courses for beginners but now that you are aware of this general used template/design called MVC, you will probably see it and even use this in the near future.

Good luck on your coding journey.

I hope you found this blog useful.

Feel free to follow me at Twitter: twitter.com/brianbud_