Slides from my talk at Angular IL

1. Improve runtime
performance

2. About mySelf
• Experienced FE developer, specialised in B2C applications.
• FE Team Lead @ market.co.uk
• Weekends FE developer @ fashbash.co

3. Run time performance should bother us?
• Angular core team direction:
• Ivy - Hello world in 2.7 kb
• Better tree shaking
• Dead code elimination
• The rest is in our hands…

4. "We found that 53% of mobile site visits
are abandoned if pages take longer than
3 second to load…”

6. Tools to measure
Performance

7. Benchmark.js Chrome dev tools
Profiler
@angular/benchpress

8. function benchmark(iterations, f) {
var start = new Date();
for (var i = 0; i < iterations; i++) {
f();
}
var end = new Date();
return "Elapsed time: " + (end - start) + " msec";
}
benchmark(1000000, function() {});

9. Why benchpress?
● Rendering time - test the performance impact of stylesheet
changes
● Garbage collection - improve memory usage of applications
● Measure the client side only - ignoring BE calls
● Measure FPS
@angular/benchpress

10. Measure your bundles
ng build --prod --source-map
npx source-map-explorer dist/*/main*js

11. Page Load
Optimisations

12. • - - prod (AOT, tree shacking)
• Lazy Loading
• Opportunity for improve?
• Time between html load & bootstrap
Page load Optimisations

13. What we want to measure?
Time for first
meaningful paint
Time to
interactive

14. 1. Pre rendering
Aka - @angular/universal

15. Page Load
SSR
Regular
load
0 30 60 90 120
index.html load App bootstrap First view

16. 2. Pre xhr requests

17. Page Load - search pages
Time
0 40 80 120 160
index.html load App bootstrap First view XHR request

18. Page Load - search pages optimised
Time
0 40 80 120 160
index.html load XHR request App bootstrap First view

19. 3. Service Workers

20. Service workers
ng add @angular/pwa --project *project-name*

21. Service workers
Fast Work offline Installable
Integrated Engaging

22. Service workers
Fast Work offline Installable
Integrated Engaging

23. Caching with service workers
• cache API - cache your app shall and assets
• Intercept your Http requests - cache them?

24. Runtime
Optimisations

25. Fibonacci
remember?

26. export function fibonacci(n) {
let a = 1, b = 0;
let temp;
while (n >= 0) {
temp = a;
a = a + b;
b = temp;
n--;
}
return b;
}

27. export function fibonacci(n) {
if ((n === 1) || (n === 2)) { return 1; }
return fibonacci(n - 2) + fibonacci(n - 1);
}
O(2^n)

28. Fibonacci sequence - sounds easy to compote?
Recursive
Iterative

29. Demo…

30. 1. onPush
changeDetectionstrategy

31. We need to trigger the
change detection…
Copy the entire array
is efficient?

32. 2. immutable.js
npm i immutable -—save

33. Why IMMUTABLE.js?
• Enforce immutability - trigger change detection
• Persistent Data Structures = X100 times faster
• Should I always use this library? It depends…

34. Let’s try!
Demo…

35. 3. Re-factor
components design

36. 4. Pure function

37. 5. Memoization
npm i memo-decorator —-save

38. 6. ngFor trackBy

39. ngFor trackBy
<li class="list-group-item d-flex”
*ngFor="let item of data; trackBy: trackByFn">
trackByFn(index, item) {
return index;
}

40. 6. Use rxjs
operators

41. distinctUntilChanged, debounceTime
inputEvent: Subject<string> = new Subject<string>();
ngOnInit(): void {
this.inputEvent.pipe(
distinctUntilChanged(),
debounceTime(300)).subscribe((res: any) => {
if (res.keyCode === 13) {
this.add.emit(this.label);
this.label = '';
}
});
}
handleKey(event: any) {
this.inputEvent.next(event);
}

42. Share
this.http.get<any>('url...').pipe(share());

43. withLatestFrom

44. Buffer

45. 7. Forms updateOn
<input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }">
firstname: new FormControl('', {
validators: Validators.required,
updateOn: 'submit'
})

46. 8. Control the
change detection
constructor(private changeDetectorRef: ChangeDetectorRef) { }
onInit() {
this.changeDetectorRef.detach();
}
onClick() {
this.changeDetectorRef.detectChanges();
}

47. Thank You