Building Performance First Angular Apps

Saturday 8th of August 7:30 PM
Vicentiu B.

Have you ever said "I'll just check for performance later", or "It's not really fast, but we can fix that later"?

You might not get the time for that. The best apps are built with performance in mind. I like to call them performance-first apps.
With that in mind - let's see some tips on Angular performance on HTML templates

Using pipes vs. methods

Methods are re-evaluated on each Angular change detection cycle. Pipes are pure by default, and only triggered if the input changes.

Methods in HTML - See it in action

<ul>
  <li *ngFor="let user of users">
  {{camelize(user.name)}}
  </li>
</ul>

Pipes in HTML - See it in action

<ul>
  <li *ngFor="let user of users">
  {{user.name | camelize}}
  </li>
</ul>

 

Methods vs Properties

For state properties that don't change often, use a property/variable instead of a method.

Methods in HTML

<ul *ngIf="isLoggedIn()">
  <li *ngFor="let user of users">
  {{ user.name }}
  </li>
</ul>

Properties in HTML

<ul *ngIf="isLoggedIn">
  <li *ngFor="let user of users">
  {{ user.name }}
  </li>
</ul>

 

Adding computed properties to the objects

You can add computed properties to models by determining their values in a service, and having an interface for the final model.

Computed on the fly - See it in action

<ul>
  <li *ngFor="let user of users">
    {{user.name}}, check: {{checksum(user.name)}}
  </li>
</ul>

Pre-computed - See it in action

<ul>
  <li *ngFor="let user of users">
    {{user.name}}, check: {{user.checksum}}
  </li>
</ul>

 

Don't abuse dynamic IDs

Dynamic IDs might be useful for lists, but use them wisely.

Ineffective example

<li *ngFor="let user of users; let i = index">
    <span id="user-{{i}}-name">{{user.name}}</span>
    <span id="user-{{i}}-age">{{user.age}}</span>
    <span id="user-{{i}}-salary">{{user.salary}}</span>
  </li>

Effective example

  <li id="user-{{i}}" *ngFor="let user of users; let i = index">
    <span class="name">{{user.name}}</span>
    <span class="age">{{user.age}}</span>
    <span class="salary">{{user.salary}}</span>
  </li>

 

Use Track By

You can use track by to avoid unnecessary re-renders of the objects (if they didn't change). Read more here

Without trackBy - See it in action

<li *ngFor="let user of users">
    {{user.name}}
</li>

With trackBy - See it in action

<li *ngFor="let user of users; trackBy trackByName">
    {{user.name}}
</li>

 
See you next week for more tips on fine-tuning your architecture for the best Angular Performance.
These tips & tricks don't represent an exhaustive list, and other improvements are definitely out there. Let's chat on Twitter about these & other tips on Angular performance.

Vicentiu B.  

Passionate full-stack developer with an eye for User Interface and flashy new web features