Optimizing Angular apps

Disclaimer

This is a set of tips I've learned from people way smarter than me

Not as a call for a revolution in our apps

Treat this as opportunity to supplement your knowledge

🤯

🤔

⚔️

General

Angular

General

Managing your NPM packages

Source: https://www.youtube.com/watch?v=M3BM9TB-8yA 

(10 Things I Regret About Node.js - Ryan Dahl)

Review your dependencies

source-map-explorer

Check the size first

Deduplicate 

Not everything belongs to "dependencies"

Keeping bundle size in check

(Tree) Shake It!

Source: https://webpack.js.org/guides/tree-shaking/

General

JavaScript

Generally, do what you always do

Source: https://nodesource.com/blog/improve-javascript-performance/

  • use the algorithms with the least computational complexity
  • avoid recursive calls
  • put the calculations and calls to functions that are repeated to variables
  • etc.

Beware fancy code

var numbers = [2, 4, 12, 6, 8, 29, 5, 10, 87, 11, 7];

function process(arr) {
    let newArr = arr.slice();
    newArr[0]++;
    for (let i = 1; i < newArr.length; i++) {
        const current = newArr[i] + 1;
        let leftIndex = i - 1;

        while (leftIndex >= 0 && newArr[leftIndex] > current) {
            newArr[leftIndex + 1] = newArr[leftIndex];
            leftIndex = leftIndex - 1;
        }
        newArr[leftIndex + 1] = current;
    }
    return newArr;
}

const newArray = process(numbers);

Source: https://blog.usejournal.com/performance-vs-readability-2e9332730790

Beware fancy code

const process = arr => arr
  .map(num => num + 1)
  .sort((a, b) => a - b);

const newArray = process(numbers);

Source: https://blog.usejournal.com/performance-vs-readability-2e9332730790

... which is 75% slower

than the previous solution.

Web Workers

Source: https://dev.to/erxk_verduin/improve-performance-with-web-workers-186g

// web-worker.worker.ts

addEventListener('message', ({ data }) => {
  const val = someHeavyOperation();
  postMessage(val);
});
// some.component.ts  

startWebWorker() {
    if (typeof Worker !== 'undefined') {
      const worker = new Worker(
        './web-worker.worker', 
        { type: 'module' }
      );
      worker.onmessage = ({ data }) => {
        // Hide loading widget
        this.loading = false; 
      };
      // Display loading widget
      this.loading = true; 
      worker.postMessage(this.dataSize);
    }
  }

Profiling Tools: Chrome's Lighthouse

Profiling Tools: Node Clinic

Angular

"Optimizing an Angular application" - Minko Gechev

Minko's tips

  • keep in mind the Angular's change detection (use ChangeDetectionStrategy.OnPush and separate your components)
  • use immutable data structures (Immer, Immutable.js )
  • use pure pipes instead invoking function in a template
  • cache outputs (memoizing)
  • think about an optimal strategy for refreshing data from a server

Lazy-loading modules

Source: https://angular.io/guide/lazy-loading-ngmodules

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  }
];

Use trackBy in *ngFor

Source: https://blog.ninja-squad.com/2019/05/07/what-is-angular-ivy/

@Component({
  selector: 'app', 
  template: `
    <ul>
      <li *ngFor="let item of items; trackBy: trackById">
        {{item.name}}
      </li>
    </ul>`
})
class AppComponent {
  items = [
    {
      id: 1,
      name: 'item 1'
    }, 
    {
      id: 2,
      name: 'item 2'
    }
  ];

  trackById(index, item) {
    return item.id;
  }
}

Don't leave your Observables subscribed or Promises pending

Source: https://blog.ninja-squad.com/2019/05/07/what-is-angular-ivy/

@Component(...)
class AppComponent implements OnInit, OnDestroy {
  customers$ = new Subject<Customer[]>();
  sub = new Subscription();

  ...
  
  ngOnInit() {
    this.sub = this.customers$.subscribe(...);
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Don't manipulate DOM directly or use addEventListener

@Component({
  selector: 'app-click-me',
  template: `
    <button #click-me-btn>Click me!</button>
    {{clickMessage}}
  `
})
export class ClickMeComponent {
  clickMessage = '';

  ngOnInit() {
    const el = document.getElementById('click-me-btn'); // ⚠️ #1
    el.addEventListener('click', event => {	        // ⚠️ #2
      this.onClickMe();
      el.style.color = 'green';                         // ⚠️ #3
      console.log('Clicked!');                          // ⚠️ #4
    });
  }

  onClickMe = () => {
    this.clickMessage = 'You are my hero!';
  }
}
  • addEventListener may result in memory leaks
  • direct DOM manipulation is slow and inefficient (Angular uses virtual DOM)
  • even using console.log() slows down the app!

Leveraging the NgZone

@Component(...)
export class DragAndDropComponent {
  element: HTMLElement;

  constructor(private zone: NgZone) {}

  mouseDown(event) {
    this.element = event.target;

    this.zone.runOutsideAngular(() => {
      window.document.addEventListener('mousemove', this.mouseMove);
    });
  }

  mouseMove = (event) => {
    event.preventDefault();
    this.element.setAttribute('x', event...);
    this.element.setAttribute('y', event...);
  }
  
  mouseUp(event) {
    this.zone.run(() => {
      this.updateBox(...);
    });

    window.document.removeEventListener('mousemove', this.mouseMove);
  }
}

Source: https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html

Progressive Web Apps

Source: https://angular.io/guide/service-worker-getting-started

Angular Ivy compiler

Source: https://blog.ninja-squad.com/2019/05/07/what-is-angular-ivy/

  • 🚀 better build times (with a more incremental compilation)
  •  🔥 better build sizes (with a generated code more compatible with tree-shaking)
  • 🔓 new potential features

Final, general tips

  • compress/transform your images and static files
  • remove unused CSS

Thank you!

✋😎

@kajetansw

kajetan.dev

Made with Slides.com