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
90
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
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.8k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
580
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
670
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
610
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
890
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
110
NPOでのDevinの活用
codeforeveryone
0
720
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
260
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
2.4k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
470
Featured
See All Featured
Code Review Best Practice
trishagee
69
18k
A Modern Web Designer's Workflow
chriscoyier
694
190k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
What's in a price? How to price your products and services
michaelherold
246
12k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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