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
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
410
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
3
420
Discover Metal 4
rei315
2
120
Porting a visionOS App to Android XR
akkeylab
0
290
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
140
XP, Testing and ninja testing
m_seki
3
230
WindowInsetsだってテストしたい
ryunen344
1
240
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
660
C++20 射影変換
faithandbrave
0
570
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Thoughts on Productivity
jonyablonski
69
4.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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