Example of Refactoring Index and About Page Nest JS

The code in the previous chapter can be further cleaned and improved. This is because, we have not defined rules for coding any of the elements. We will see how to refactor the code to make it cleaner and more maintainable. We will also provide general tips for handling controllers and views. Keep in mind that most of the principles presented in this chapter apply not only to a Nest project but can be applied in other MVC frameworks (such as Django, Spring, Laravel, Express, and more).

Refactoring controllers

Previous controller

The previous chapter showed a controller with two methods. Let’s analyze the about method.

Here we have three problems.

• Variable naming is a mess. Using names such as data1 is horrible; it does not say anything. Instead of that, we can use title .
• We have three elements defined in the return JavaScript object ( title , subtitle , and viewData ). Imagine if we have 20 variables to pass to the view. We do not have consistency. We send some variables to the view one by one, and we also send some variables grouped in an array. We will use the viewData variable to pass all the information to the view within a single array variable. This will be our preferred strategy as we will see it next.
• Finally, we have a blank line before the ending of the curly brackets, and we define some texts with single quotes (check data1 ) and others with double quotes (check subtitle ). We need to define a consistent coding style guide. This one will be solved in the next chapter.

Quick discussion: Let’s see the importance of variable naming with two quotes from the (2019 -  Thomas, D., & Hunt, A. - The Pragmatic Programmer: your journey to mastery) book. “The beginning of wisdom is the ability to call things by their right names. - Confucius.” - “Why is naming important? Because good names make code easier to read, and you have to read it to change it.”

Next, let’s refactor the controller.

New controller

Let’s refactor our controller. In src/app.controller.ts , make the following changes in bold (replace the content of the index and about methods).

Now that we use the single variable strategy both methods are consistent. The return sends only viewData . With this approach, it does not matter if we pass one variable to the view or dozens. In both cases, we pass the associative array.

Check that we have some differences in the coding style (spacing, variable definition, and use of single quotes vs double quotes). Those mistakes were introduced on purpose, but we will fix in the next chapter.

Refactoring views

The previous chapter showed two views that display data a little differently. The views/about.hbs view will not be changed since it displays the data using the viewData strategy. However, we will need to modify the views/layouts/app.hbs view to match the single variable strategy previously defined.

Let’s refactor our app view. In views/layouts/app.hbs , make the following changes in bold

As you can see, we now access the data through the single viewData associative array. We will use this strategy across the entire application, making our views more consistent.

TIP: As a software developer, a good strategy is to create a document with architectural rules and share that document with your team (if you have one). You can make that document in the project repository wiki (if you have one). Encourage all the members to read that document. A first rule that you can include in that document could be: “controllers should only pass an associative array called viewData to the views”. These simple rules will save you a lot of time and a lot of headaches; believe us, Daniel always creates a document like that for all his projects, and he encourages his students to do it in their projects.

Quick discussion: Some of the previous data (such as the description and author ) can also be placed directly over the about view. We mean, you do not need to define some of those texts as variables in the controller and send them to the view. Instead, you can place the text directly in the views. We did it that way to illustrate and explain some Nest elements. There is even a better option that is out of this book’s scope. That option is called Internationalization or i18n. In i18n, you move away those texts from controllers and views and place them in the src/i18n folder. I18n allows you even to retrieve strings in various languages to create a multi-language application. It is not difficult to implement; you can use this library to get more info about it https://www.npmjs.com/package/nestjs-i18n, search in Google, or let us know if you need a good example (use the discussion zone of the book repository).

Updating links in Header

Now that we have the proper controller and views, let’s include the links in the header. In views/layouts/app.hbs, make the following changes in bold.

We declared the corresponding routes for each link.

Running the app

In the Terminal, go to the project directory, and execute the following:

Execute in Terminal

npm run start:dev

Now, you can navigate between the Home page and the About page by using the links in the navigation bar 

See Next Article Nest JS ...