how to tweak angular 2 performance (javascript frameworks day 2017 kiev)

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