How To Tweak Angular 2 Performance

68

Transcript of How To Tweak Angular 2 Performance

Page 1: How To Tweak Angular 2 Performance
Page 2: How To Tweak Angular 2 Performance
Page 3: How To Tweak Angular 2 Performance

HOW TO IMPROVE ANGULAR 2 PERFORMANCE?

Oleksandr TryshchenkoSenior Front-end Developer, DataArttryshchenko.com

Page 4: How To Tweak Angular 2 Performance

HOW TO IMPROVE ANGULAR 2 4 PERFORMANCE?

Oleksandr TryshchenkoSenior Front-end Developer, DataArttryshchenko.com

Page 5: How To Tweak Angular 2 Performance

128

Page 6: How To Tweak Angular 2 Performance

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

Page 7: How To Tweak Angular 2 Performance

Agenda

• Why does performance matter?• Why do we need to tweak Angular 2?• Problems we need to solve• Solutions• Conclusions

26 April 2017 7

Page 8: How To Tweak Angular 2 Performance

What can we improve?

• Bundle size• Application performance

26 April 2017 8

Page 9: How To Tweak Angular 2 Performance

Infrastructure Improvements

26 April 2017 9

Page 10: How To Tweak Angular 2 Performance

Bundle size: problem

26 April 2017 10

Not optimized FE 2752kb

Images Fonts HTML Scripts CSS

Page 11: How To Tweak Angular 2 Performance

Bundle size: problem

26 April 2017 11

Optimized FE 822 kb

Images Fonts HTML Scripts CSS

Page 12: How To Tweak Angular 2 Performance

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

Page 13: How To Tweak Angular 2 Performance

Ok. Why does it matter?80% of internet users own a smartphone. (Smart Insights)

26 April 2017 13

Page 14: How To Tweak Angular 2 Performance

…Over 50% of smartphone users grab their smartphone immediately after waking up. (ExpressPigeon, 2014)

26 April 2017 14

Page 15: How To Tweak Angular 2 Performance

…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

Page 16: How To Tweak Angular 2 Performance

Ok. Why does it matter?

Page 17: How To Tweak Angular 2 Performance

How can we reduce the bundle size?

• Compress pictures• Minify styles, templates and scripts• Remove useless code

26 April 2017 17

Page 18: How To Tweak Angular 2 Performance

Handling images

• gulp-image-optimization• gulp-image• gulp-imagemin• image-webpack-loader…

26 April 2017 18

Page 19: How To Tweak Angular 2 Performance

Handling styles

• A variety of Webpack loaders• Angular CLI supports it by design

26 April 2017 19

Page 20: How To Tweak Angular 2 Performance

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

Page 21: How To Tweak Angular 2 Performance

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

Page 22: How To Tweak Angular 2 Performance

26 April 2017 22

🎄👋

Page 23: How To Tweak Angular 2 Performance

26 April 2017

Tree Shaking

- Webpack marks useless code- UglifyJsPlugin removes the code

Page 24: How To Tweak Angular 2 Performance

How does tree shaking work?

26 April 2017 24

Page 25: How To Tweak Angular 2 Performance

How does tree shaking work?

26 April 2017 25

Page 26: How To Tweak Angular 2 Performance

How does tree shaking work?

26 April 2017 26

Page 27: How To Tweak Angular 2 Performance

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

Page 28: How To Tweak Angular 2 Performance

Compilation

26 April 2017 28

Page 29: How To Tweak Angular 2 Performance

Compilation

• Just In Time Compilation (JIT)• Ahead Of Time Compilation (AOT)

26 April 2017 29

Page 30: How To Tweak Angular 2 Performance

What is JIT?

• Compiles in the browser.• No need to build after changes.• Default compiler in Angular 2 CLI.

26 April 2017 30

Page 31: How To Tweak Angular 2 Performance

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

Page 32: How To Tweak Angular 2 Performance

AST (Abstract Syntax Tree)

26 April 2017 32

Script

Container

Members Decorators

Container

Members Decorators

Container

Members Decorators

Page 33: How To Tweak Angular 2 Performance

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

Page 34: How To Tweak Angular 2 Performance
Page 35: How To Tweak Angular 2 Performance

What can we improve?

• Bundle size• Application performance

26 April 2017 35

Page 36: How To Tweak Angular 2 Performance

Architecture Improvements

26 April 2017 36

Page 37: How To Tweak Angular 2 Performance

Does architecture matter on Frontend?

26 April 2017 37

Page 38: How To Tweak Angular 2 Performance

What we can achieve with good architecture?

• Better application performance• Fewer API requests (app drives faster)• Faster loading speed

26 April 2017 38

Page 39: How To Tweak Angular 2 Performance

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

Page 40: How To Tweak Angular 2 Performance

Problem: Army Of Listeners

26 April 2017 40

Page 41: How To Tweak Angular 2 Performance

Solution: Change Detection Strategies

• OnPush• Default

26 April 2017 41

Page 42: How To Tweak Angular 2 Performance
Page 43: How To Tweak Angular 2 Performance

Change Detection Strategies

26 April 2017 43

Page 44: How To Tweak Angular 2 Performance
Page 45: How To Tweak Angular 2 Performance

Immutable ☺

26 April 2017 45

Page 46: How To Tweak Angular 2 Performance

Mutable 🙁

26 April 2017 46

Page 47: How To Tweak Angular 2 Performance

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

Page 48: How To Tweak Angular 2 Performance

Immutable.js

26 April 2017 48

Page 49: How To Tweak Angular 2 Performance

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

Page 50: How To Tweak Angular 2 Performance
Page 51: How To Tweak Angular 2 Performance

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

Page 52: How To Tweak Angular 2 Performance

HATEAOS

26 April 2017 52

Page 53: How To Tweak Angular 2 Performance

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

Page 54: How To Tweak Angular 2 Performance

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.

Page 55: How To Tweak Angular 2 Performance

Problem: XHR Overhead

26 April 2017 55

Page 56: How To Tweak Angular 2 Performance

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

Page 57: How To Tweak Angular 2 Performance

What Can We Do With Component’s Composition?

26 April 2017 57

Page 58: How To Tweak Angular 2 Performance

Components Composition

26 April 2017 58

Page 59: How To Tweak Angular 2 Performance

Problem: Memory Leaks

26 April 2017 59

Page 60: How To Tweak Angular 2 Performance

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

Page 61: How To Tweak Angular 2 Performance

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

Page 62: How To Tweak Angular 2 Performance

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

Page 63: How To Tweak Angular 2 Performance

One-directional «inside»:

26 April 2017 63

Page 64: How To Tweak Angular 2 Performance

One-directional «outside»:

26 April 2017 64

Page 65: How To Tweak Angular 2 Performance

Two-directional:

26 April 2017 65

Page 66: How To Tweak Angular 2 Performance

Problem: DOM

• Don’t use DOM 🙁

26 April 2017 F O O T E R H E R E 66

Page 67: How To Tweak Angular 2 Performance

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

Page 68: How To Tweak Angular 2 Performance

THANKS!

26 April 2017 68