how to tweak angular 2 performance (javascript frameworks day 2017 kiev)
TRANSCRIPT
![Page 1: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/1.jpg)
![Page 2: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/2.jpg)
12822 April 2017 2
![Page 3: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/3.jpg)
What is 128 hours
• 3 working weeks and 1 day.• 4 / 5 of your yearly vacation plan.• Some money.• Put your option here.
22 April 2017 3
![Page 4: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/4.jpg)
Agenda
• Why does performance matter?• Why do we need to tweak Angular 2?• Problems we need to solve• Solutions• Conclusions
22 April 2017 4
![Page 5: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/5.jpg)
What can we improve?
• Bundle size• Application performance
22 April 2017 5
![Page 6: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/6.jpg)
Infrastructure Improvements
22 April 2017 6
![Page 7: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/7.jpg)
Bundle size: problem
22 April 2017 7
Not optimized FE 2752kb
Images Fonts HTML Scripts CSS
![Page 8: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/8.jpg)
Bundle size: problem
22 April 2017 8
Optimized FE 822 kb
Images Fonts HTML Scripts CSS
![Page 9: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/9.jpg)
Bundle size: problem
22 April 2017 9
0 50 100 150 200 250 300 350 400
2.5 Mb
1.5 Mb
0.5Mb
Loading time
56,6 kbit/s 1 Mbit/s 5 Mbit/s 50 Mbit/s
![Page 10: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/10.jpg)
Ok. Why does it matter?80% of internet users own a smartphone. (Smart Insights)
22 April 2017 10
![Page 11: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/11.jpg)
…Over 50% of smartphone users grab their smartphone immediately after waking up. (ExpressPigeon, 2014)
22 April 2017 11
![Page 12: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/12.jpg)
…Google says 61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead. (MicKinsey & Company)
22 April 2017 12
![Page 13: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/13.jpg)
Ok. Why does it matter?
![Page 14: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/14.jpg)
How can we reduce the bundle size?
• Compress pictures• Minify styles, templates and scripts• Remove useless code
22 April 2017 14
![Page 15: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/15.jpg)
Handling images
• gulp-image-optimization• gulp-image• gulp-imagemin• image-webpack-loader…
22 April 2017 15
![Page 16: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/16.jpg)
Handling styles
• A variety of Webpack loaders• Angular CLI supports it by design
22 April 2017 16
![Page 17: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/17.jpg)
Handling scripts
• A variety of Webpack loaders• Angular CLI supports it by design• … it is still huge. So we need to remove useless code.
22 April 2017 17
![Page 18: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/18.jpg)
Tree Shaking
22 April 2017 18
0 500 1000 1500 2000 2500
Application 1
Application 2
Optimization Results
Before Tree Shaking, Kb With Tree Shaking, Kb
![Page 19: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/19.jpg)
22 April 2017
Tree Shaking
- Webpack marks useless code- UglifyJsPlugin removes the code
![Page 20: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/20.jpg)
How does tree shaking work?
22 April 2017 20
![Page 21: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/21.jpg)
How does tree shaking work?
22 April 2017 21
![Page 22: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/22.jpg)
How does tree shaking work?
22 April 2017 22
![Page 23: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/23.jpg)
Tree Shaking
• For the moment Angular CLI has problems with tree shaking.
• Use the latest version of Angular CLI. • You need TypeScript 2 and WebPack 2.
22 April 2017 23
![Page 24: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/24.jpg)
Compilation
22 April 2017 24
![Page 25: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/25.jpg)
Compilation
• Just In Time Compilation (JIT)• Ahead Of Time Compilation (AOT)
22 April 2017 25
![Page 26: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/26.jpg)
What is JIT?
• Compiles in the browser.• No need to build after changes.• Default compiler in Angular 2 CLI.
22 April 2017 26
![Page 27: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/27.jpg)
Why is AOT better?
• You don’t need to load compiler anymore.• Faster loading.• Better runtime performance.• AOT is more secure, because JIT uses eval.
22 April 2017 27
![Page 28: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/28.jpg)
AST (Abstract Syntax Tree)
22 April 2017 28
Script
Container
Members Decorators
Container
Members Decorators
Container
Members Decorators
![Page 29: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/29.jpg)
AOT (Ahead Of Time Compilation)
22 April 2017 29
0 0.5 1 1.5 2 2.5 3
Bundle size, mb
Angular CLI default project size
Compression, tree shaking and AOT
Compression with Tree Shaking
Raw
![Page 30: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/30.jpg)
What can we improve?
• Bundle size• Application performance
22 April 2017 30
![Page 31: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/31.jpg)
Architecture Improvements
22 April 2017 31
![Page 32: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/32.jpg)
Does architecture matter on Frontend?
22 April 2017 32
![Page 33: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/33.jpg)
What we can achieve with good architecture?
• Better application performance• Fewer API requests (app drives faster)• Faster loading speed
22 April 2017 33
![Page 34: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/34.jpg)
What architecture features are we talking about?
• Make sure we’re using events efficiently.• Make sure our data layer uses data efficiently.• Control assets loading process.• Organize correct components composition.• Reduce DOM overhead.
22 April 2017 34
![Page 35: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/35.jpg)
What to do with events?
• Use correct lifecycle hooks in the app.• Be careful with your own events and use destructors.• Avoid duplication of events.• Avoid creation of useless events.
22 April 2017 35
![Page 36: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/36.jpg)
What can we do with a data layer?
• Store static data in the browser. (Caching)• Use pure REST API (With HATEOAS)• Use debouncing. Really.• Background services.
22 April 2017 36
![Page 37: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/37.jpg)
HATEAOS
22 April 2017 37
![Page 38: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/38.jpg)
22 April 2017
ReactiveX (Rx.js)
• One more way to organize the asynchronous actions using JavaScript
• Leads to a new way of the components’ composition.
![Page 39: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/39.jpg)
Problem: XHR Overhead
22 April 2017 39
![Page 40: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/40.jpg)
Rx.js + A2
PROS- Allows us to remove HTTP logic from the components.- Very easy to use with the ‘async’ pipe.
CONS- Leads to a new way of the components’ composition.- It isn’t a fastest solution.
22 April 2017 40
![Page 41: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/41.jpg)
What can we do with component’s composition?
22 April 2017 41
![Page 42: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/42.jpg)
Components Composition
22 April 2017 42
![Page 43: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/43.jpg)
Problem: Memory Leaks
22 April 2017 43
![Page 44: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/44.jpg)
Solution: Zone.js, ngZones, Data Composition
• Dying zone will remove the subscriptions for local streams, but won’t do it to current ones in service, upper-level components.
• Use ngOnDestroy lifecycle hook for removing such subscriptions.
22 April 2017 44
![Page 45: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/45.jpg)
Zone.js, ngZones, Data Composition
22 April 2017 H T T P S : / / G I T H U B . C O M / A N G U L A R / Z O N E . J S / 45
![Page 46: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/46.jpg)
Problem: Binding Overhead
• A simple rule: don’t use two-way binding when you don’t need it.
• ‘Singular’ binding isn’t shipped out of the box, but there are several ways to implement it.
22 April 2017 46
![Page 47: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/47.jpg)
22 April 2017
Binding
One-directional «inside»:• {{expression}}• [target] = "expression"• bind-target = "expression"
![Page 48: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/48.jpg)
One-directional «inside»:
22 April 2017 48
![Page 49: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/49.jpg)
22 April 2017
Binding
One-directional «outside»:• (target) = "statement"• on-target = "statement"
![Page 50: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/50.jpg)
One-directional «outside»:
22 April 2017 50
![Page 51: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/51.jpg)
22 April 2017
Binding
Two-directional:• [(target)] = "expression"• bindon-target = "expression"
![Page 52: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/52.jpg)
Two-directional:
22 April 2017 52
![Page 53: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/53.jpg)
Problem: army of listeners
22 April 2017 53
![Page 54: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/54.jpg)
Solution: Change Detection Strategies
• OnPush• Default
22 April 2017 54
![Page 55: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/55.jpg)
Change Detection Strategies
22 April 2017 55
![Page 56: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/56.jpg)
What to with the DOM?
• Remove and add the elements back instead of hiding / displaying.
• Don’t call DOM directly if it’s possible.• When it isn’t possible use ElementRef,
@ViewChild/@ViewChildren.
22 April 2017 56
![Page 57: How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)](https://reader034.vdocuments.mx/reader034/viewer/2022052606/5a64b1f57f8b9ac21c8b4773/html5/thumbnails/57.jpg)
THANKS!
22 April 2017 57