MVC Architecture

MVC is one of the most frequently used industry-standard web development frameworks to create scalable and extensible projects as it helps to write better organized and more maintainable code.

But what exactly is MVC?

Model View Controller is a predictable software design pattern commonly used for developing user interfaces that divides the related program logic into three interconnected elements — the Model, the View, and the Controller.

Each of these components are built to handle specific development aspects of an application.

This design paradigm allows separation of concerns between the presentation of data from the way the data is accepted from the user and the data that is being shown.

Diagram of interactions within the MVC pattern

Let us understand this in a bit more detail -

Model — It is the application’s dynamic data structure, independent of the user interface.

Often a Database, the structure of a model is how the schema of the database is. Here’s how a schema of a MongoDB document would look like -

const taskSchema = mongoose.Schema({
   title: {
      type: String,
      required: true
   },
   description: {
      type: String
   },
   completed: {
      type: Boolean,
      default: false
   }
});

View — It is a Graphical User Interface — what’s presented to the users and how users interact with the app. The View presents the model’s data to the user.

Mostly, the view is made with HTML, CSS, JavaScript and often templates. The visual representation can consist of data- like a list, table or functionality — like buttons, canvas for the user to interact with.

But the view doesn’t know how to update the model because that’s the controller’s job.

Here’s how the view can be constructed using React.js to display the data from the model above.

//Call to API to fetch tasks
return (
  <ul>
     {tasks.map((task) => (
        <li>
            <h2>{task.title}</h2>
              {task.description} 
              <button onClick = {updateTask}>{task.completed ?      'Completed' : 'Incomplete'}
              </button>
        </li>
     ))}
  </ul>;
)

Controller — The Controller exists between the view and the model.

The controller updates the view when the model changes. It also adds event listeners to the view and updates the model when the user manipulates the view.

In the above todo list web app, when the user clicks on the button to toggle the status of the task, the click is forwarded to the controller. The controller modifies the model to mark the item as completed / incomplete. If the data needs to be persistent, it also makes an async save to the server.

Here’s how the controller method can be written in Express using some Mongoose methods

export const updateTask = async (req, res) => {
   try {
      const updatedTask = await          Task.findByIdAndUpdate(req.params.taskId, req.body, 
           {
               new: true,
           });
       res.status(201).json(updatedTask);
   } 
catch (error) {
      res.send(error);
   }

MVC with User Action

Wrapping up

MVC is a framework for thinking about programming, and for organizing your program’s files. To signify the idea that the code should be organized by its function, developers should create folders / files for each part of MVC.

MVC gives a starting place to translate one’s ideas into code, and it also makes coming back to our code easier, since we will be able to identify which code does what. In addition, the organizational standard MVC promotes makes it easy for other developers to understand our code.