My slides from Negev Web Dev meetup @ 12.5.19 about Improve runtime performance in Angular applications.

1. Improve runtime
performance

2. About mySelf
• Experienced FE developer, specialised in B2C applications
• FE trainer & lecturer @ 500Tech
• Angular-IL & AngularUP conf CO-organiser

3. Building powerful Angular
community

5. 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…

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

8. Tools to measure
Performance

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

10. 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() {});

11. 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

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

13. Page Load
Optimisations

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

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

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

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

18. 2. Pre xhr requests

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

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

21. 3. Service Workers

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

23. Service workers
Fast Work offline Installable
Integrated Engaging

24. Service workers
Fast Work offline Installable
Integrated Engaging

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

26. 4. Angular Ivy

27. Why Ivy?
• Designed for mobile applications
• Our JS files are the costliest resource on the
page —> main goal: reduce the bundle!
• Easier to debug
• Faster Compilation
• Easier dynamic component loading

28. Caching with service workers
app.component.html
app.component.scss
app.component.ts

29. Caching with service workers
app.component.html
app.component.scss
app.component.ts
app.component.js
app.component.ngfactory.js

30. How does it works?
• The factory became a static method inside the
component def

31. How does it works?
<div>
<span>{{ title }}</span>
<child-cmp *ngIf="show">
</child-cmp>
</div>

32. How does it works? - View Engine
function View_RootCmp_0(_l) {
return ng.ɵvid(0, [
(_l()(), ng.ɵeld(0, 0, null, null, 4, "div", [], null, null, null, null, null)),
(_l()(), ng.ɵeld(1, 0, null, null, 1, "span", [], null, null, null, null, null)),
(_l()(), ng.ɵted(2, null, ["", ""])),
(_l()(), ng.ɵand(16777216, null, null, 1, null, View_RootCmp_1)),
ng.ɵdid(4, 16384, null, 0, ng.NgIf, [ng.ViewContainerRef, ng.TemplateRef], {
ngIf:
[0, "ngIf"]
}, null)
], ...);
}

33. How does it works? - Ivy
function RootCmp_Template(rf, ctx) {
if (rf & 1) {
ng.ɵelementStart(0, "div");
ng.ɵelementStart(1, "span");
ng.ɵtext(2);
ng.ɵelementEnd();
ng.ɵtemplate(3, RootCmp_child_cmp_Template_3,
1, 0, null, [1, "ngIf"]);
ng.ɵelementEnd();
} if (rf & 2) {
ng.ɵtextBinding(2, ng.ɵinterpolation1("",
ctx.title, ""));
ng.ɵelementProperty(3, "ngIf",
ng.ɵbind(ctx.show));
}

34. Runtime
Optimisations

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

36. Fibonacci
remember?

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

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

39. Demo…

40. 1. onPush
changeDetectionstrategy

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

42. And How does it work?

43. And How does it work?
Event!

44. And How does it work?
CD
CD CD
CDCDCDCD

45. And How does it work?
onPush

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

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

48. Let’s try!
Demo…

49. 3. Re-factor
components design

50. 4. Pure function

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

52. 6. ngFor trackBy

53. ngFor trackBy
<li class="list-group-item d-flex”
*ngFor="let item of data; trackBy: trackByFn">
trackByFn(index, item) {
return index;
}
https://stackblitz.com/edit/tackbyfn?file=src/app/app.component.html

54. 7.Virtual Scroll

55. Virtual Scroll
<cdk-virtual-scroll-viewport itemSize="150" style="height:500px">
<div *cdkVirtualFor="let number of numbers" class="item">
{{number}}
</div>
</cdk-virtual-scroll-viewport>
https://stackblitz.com/edit/angular-9ff9uf

56. 8. Use rxjs
operators

57. 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);
}

58. Share
this.http.get<any>(‘url...').pipe(shareReplay());

59. Buffer

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

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

62. 11. Angular CLI -
differential polyfill loading
<body>
<app-root></app-root>
<script src="runtime-es2015.7c2c8ed53c732cae9756.js" type="module"></script>
<script src="polyfills-es2015.a5b21dbc6ea3fed110bd.js" type="module"></script>
<script src="runtime-es5.f8b20787b3edb94bf0b5.js" nomodule></script>
<script src="polyfills-es5.096f1b0cb0bd53082e15.js" nomodule></script>
<script src="main-es2015.1f1157a6c4cf96e4f864.js" type="module"></script>
<script src="main-es5.7081247ed08935ed8a0c.js" nomodule></script>
</body>

63. Thank You
@EliranEliassy eliran.eliassy@gmail.comeliraneliassy