DEV Community

Cover image for MVC Architecture in NodeJS explained in details
Adeyemi Raji
Adeyemi Raji

Posted on

MVC Architecture in NodeJS explained in details

Let's take a look at the concept behind nodejs Model–view–controller (MVC) software design pattern.
Model-View-Controller (MVC) is a software architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application.

The MVC pattern is often used in the development of web applications.

Here's a high-level overview of how the MVC pattern works in a Node.js application:

  • Model: The model component represents the data of the application and the business rules that govern access to and updates of this data. It is the core of the application and is responsible for maintaining the data. In a Node.js application, the model is often implemented as a JavaScript object that represents the data of the application.

  • View: The view component is responsible for displaying the data to the user. It is the user interface of the application and is responsible for presenting the data to the user in a way that is easy to understand and interact with. In a Node.js application, the view is often implemented using a template engine such as EJS, Jade, or Handlebars.

  • Controller: The controller component is responsible for handling user input and interacting with the model and the view. It is the middleman between the model and the view, and is responsible for updating the view when the model changes and updating the model when the user interacts with the view. In a Node.js application, the controller is often implemented as a JavaScript function that handles HTTP requests and sends responses.

Here's an example of an MVC application in Node.js that demonstrates how these components work together:

const express = require('express');
const app = express();

// Model
const fruits = ['apple', 'banana', 'orange'];

// View
app.get('/', (req, res) => {
  res.render('fruits', { fruits: fruits });
});

// Controller
app.post('/addfruit', (req, res) => {
  fruits.push(req.body.fruit);
  res.redirect('/');
});

app.listen(5500, () => {
  console.log('MVC app listening on port 5500!');
});

Enter fullscreen mode Exit fullscreen mode

In this example, the 'fruits' array is the model, the view is a template that displays the list of fruits, and the controller is the route handler that adds a new fruit to the list when the user submits a form.

I hope this article is enjoyable to read and helpful. As a technical writer, it brings me joy to share my knowledge and assist others in learning and growing. Thank you for taking the time to read it.

Top comments (1)

Collapse
 
gr8fulnez profile image
John Oluwole

Nice piece