Practical JavaScript: MVC

In @gordon_zhu’s WatchAndCode course, he tells the user, the importance of clear code organization.  In the programming world, it’s not only about fast and efficient code,  it’s also important to have clean structured code.  Many beginning web developers get so excited about their project, they start hacking everything without any clear road map. I was like that and it was dreadful. Sure, I can be a  great coder (ooou, how humble) but 2 hours in, I’ll look back at the at my program and absolutely cringe. My code is tough to debug and impossible to maintain. Then came the MVC pattern.

Model-view-controller (MVC) is a design pattern used to split your code into 3 components.

Model: Structures your data in a reliable form and prepares it based on controller’s instructions.

View: Displays data to the user in an easy-to-understand format, based on the user’s actions.

Controller: Takes in user commands, sends commands to the model for data updates, sends instructions to view to update interface.

To put this in a typical user-experience, the user starts off by viewing the website created by the view. The user then interacts with the page and thus alerts the controller. The controller receives the request and then sends it either to the model or simply the view. The model carries out all of the logic and sends it to the view.

I still have a lot to learn but this is my take on MVC model so far. I’ll see you tomorrow!



Thomas Nguyen


Leave a Reply

Your email address will not be published. Required fields are marked *