How to Create MVC Applications using Nest.JS

There are different ways of designing and implementing web applications. For example, you can create an entire web application by placing all your code in a single file. However, finding an error in such a file (which contains thousands of lines of code) is not an easy task. Other approaches split the code over different files and folders. You will even find approaches that split your application over different small applications distributed over several servers (the distribution of these servers is not an easy task).

As you can see, structuring your code is not an easy task. That’s the reason why developers and computer scientists have developed what is called software architectural patterns. Software architectural patterns are structural layouts used to solve commonly faced software design problems. With these patterns startups or novice developers do not have to “reinvent the wheel” each time they start a new project. There are many architectural patterns, such as model-view-controller, layers, service-oriented, and micro-services. Each one has its advantages and disadvantages. Many are widely adopted. Still, one of the most used is the model-view-controller pattern.

Model-view-controller (MVC) is a software architectural pattern commonly used to develop web applications containing user interfaces. This pattern divides the application into three interconnected elements.

• Model contains the business logic of the application. For example, the online store application product data and its functions.
• View contains the user interface of the application. For example, a view to register products or users.
• Controller acts as an interface between model and view elements. For example, a product controller collects information from a “create product” view and passes it to the product model to be stored in the database.

Nest provides support for the MVC pattern thanks to the integration of the Handlebars templating engine. Other similar frameworks provide support to this popular pattern too. We will see this pattern in action (with actual code) later.

The MVC pattern provides some advantages: better code separation, multiple team members can work and collaborate simultaneously, finding an error is easier, and maintainability is improved.In picture shows the Online Store software architecture we will implement in this book. It can be a little overwhelming now, but you will understand the elements of this architecture when you finish this book. We will review the architecture in the final chapters.

Let’s have a quick analysis of this architecture:

• On the left, we have clients (users of our application e.g., browsers in mobile/desktop devices). Clients connect to the application through the Hypertext Transfer Protocol (HTTP). HTTP gives users a way to interact with our web application.
• On the right, we have the server where we place our application code.
• Clients’ interactions are connected to the main application file (main.ts). This file loads the root module (AppModule), which internally will load other modules (described in Chapter 10), and those modules pass the clients’ interactions to the controllers.
• Controllers (described in Chapter 7) execute the clients’ interactions based on the specific requested routes, i.e. (“/products”) or (“/cart”) routes. Controllers communicate with models (described in Chapter 13), and pass information to the views (described in Chapter 4), which are finally delivered to the clients as HTML, CSS, and JavaScript code.

We highlight the Model, View and Controller layers in grey. We have four models (entities) corresponding to the classes defined in our class diagram in picture. As mentioned, there are different approaches to implement web applications with Nest. There are even different versions of MVC used in a Nest application. In the following chapters, we will see advantages of adopting the MVC architecture defined.

See Next Article Nest JS ...