Model-View-Controller(MVC) architecture for Node applications

MVC (Model-View-Controller) is a design pattern used in Node.js applications to organize code in a clean and structured way. It separates the application into three parts so that the code is easy to manage, understand, and scale.

MVC stands for:

• Model
• View
• Controller

Each part has a different role in the application.

Using MVC makes Node.js projects:

• Easy to maintain.
• Easy to debug.
• Easy to scale.
• Better for large projects.

The MVC architecture provides a structured way to build scalable applications.

1. Model: Model is used to manage data and database logic. It defines how data is stored and accessed.

Model is responsible for:

• Database connection
• Schema / structure
• Data validation
• Queries

2. View: View is used to show UI (User Interface) to the user. It displays the data received from the controller.

View is responsible for:

• HTML pages
• Templates
• Frontend display

3. Controller: Controller is the main logic handler. It connects Model and View.

Controller is responsible for:

• Handling requests
• Calling model
• Sending data to view
• Business logic

So, to sum it up:

• Model is data part.
• View is User Interface part.
• Controller is request-response handler.

Understanding Node Application

Creating Node Project:

Now, lets get started with the application. npm init is used here to generate a package.json and app.js file.

As the name suggests, there are three folders, called models, views, controllers which will help in the mvc architecture implementation. npm is used to install the basic npm packages to get started.

Project Structure:

The project structure looks like this.

Explanation:

• As you can see, there is aroutes folder, which will serve as controllers.
• Then there is a models folder, in which we have a user model.
• A views folder, which have our views with an extension of .handlebars. Be noted that handlebars is a templating engine which means that it has the ability to generate the pages by filling in the templating that we create.

Implementing MVC:

Now, let's get down to showing how the MVC pattern gets implemented for the process of login and registering as a user in this demo LoginApp.

• Write node app.js to start the application. The application will start if everything is right otherwise try to debug the app using stackoverflow and things like that.
• Open the app in your browser. If you have forked and using my github repo, then navigate to localhost:3000 in your browser and you will see the app running.When you open the app in your browser, your app.js file will say to itself something like :"Oh! The browser has requested localhost:3000/, so lets look for the file to serve if this route is hit. It looks for this code:

• . It tells the app that use the variable routes if '/' is requested. Then it looks for the routes variable. It finds it in the app.js file here:

• . Now it looks in the gfgIndex.js file in the routes folder of our node app to look for the code to execute when the '/' route is hit. It finds the following code.

• This code basically says that render the index.hanblebars if the user is logged in. To check if the user is logged in, it runs the function ensureAuthenticated. This function basically says that if the user is logged in, render the index.handlebars file else redirect the user to the /users/login route.

• This code tells the app to render the index.handlebars file when the GET '/' is called. So, now it goes to the views folder and look for the index.handlebars and renders it to the user. This is how the views-controller part of the architecture works in the app. I believe the above program flow is clear to the reader.
• Lets navigate to http://localhost:3000/users/register. So, the app breaks the route into two pieces:/users and /register and asks itself something like "Oh okay! The users wants to see /users route and then /register . The app looks for the '/users' in its app.js file and finds it here.

• Then it looks for the 'users' variable to use when /users path is hit which can be found in the app.js file:

• So, it goes to the gfgUsers.js file in the routes folder and looks for the route /register. Note that the /users/register finds itself in gfgUsers.js file as /register. It asks the browser to render 'register.handlebars' file. This is the view-controller arch. implementation going on. Second Part of Registration Now, lets register a new user.

• After clicking on submit, the data is taken, POSTed to the '/register' route for processing. This controller validates the incoming data for errors, then creates a new variable called newUser with the User  modelled with all the data and the calls save() on it to actually save the data to the user.

• After the user is created, the '/register' controller asks the browser to redirect the user to '/login' page. This is the model-view-controller architecture implementation.

You can find the entire code used in this article here. Fork, clone and run.