What are the constituents of a great Angular application? If this is the exact question in your mind, you’ve landed in the right place.
I understand that with speeding times and enormous number of developments every day, making the perfect web application or mobile app application can be difficult. Despite incorporating high-tech features and functionality, your applications may still fail to deliver optimal user experiences. This is often due to a lack of awareness or adherence to essential standards needed to enhance the performance of Angular applications.
I’ve narrowed down all the best practices for you to improve the performance of your angular application, simplifying your development journey.
Essential Standards to Boost Angular Application Performance
Here are the first 10 best practices that you need to follow to improve your angular application performance:
1. Prevent Memory Leaks
In Angular applications, a memory leak happens when certain objects in the application’s memory are no longer necessary but are not freed up by the garbage collector. This occurs because these objects are still being referenced, preventing the garbage collector from reclaiming their memory.
If components are removed from the Document Object Model (DOM) without unsubscribing from observables, they’ll stay subscribed and use memory unnecessarily, potentially slowing down your app.
For example: If a user uploads an image, the application stores it in memory using an RxJS subject, subscribing to it until the image is saved in the database. Failing to unsubscribe from the subject after saving the image will keep the image data in memory unnecessarily.
So, to improve the performance of their application, one primary action every developer can take is to release the memory of objects in the application.
Furthermore, diagnosing memory leaks can be a challenging and frustrating task for developers due to their elusive nature. Therefore, Angular developers must follow the practice of unsubscribing from the observables when they are no longer required.
Note: When addressing memory leaks, it’s crucial to consider their impact on other applications as well. Read our blog for insights on preventing memory leaks in Java and ensuring the performance and stability of your application.
2. Change Detection Strategy
Angular generally has two different change detection strategies – OnPush and Default strategy.
- Default Strategy: This checks all components and their children on every change detection cycle. In large apps, a small change in one component triggers checks in all relevant child components, potentially degrading performance.
- OnPush Strategy: This strategy only checks for changes in components, such as changes in input properties or triggered events. It improves performance by reducing unnecessary checks and changing detection cycles.
It is recommended to use the OnPush change detection strategy for components in larger applications to improve performance and scalability. For smaller applications, the Default strategy may be suitable, but it’s generally considered a bad practice.
3. Use Web Workers
Web workers can be used to run any script in background threads, allowing heavy computations to be performed without affecting the users interface. This can help provide a smooth experience for users. However, using web workers requires additional setup and coordination, as developers must manage multiple threads and handle communication between them.
They come with some restrictions, such as not having access to the DOM. Therefore, codes must be modified accordingly. Additionally, developers should handle errors and edge cases to ensure that Web Workers are robust and reliable.
4. Optimize Performance with RxJS Operators
In modern applications, developers are required to manage various user events such as clicks, hovers, keypresses, and key-ups in the browser. These events trigger actions such as modifying data, loading content, or sending data to the backend.
The performance issue starts to arise when we frequently update a large dataset based on this event.
For example: A global search box triggers an API call on every keypress event to fetch data. This can lead to performance issues on the application page over time.
To address this challenge, RxJS offers the “Debounce” operator.
It helps reduce the number of backend API calls by emitting an item from an Observable only after a specified timespan has passed without emitting another item. This prevents rapid, unnecessary calls.
Other RxJS operators that can be useful for working with frequent data emissions include:
- auditTime: Pauses the source observable for a specified duration
- throttleTime: Delays the emission of subsequent values from the source for a specified timeframe.
Thus, using these operators can prevent performance issues in our applications. RxJS provides other operators as well that are suitable for different user actions or events in the UI.
5. Memoize Function Calls
In Angular, calling the functions directly from templates is discouraged due to potential performance issues. Each time the change detection mechanism runs, the template is re-executed. This can lead to performance problems, especially in large applications. That is re-executing every small user event and slowing down the application.
For example:
Calling a function multiple times from a template using a loop.
html:-
<div *ngFor="let data of loadedAnime$ | async">
<div>{{ hardMathEquasionFunctionCall(data) }}</div>
</div>
.ts file:
// this
hardMathEquasionFunctionCall(anime: AnimeData): number {
console.log('Function call')
return hardMathEquasion(anime.score);
}
Each time the function is called, your Document Object Model (DOM) will be re-rendered.
So, when a function takes a long time to finish, it can slow down the user interface, leading to a laggy experience for users. This is because the function needs to be completed before other UI code can run.
To ensure a responsive interface, it’s important to ensure that template expressions complete quickly. For complex calculations, consider moving them to separate components or pre-calculating the values.
6. Use trackBy option for “For Loop”
Using the ngFor directive to loop over items and display them on the DOM can impact performance if not used carefully.
For instance, when asynchronously adding or removing employees, Angular’s change detection checks for new values in a large object containing the employee list. This process can lead to the destruction and recreation of the DOM for each item, affecting performance.
The ‘ngFor’ directive in Angular is used to display a list of items in the user interface. However, if not used carefully, it can slow down the app.
For example, imagine you have a long list of employees, and you can add or remove employees at any time. Each time you make a change, Angular checks the entire list to see if anything has changed. If it finds a change, it rebuilds the entire list in the UI, which can be slow.
To make this faster, Angular provides a ‘trackBy’ function. This function tells Angular how to identify each item in the list. With trackBy, Angular can update only the parts of the list that have changed, instead of rebuilding the entire list. This makes the app faster and more user interactive.
7. Lazy Loading
Large enterprise applications built using Angular often face performance issues due to the size of the application and bundle. As an application grows with features and complexities, so does its bundle size. This leads to slower downloads, parsing, and JavaScript execution times, impacting the overall performance of the application.
Enter lazy loading as a viable solution. This involves loading only the necessary modules during the initial load of the application. This means that the main bundle size can be reduced, leading to faster download and parsing times. Additionally, other modules can be loaded only when the user navigates to specific routes. This further improves the application’s load time and overall performance.
8. Use Ahead Of Time Compilation
Inefficient compilation of template code during runtime can hinder an application’s performance, leading to slower loading times and execution speeds.
Here, Ahead of Time (AOT) compilation offers a remedy by pre-compiling the template code during the build process. This optimization step enhances the application’s performance by reducing loading times and improving execution speeds.
9. Use NgRX for State Management
Managing state in Angular applications can become complex and lead to performance issues due to scattered state management logic and lack of a centralized approach.
Here, NgRX, a state management library for Angular, provides a single source of truth for the application state, improving performance by streamlining state management. It offers features like reducers for better testing and code quality, along with a debugging tool for simplified error detection and new feature implementation. It is beneficial for medium to large projects with extensive user interactions and shared data sources. Thus, it promotes modular and maintainable code through its strict separation of concerns principle.
10. Use Pure Pipes instead of Methods
Using methods in templates for calculations triggers change detection more frequently, leading to increased re-rendering of the component. This can significantly impact performance, especially in templates with numerous interactions or heavy processing.
component.ts file:
import { Component } from "@angular/core";
@Component({
...
})
export class AppComponent {
Customers = [
{name: 'AAA', gender: 'M'},
{name: 'BBB', gender: 'F'},
{name: 'CCC', gender: 'F'}
];
addTitle(gender: string) {
console.log(‘add title called’);
if(gender === 'M') {
return 'Mr.';
} else {
return 'Miss.';
}
}
}
.html file:
<ul>
<li *ngFor=”let customet of customers”>
{{ addTitle(customer.gender) }} {{ customer.name}}
</li>
</ul>
In this example, the method is invoked six times immediately after clicking the “Add Customer” button.
So, pure pipes offer a solution to this issue by being called only when the function parameters change. In the following example, the pipe is invoked only once:
add.title.pipe.ts:
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "addTitle"
})
export class TitlePipe implements PipeTransform {
transform(value: string): any {
console.log(‘add title pipe called’);
if (value === 'M') {
return 'Mr.';
} else {
return 'Ms.';
}
}
}
.html file:
<ul>
<li *ngFor=”let customet of customers”>
{{ customer.gender | addTitle }} {{ customer.name}}
</li>
</ul>
In addition to the 10 points, I encourage you to familiarize yourself with Angular 17 and its essential standards.
4 Additional Tips to Boost your Angular App Performance
Here are 4 other essential standards according to the latest Angular version (Angular 17):
1. Performance Improvement with esbuild
The integration of esbuild can significantly improve the performance and build speed of Angular development services. A study has shown that applications running on the latest Angular version (Angular 17) have experienced a 67% increase in build speed. Transitioning from traditional builds to esbuild can be effortlessly done. It only requires changes in the Angular.json file:
"builder": "@angular-devkit/build-angular:browser-esbuild"
Completing this transition can help to build business solutions with minimal turnaround time and maximum efficiency.
2. Enhancement with Deferred Loading
Deferred loading focuses on delaying the loading of resources like stylesheets and scripts, and strategically presents information when users need it. This approach in Angular’s latest version optimizes loading times by prioritizing essential resources while delaying non-essential ones. It helps Angular developers enhance user experience by reducing unnecessary waiting times during the initial loading of the application.
3. Improvement in Server-Side Rendering (SSR)
The latest version of Angular (Angular 17) can deliver substantial performance improvements in Server-Side Rendering (SSR). This update introduces faster build times, more efficient rendering, and stable SSR integration, providing several advantages and enhancements to HTML rendering for users.
Developers can initiate a project with SSR using the –ssr flag:
ng new my-app –ssr
If the SSR flag is not specified during project initialization, the creation assistant will prompt developers to choose whether to start the new project with SSR. Additionally, developers can add SSR to an existing project using the following command:
ng add @angular/ssr
4. Optimizing Looping Constructs
The latest version of Angular introduces optimized control flow loops, designed to enhance build performance, especially for Angular applications. These loops are specifically developed for Angular templates, offering significant performance improvements over traditional JavaScript loops.
For example, in previous Angular versions, iterating over a list for rendering as individual elements was done using JavaScript loops. However, in the latest version, Angular’s built-in control flow loops are optimized for Angular’s change detection mechanism. This optimization results in a notable performance boost.
Here’s a code snippet showcasing the use of the built-in for loop in the latest version of Angular:
@for(c of columns; track c.field) {
<igx-column
[field]="c.field"
[header]="c.field"
[cellStyles]="c.cellStyles">
</igx-column>
}
So, I hope you’ll enjoy building amazing Angular applications from now on! For further insights, feel free to reach out to us at Nitor Infotech.
