Best Practices & Guidelines for Angular web applications

We do have plenty of web applications with continuous releases and feature improvements. with such feature velocity, it would become a challenge for the team to do things in the best way, as the time to market ends up with priority, we want to introduce a set of guidelines that represents the most efficient ways to approach a problem in a given business situation.

Angular developed by Google as a rewrite of AngularJS is the most powerful framework for building dynamic programming structures. the main building blocks of angular are modules, components, metadata, templates, data binding, services, directives, and dependency injection.

Best Practices

Following are the set of patterns and best practices to build angular applications which help in writing clean code, and maintain coding standards & performance.

1. ng new: To Create an application that already works right out of the box.
2. ng generate or ng g: To Generate components.
3. ng serve: To test your app locally while developing.
4. ng test: To run unit tests and end-to-end tests.
5. ng lint: To make your code shine.
6. ng add @angular/pwa: To set up the Angular service worker

This interface can be used to create an initial-level structure for the application. It'd be much easier for developers to understand the folder structure and app flow using angular CLI. Ultimately, it saves hours of developers' time.

Module Structure

The modular structure of Angular arranges the code into different modules so all services and components are divided into groups when you construct them. In Angular coding, you can separate functionality into reusable pieces of code.

Files and Folders

Naming conventions are hugely crucial to maintainability and readability and help to provide a consistent way to find the content at a glance. Consistency within the project is vital which helps in tremendous efficiency.

how to name our files and classes and organize the folder structure in a Web App.

1. File Name: We should pay attention to file names while creating files. Names of folders and files should clearly convey their intent. Names should be consistent which the same pattern in which we mention the file's feature first and then the type, dot separated. For example, 'consultation.component.ts' or 'home.component.html' or 'auth.service.ts'. If we want to add more descriptive names to our files we should use a dash(-) to separate the words in the name: 'tc-home.component.ts', 'book_appointment.component.ts'
2. Class Name: When we add names to classes, we should use upper camel case style with the added suffix that represents the type of our file: DatepickerDirective, TcHomeComponent, AuthService.
3. Folder Structure: Below is the one widely used structure for the best practices,

Angular Coding Practices

Coding standards are the ways of programming software. In Angular applications, certain coding styles can be followed for the best user experience.

Developers usually find it difficult to fix bugs and reflect on immediate issues when dealing with complex code structures.

Here's some set of rules that you need to follow to make your project comply with the standard Angular style guide

• Per file, the code must not exceed 400 lines limit
• Per function, the code must not exceed 75 lines
• Utilize custom prefixes to prevent element name collisions with components in other apps and with native HTML elements.
• If the values of the variables are intact, declare it with const.
• Names of properties and methods should be in lower camel case.
• Always leave one empty line between imports and modules such as third-party and application imports and third-party modules and custom modules.
• We shouldn't name our interfaces with the starting capital I letter as we do in the same programming languages.

Single Responsibility Principle

It is very important not to create more than one component, service, or directive... inside a single file. Every file should be responsible for a single functionality, by doing this, we are keeping our files clean, readable, and maintainable.

Breaking down Components

This might be an extension of the single responsibility principle not just to the code files or the methods, but to components as well. The larger the component is, the harder it becomes to debug, maintain and test.

If a component is growing big, break it down into multiple, more manageable, smaller components, dedicating each one to an atomic task.

Using Interfaces

If we want to create a contract for our class we should always use interfaces. By using them we can force the class to implement functions and properties declared inside the interface.

The best example for this is to have angular life cycle hooks in your component: class, HomeComponent implements OnInIt, OnDestroy.

Using interfaces is a perfect way of describing our object literals. If our object is an interface type, it is obligated to implement all of the interface's properties.

TypeScript will show an error if an object doesn't contain all of the interface's properties, and light up IntelliSense for us while populating that object.

Using Immutability

Objects and arrays are the reference types in JavaScript. if we want to copy them into another object or an array and modify them, the best practice is to do that in an immutable way using the es6 spread operator(..)

This way, we are deep copying the user object and then just overriding the status property. Now, the original article is going to be preserved with all of its values.

Safe Navigation Operator (?)

To be on the safe side we should always use the safe navigation operator while accessing a property from an object in a component's template. If the object is null and we try to access a property, we are going to get an exception. But if we use the safe navigation (?) operator, the template will ignore the null value and will access the property once the object is not null anymore.

Using index.ts

index.ts helps us keep all related things together so that we don't have to be bothered about the source file name. this helps reduce the size of the import statement.

For example, we have 'models/index.ts' as

We can import all things by using the source folder name.

Change Detection Optimisations

• Use ngIf and not CSS - If DOM elements aren't visible, instead of hiding them with CSS, it's a good practice to remove them from the DOM by using *ngIf.
• Move complex calculations into the ngDoCheck lifecycle hook to make your expressions faster.
• Cache complex calculations as long as possible.
• Use the OnPush change detection strategy to tell Angular there have been no changes, this lets you skip the entire change detection step.

Build Reusable Components

If there is a piece of UI that you need in many places in your application, build a component out of it and use the component. This will save you a lot of trouble if, for some reason, the UI has to be changed. In that case, you do not go around changing the UI code in all the places. Instead, you can change the code in the component and that is it.

For this, you may have to use property and event bindings to pass inputs to the components and receive output events from the components, respectively.

Using trackBy in ngFor

When using ngFor to loop over an array in templates, use it with a trackBy function which will return a unique identifier for each DOM item.

When an array changes, Angular re-renders the whole DOM tree. But when you use trackBy, Angular will know which element has changed and will only make DOM changes only for that element.

Conclusion

Building web applications and scaling them is a continuous exercise, and there's always scope to improve the way we write code and build apps. which this comprehensive opinionated article on the best practices. We tried to cover all the major aspects and best practices that can be used by businesses in their development process and reap maximum benefits from it.