Angular Code Review Checklist

Code reviews are critical in delivering quality applications to the end-user. It is a process that requires developers to have their work reviewed by their peers. It can be a manual process or one that relies on tools.

The ultimate goal of this evaluation is to identify bugs, syntax issues, and any item that would affect the application’s performance.

However, code reviews can be extensive. We’ve compiled a list of the most important items to consider for your Angular code reviews.

1. Use Descriptive Variable and Function Names

Good clean Angular code is easy to read. Be descriptive and clear when naming functions and variables.

Example:

Avoid this:

function sum(x, y)) {

const val = x + y;

return val;

}

Try this instead:

getTotalFruit(apples, oranges)) {

const totalFruit = apples + oranges;

return totalFruit;

}

2. Ensure Separation of Concerns in Angular Code Reviews

Separation of concerns is a design principle for separating an application into distinct blocks so that each block follows the single responsibility principle.

The overall goal is to create a well-organized project that is maintainable, readable, and reusable.

To accomplish this, create separate modules for each set of logic within the application.

|-- modules

| |-- marketing

| | |-- marketing.spec|module|component|scss||routing.module|.ts

| |-- sales

| | |-- sales.spec|module|component|scss|routing.module|.ts

3. Use Path Aliases

As the size and complexity of your app grow, the app hierarchy might have a deep hierarchy. While this is good for organizing things, it presents a challenge for import statements as they become quite long and confusing.

Using path alliances to reference these deeply nested files keeps the import statements clean and readable.

Example

Avoid this:

import 'sharedComponent' from '../../../shared/components/reusable/shared.component.ts';

Try this instead:

import 'sharedComponent' from '@app/shared/components/shared.component.ts';

4. Rely on Clear Code Not comments

Comments should add value to the code, not duplicate it. For one, too many comments create visual clutter.

Thus, the general rule is that it should explain itself. If it doesn’t, it should probably be rewritten for clarification.

Example:

if (x < 5) {

 x+5; //add five to x

} // if

The example above should be rewritten to clearly define its purpose and avoid the comment.

Example:

if (totalFruit < 5) {

 totalFruit + 5;  

}

5. Lazy Load Modules

Lazy loading reduces the initial load time of the application and minimizes bandwidth. Avoid loading all modules at once. Only the feature module should be loaded synchronously.

The additional modules should only be loaded once the user requests a resource relying on that module.

6. Follow Standard Angular Code Structure For Readability

Standardizing Angular code structure within each class makes it easier to read, debug and maintain.

Here is a suggestion:

– Code

– Private variables

– Public properties

– Public methods

– Private methods

7. DRY

Don’t Repeat Yourself (DRY) is a software development principle, the main goal of which is to reduce repetition.

This repetition litters the project and makes it difficult to maintain. If a piece of logic is repeated through the project, you’d need to find every instance to make the same update.

The risk is that you might miss one and create problems during runtime. DRY Angular supports reuse and ultimately speeds development time.

A good practice when deciding if something should be designed for reuse is to use the “Rule of Three”.

Martin Fowler, in his book Refactoring, attributes this rule to Don Roberts and it states:

Here's a guideline Don Roberts gave me: The first time you do something, you just do it. The second time you do something similar, you wince at the duplication, but you do the duplicate thing anyway. The third time you do something similar, you refactor.

8. Use Angular Code Reviews to Identify, Manage and Reduce Technical Debt

In the era of digital transformation, agility is key. However, this agility may cause the team to prioritize speed over quality.

When this happens, you end up with items that need to be reworked or addressed after release. This is referred to as technical debt. Unfortunately, many teams aren’t able to return to address these items, as they must move on to delivering new features.

Technical debt can be anything from bug fixes, updating documentation to not having enough unit tests, or skipping unit tests altogether.

The best way to manage technical debt is to keep a check on quality vs speed.

It is important to evaluate which items can be addressed quickly versus those that require more time and attention. The worst-case scenario is that you end up with a backlog of issues that ultimately affect your ability to remain agile.

How Adservio Can Help

Angular code reviews help deliver quality applications and support the agility companies need to remain competitive. A comprehensive review process can help ensure everything is readable, maintainable, reusable, and as error-free as possible.

Many companies struggle to balance code reviews with agility. Join forces with a knowledgeable team of IT professionals who can help establish a process that is effective for your organization.

Adservio employs a skilled team of IT professionals who help companies achieve digital excellence in use cases from application development and analytics to software delivery and process automation.

Get in touch with our team of experts and let us know about your business needs and objectives.