Microarchitecture using Angular 4 as an example

Kirill Gusyatin, JS developer at eKreative

Transcript

1. Microarchitecture using Angular 4 as an example
2. Hello! I am Kirill Gusyatin You can find me at kirill.gus@gmail.com
3. Based on Pascal Precht’s thoughts
4. Microarchitecture Where does this start?
6. MICROARCHITECTURE MICROARCHITECTURE EVERYWHERE
7. Why?
8. “ Microarchitecture is an architecture of microelement
9. Angular framework Let’s have an example with 4200 d’n’d boxes
10. app.component.html
11. App.component.ts (1/2)
12. App.component.ts (2/2)
13. box.component.ts
14. box.component.html
15. Measure performance
17. Initial results Max Min 1 28ms 19ms 2 30ms 21ms 3 25ms 17ms
18. Let’s do it faster
19. Our process is easy ChangeDetectionStrategy.OnPush Detach change detectors “Simple” NgFor
20. ChangeDetectionStrategy.OnPush Use Angular’s OnPush change detection strategy to save view bindings per change detection task
22. box.component.ts
23. app.component.ts
24. ChangeDetectionStrategy.OnPush Max Min 1 15ms 13ms 2 18ms 13ms 3 16ms 14ms
25. “Simple” NgFor Angular’s NgFor directive is sometimes a little bit too smart. A simpler version of it could be faster
26. app.component.html
27. “Simple” NgFor Max Min 1 16ms 11ms 2 15ms 9ms 3 18ms 10ms
28. Detach change detectors Another option is to detach all change detectors from the tree and only perform change detection for the components that is actually changing
29. app.component.ts
30. box.component.ts
31. box.component.ts
32. app.component.ts
33. box.component.ts
34. Detach change detectors Max Min 1 0.52ms 0.059ms 2 0.83ms 0.064ms 3 0.47ms 0.040ms
35. General (medians) Max Min Initial code 28ms 19ms ChangeDetectionStrategy.OnPush 16ms 13ms “Simple” NgFor 16ms 10ms Detach change detectors 0.606ms 0.054ms
36. Thanks! Any questions? You can find me at kirill.gus@gmail.com & github.com/kikill95
37. Worth to read ◍ https://goo.gl/MMW0Pe ◍ https://goo.gl/Gz0PqC