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
180
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
110
Емоції: усвідомлення, прийняття, комунікація
gdgcherkasy
0
62
Kibana Plugin Development - Vlad Bolibruk
gdgcherkasy
0
68
“Why JS is way to go for backend”
gdgcherkasy
0
63
CoreData, custom merge policy
gdgcherkasy
2
1.4k
macOS_for_iOS_devs2.pdf
gdgcherkasy
0
67
MQTT.pdf
gdgcherkasy
1
32
Инструменты Lean Product Management как точки пересечения проектов с "реальностью": хватит клонировать плохие решения!
gdgcherkasy
1
72
Насколько силен Иммунитет вашей организации?
gdgcherkasy
1
90
Other Decks in Programming
See All in Programming
Implementing Design Systems in Swift
seyfoyun
2
530
Next.js App Router
quramy
14
2.3k
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
2
480
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
560
Try creating your own orderedmap
kazamori
1
280
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
170
WinActorの勉強を継続する方法
tamai_63
0
130
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
110
Docker_OSS_ホスティング入門
satokoki645
0
140
Adding Security to Microcontroller Ruby
sylph01
1
160
Deep Dive into React Stream/Serialize
mugi_uno
4
860
TypeScriptから始める VR生活
tamagokakeg
2
110
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Teambox: Starting and Learning
jrom
128
8.4k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
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