Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Microarchitecture using Angular 4 as an example
Search
GDG Cherkasy
May 29, 2017
Programming
0
190
Microarchitecture using Angular 4 as an example
Kirill Gusyatin, JS developer at eKreative
GDG Cherkasy
May 29, 2017
Tweet
Share
More Decks by GDG Cherkasy
See All by GDG Cherkasy
Трансформація від розробника до ліда: байки та поради.
gdgcherkasy
0
120
Емоції: усвідомлення, прийняття, комунікація
gdgcherkasy
0
91
Kibana Plugin Development - Vlad Bolibruk
gdgcherkasy
0
76
“Why JS is way to go for backend”
gdgcherkasy
0
77
CoreData, custom merge policy
gdgcherkasy
2
1.6k
macOS_for_iOS_devs2.pdf
gdgcherkasy
0
71
MQTT.pdf
gdgcherkasy
1
36
Инструменты Lean Product Management как точки пересечения проектов с "реальностью": хватит клонировать плохие решения!
gdgcherkasy
1
76
Насколько силен Иммунитет вашей организации?
gdgcherkasy
1
100
Other Decks in Programming
See All in Programming
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
AIともっと楽するE2Eテスト
myohei
8
3k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
テスト駆動Kaggle
isax1015
1
620
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
3.8k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Balancing Empowerment & Direction
lara
1
450
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fireside Chat
paigeccino
37
3.5k
The Language of Interfaces
destraynor
158
25k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Transcript
Microarchitecture using Angular 4 as an example
Hello! I am Kirill Gusyatin You can find me at
[email protected]
Based on Pascal Precht’s thoughts
Microarchitecture Where does this start?
None
MICROARCHITECTURE MICROARCHITECTURE EVERYWHERE
Why?
“ Microarchitecture is an architecture of microelement
Angular framework Let’s have an example with 4200 d’n’d boxes
app.component.html
App.component.ts (1/2)
App.component.ts (2/2)
box.component.ts
box.component.html
Measure performance
None
Initial results Max Min 1 28ms 19ms 2 30ms 21ms
3 25ms 17ms
Let’s do it faster
Our process is easy ChangeDetectionStrategy.OnPush Detach change detectors “Simple” NgFor
ChangeDetectionStrategy.OnPush Use Angular’s OnPush change detection strategy to save view
bindings per change detection task
None
box.component.ts
app.component.ts
ChangeDetectionStrategy.OnPush Max Min 1 15ms 13ms 2 18ms 13ms 3
16ms 14ms
“Simple” NgFor Angular’s NgFor directive is sometimes a little bit
too smart. A simpler version of it could be faster
app.component.html
“Simple” NgFor Max Min 1 16ms 11ms 2 15ms 9ms
3 18ms 10ms
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
app.component.ts
box.component.ts
box.component.ts
app.component.ts
box.component.ts
Detach change detectors Max Min 1 0.52ms 0.059ms 2 0.83ms
0.064ms 3 0.47ms 0.040ms
General (medians) Max Min Initial code 28ms 19ms ChangeDetectionStrategy.OnPush 16ms
13ms “Simple” NgFor 16ms 10ms Detach change detectors 0.606ms 0.054ms
Thanks! Any questions? You can find me at
[email protected]
&
github.com/kikill95
Worth to read ◍ https://goo.gl/MMW0Pe ◍ https://goo.gl/Gz0PqC