How to build a super-duper-fast Angular pipe ⚡️

Looking to make your Angular pipes perform like a dashing cheetah?

Then here's how to create a fast, highly-performant Angular pipe. ✨✨✨

Angular pipes hardly ever cause performance problems worth bating an eye at.

And just to make sure you're aware, it's much more common that an Angular application's performance can be drastically improved by tweaking change detection options or making sure that ngFor is using a trackBy function.

But in any case, if you're looking to shave a few milli-seconds and squeeze everything you can and pull all the levers you got to make your Angular application perform, then this is how to make your Angular pipes run really fast. 💥

Before we dive to deep let's clarify a few things.

None of what I'm going to teach you in this article will be worthwhile if your Angular pipes are not pure functions. This means that your Angular pipes always return the same value when given the same input. And if you're a smart Angular developer, which I'm sure you are, then you're Angular pipes already use pure functions.

Yes buddy, I want to make you a smart Angular developer!

The second requirement is this. The Angular application should not be binding template data with getter functions. This is a bad choice and is likely to turn around and bite you someday.

And with the basics out of our way, let's take an example Angular pipe and make it perform faster.

Our example pipe

We'll swipe the custom pipe example from the Angular docs. It's a pipe that raises any given value exponentially.

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | exponentialStrength:exponent
 * Example:
 *   {{ 2 | exponentialStrength:10 }}
 *   formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent?: number): number {
    return Math.pow(value, isNaN(exponent) ? 1 : exponent);
  }
}

Not bad. But how do we make this thing perform better?

Using Lodash to make the Angular pipe perform faster

Whip up a terminal and install the lodash library and it's Typescript buddy. Here's the command you'll need.

npm install lodash @types/lodash --save

And then we'll harness the memoize caching function to cache the results of previous computations.

import { Pipe, PipeTransform } from '@angular/core';
import { memoize } from 'lodash';

@Pipe({
  name: 'exponentialStrength'
})
export class ExponentialStrengthPipe implements PipeTransform {

  exponentializer = memoize(this.getExponential, (...args) => this.getExponential(args[0], args[1]));

  transform(value: number, exponent?: number): number {
    return this.exponentializer(value, exponent);
  }

  getExponential(value, exponent): number {
    return Math.pow(value, isNaN(exponent) ? 1 : exponent);
  }

}

BOOM! 💥💥💥 That's how we cache pipe results.

Again, in most cases this isn't a huge performance gain for Angular applications. But if your pipe performs a costly computation then I highly recommend this approach.

Conclusion

And that, my friend, is how you build a fast, highly-performant Angular pipe. 🤓

Questions? Comments? Don't hesitate to reach out.