Upload
oleksandr-tryshchenko
View
132
Download
1
Embed Size (px)
Citation preview
12822 April 2017 2
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
Agenda
• Why does performance matter?• Why do we need to tweak Angular 2?• Problems we need to solve• Solutions• Conclusions
22 April 2017 4
What can we improve?
• Bundle size• Application performance
22 April 2017 5
Infrastructure Improvements
22 April 2017 6
Bundle size: problem
22 April 2017 7
Not optimized FE 2752kb
Images Fonts HTML Scripts CSS
Bundle size: problem
22 April 2017 8
Optimized FE 822 kb
Images Fonts HTML Scripts CSS
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
Ok. Why does it matter?80% of internet users own a smartphone. (Smart Insights)
22 April 2017 10
…Over 50% of smartphone users grab their smartphone immediately after waking up. (ExpressPigeon, 2014)
22 April 2017 11
…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
Ok. Why does it matter?
How can we reduce the bundle size?
• Compress pictures• Minify styles, templates and scripts• Remove useless code
22 April 2017 14
Handling images
• gulp-image-optimization• gulp-image• gulp-imagemin• image-webpack-loader…
22 April 2017 15
Handling styles
• A variety of Webpack loaders• Angular CLI supports it by design
22 April 2017 16
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
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
22 April 2017
Tree Shaking
- Webpack marks useless code- UglifyJsPlugin removes the code
How does tree shaking work?
22 April 2017 20
How does tree shaking work?
22 April 2017 21
How does tree shaking work?
22 April 2017 22
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
Compilation
22 April 2017 24
Compilation
• Just In Time Compilation (JIT)• Ahead Of Time Compilation (AOT)
22 April 2017 25
What is JIT?
• Compiles in the browser.• No need to build after changes.• Default compiler in Angular 2 CLI.
22 April 2017 26
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
AST (Abstract Syntax Tree)
22 April 2017 28
Script
Container
Members Decorators
Container
Members Decorators
Container
Members Decorators
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
What can we improve?
• Bundle size• Application performance
22 April 2017 30
Architecture Improvements
22 April 2017 31
Does architecture matter on Frontend?
22 April 2017 32
What we can achieve with good architecture?
• Better application performance• Fewer API requests (app drives faster)• Faster loading speed
22 April 2017 33
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
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
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
HATEAOS
22 April 2017 37
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.
Problem: XHR Overhead
22 April 2017 39
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
What can we do with component’s composition?
22 April 2017 41
Components Composition
22 April 2017 42
Problem: Memory Leaks
22 April 2017 43
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
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
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
22 April 2017
Binding
One-directional «inside»:• {{expression}}• [target] = "expression"• bind-target = "expression"
One-directional «inside»:
22 April 2017 48
22 April 2017
Binding
One-directional «outside»:• (target) = "statement"• on-target = "statement"
One-directional «outside»:
22 April 2017 50
22 April 2017
Binding
Two-directional:• [(target)] = "expression"• bindon-target = "expression"
Two-directional:
22 April 2017 52
Problem: army of listeners
22 April 2017 53
Solution: Change Detection Strategies
• OnPush• Default
22 April 2017 54
Change Detection Strategies
22 April 2017 55
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
THANKS!
22 April 2017 57