Upload
oleksandr-tryshchenko
View
546
Download
1
Embed Size (px)
Citation preview
HOW TO IMPROVE ANGULAR 2 PERFORMANCE?
Oleksandr TryshchenkoSenior Front-end Developer, DataArttryshchenko.com
HOW TO IMPROVE ANGULAR 2 4 PERFORMANCE?
Oleksandr TryshchenkoSenior Front-end Developer, DataArttryshchenko.com
128
What is 128 hours
• 3 working weeks and 1 day.• 4 / 5 of your yearly vacation plan.• Some money.• Put your option here.
26 April 2017 6
Agenda
• Why does performance matter?• Why do we need to tweak Angular 2?• Problems we need to solve• Solutions• Conclusions
26 April 2017 7
What can we improve?
• Bundle size• Application performance
26 April 2017 8
Infrastructure Improvements
26 April 2017 9
Bundle size: problem
26 April 2017 10
Not optimized FE 2752kb
Images Fonts HTML Scripts CSS
Bundle size: problem
26 April 2017 11
Optimized FE 822 kb
Images Fonts HTML Scripts CSS
Bundle size: problem
26 April 2017 12
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
Ok. Why does it matter?80% of internet users own a smartphone. (Smart Insights)
26 April 2017 13
…Over 50% of smartphone users grab their smartphone immediately after waking up. (ExpressPigeon, 2014)
26 April 2017 14
…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)
26 April 2017 15
Ok. Why does it matter?
How can we reduce the bundle size?
• Compress pictures• Minify styles, templates and scripts• Remove useless code
26 April 2017 17
Handling images
• gulp-image-optimization• gulp-image• gulp-imagemin• image-webpack-loader…
26 April 2017 18
Handling styles
• A variety of Webpack loaders• Angular CLI supports it by design
26 April 2017 19
Handling scripts
• A variety of Webpack loaders• Angular CLI supports it by design• … it is still huge. So we need to remove useless code.
26 April 2017 20
Tree Shaking
26 April 2017 21
0 500 1000 1500 2000 2500
Application 1
Application 2
Optimization Results
Before Tree Shaking, Kb With Tree Shaking, Kb
26 April 2017 22
🎄👋
26 April 2017
Tree Shaking
- Webpack marks useless code- UglifyJsPlugin removes the code
How does tree shaking work?
26 April 2017 24
How does tree shaking work?
26 April 2017 25
How does tree shaking work?
26 April 2017 26
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.
26 April 2017 27
Compilation
26 April 2017 28
Compilation
• Just In Time Compilation (JIT)• Ahead Of Time Compilation (AOT)
26 April 2017 29
What is JIT?
• Compiles in the browser.• No need to build after changes.• Default compiler in Angular 2 CLI.
26 April 2017 30
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.
26 April 2017 31
AST (Abstract Syntax Tree)
26 April 2017 32
Script
Container
Members Decorators
Container
Members Decorators
Container
Members Decorators
AOT (Ahead Of Time Compilation)
26 April 2017 33
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
What can we improve?
• Bundle size• Application performance
26 April 2017 35
Architecture Improvements
26 April 2017 36
Does architecture matter on Frontend?
26 April 2017 37
What we can achieve with good architecture?
• Better application performance• Fewer API requests (app drives faster)• Faster loading speed
26 April 2017 38
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.
26 April 2017 39
Problem: Army Of Listeners
26 April 2017 40
Solution: Change Detection Strategies
• OnPush• Default
26 April 2017 41
Change Detection Strategies
26 April 2017 43
Immutable ☺
26 April 2017 45
Mutable 🙁
26 April 2017 46
I wanna more!
26 April 2017 H T T P : / / W W W . J V A N D E M O . C O M / H O W - I - O P T I M I Z E D - M I N E S W E E P E R -U S I N G - A N G U L A R - 2 - A N D - I M M U T A B L E - J S - T O - M A K E - I T - I N S A N E L Y - F A S T /
47
HOW I OPTIMIZED MINESWEEPER USING ANGULAR 2 AND IMMUTABLE.JS TO MAKE IT INSANELY FAST
JURGEN VAN DE MOERE
Immutable.js
26 April 2017 48
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.
26 April 2017 49
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.
26 April 2017 51
HATEAOS
26 April 2017 52
Why HATEOS?
• You don’t need to handle user roles on Front-End anymore. At all.
• Server does it anyway during request/response cycle.
26 April 2017 53
26 April 2017
ReactiveX (Rx.js)
• One more way to organize the asynchronous actions using JavaScript
• Leads to a new way of the components’ composition.
Problem: XHR Overhead
26 April 2017 55
Rx.js + A2
PROS- Allows us to remove HTTP logic from the components.- Absolutely simple
CONS- Leads to a new way of the components’ composition.- It isn’t a fastest solution.
26 April 2017 56
What Can We Do With Component’s Composition?
26 April 2017 57
Components Composition
26 April 2017 58
Problem: Memory Leaks
26 April 2017 59
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.
26 April 2017 60
Zone.js, ngZones, Data Composition
26 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 / 61
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.
26 April 2017 62
One-directional «inside»:
26 April 2017 63
One-directional «outside»:
26 April 2017 64
Two-directional:
26 April 2017 65
Problem: DOM
• Don’t use DOM 🙁
26 April 2017 F O O T E R H E R E 66
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.
26 April 2017 67
THANKS!
26 April 2017 68