Angular Data Binding Performance with OnPush, Immutables and Observables

Slide 1

Slide 1 text

Improving Data Binding Performance with Immutables and Observables Manfred Steyer

Slide 2

Slide 2 text

About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert Page  2 Manfred Steyer

Slide 3

Slide 3 text

Contents • How databinding works • How to improve performance with OnPush? • OnPush and Immutables • OnPush and Observables

Slide 4

Slide 4 text

Bindings in Angular 2 Page  4

Slide 5

Slide 5 text

Data-Binding in AngularJS 1.x Page  6 Model Model Directive Nearly everything can depend on everything Solution: Multiple Digest-Cycles

Slide 6

Slide 6 text

Component-Tree in Angular 2 Page  7 Component for whole App Component (e. g. list) Component (e. g. list-item) Component (e. g. list-item)

Slide 7

Slide 7 text

Rules for Property-Bindings • Data flows top/down • A Component only depends on its parents data • A Component must not depend on its children data! • Dependency Graph is a tree • Angular only needs one iteration („digest“) Page  8

Slide 8

Slide 8 text

Property-Binding Page  9 model item item {{ item.title }} {{ item.title }} [http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]

Slide 9

Slide 9 text

Event-Bindings (One-Way, Bottom/Up) Page  10 {{ item.title }} {{ item.title }} Event-Handler Event-Handler

Slide 10

Slide 10 text

Event-Bindings (One-Way, Bottom/Up) • No Digest for propagating events • But: Events can change state  Digest for updating Property-Bindings Page  11

Slide 11

Slide 11 text

Property- and Event-Bindings Page  12 Performing Property-Binding Executing Event-Handlers Event occurs App is ready All Handlers executed Properties bound

Slide 12

Slide 12 text

Setting up Bindings Page  13

Slide 13

Slide 13 text

View Page  14 {{flight.id}} {{flight.date}} {{flight.from}} {{flight.to}} Select

Slide 14

Slide 14 text

Two Way Binding Page  21

Slide 15

Slide 15 text

Two Way = Property and Event Bindings Page  22 Property + Change changed value

Slide 16

Slide 16 text

Performance-Tuning with OnPush

Slide 17

Slide 17 text

Angular traverses the whole tree by default flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card

Slide 18

Slide 18 text

OnPush flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card Only checked when “notified”

Slide 19

Slide 19 text

Activate OnPush @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class FlightCard { […] @Input() flight; }

Slide 20

Slide 20 text

How to “notify” about a change • Change Input • Use Observable to trigger “an event”

Slide 21

Slide 21 text

Change Input flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card flightold == flightnew

Slide 22

Slide 22 text

Immutables

Slide 23

Slide 23 text

Immutables • Objects that can not change • When represented data changes, they have been replaced by an other immutable • Easy to find out if there was a change • oldObject == newObject • With or without libs (like immutable.js)

Slide 24

Slide 24 text

Immutables const ONE_MINUTE = 1000 * 60; let oldFlights = this.flights; let oldFlight = oldFlights[0]; // Flight to change! let oldFlightDate = new Date(oldFlight.date); // Date to change

Slide 25

Slide 25 text

Immutables let newFlightDate = new Date(oldFlightDate.getTime() + ONE_MINUTE * 15); let newFlight = { id: oldFlight.id, from: oldFlight.from, to: oldFlight.to, date: newFlightDate.toISOString() }; let newFlights = [ newFlight, ...oldFlights.slice(1, this.flights.length) ]; this.flights = newFlights;

Slide 26

Slide 26 text

Checking for Change console.debug("Array: " + (oldFlights == newFlights)); // false console.debug("#0: " + (oldFlights[0] == newFlights[0])); // false console.debug("#1: " + (oldFlights[1] == newFlights[1])); // true

Slide 27

Slide 27 text

Immutables and Angular flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card Change

Slide 28

Slide 28 text

DEMO

Slide 29

Slide 29 text

Observables

Slide 30

Slide 30 text

Observables mit OnPush Page  42 flights flight$ flight$ {{ flight$.id }} {{ flight$.id }} FlightSearch Card Card

Slide 31

Slide 31 text

Observables mit OnPush Page  43 flights$ flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Change Card

Slide 32

Slide 32 text

How to bind to an Observable?

Slide 33

Slide 33 text

DEMO

Slide 34

Slide 34 text

Not "all-or-nothing" • Using Immutables and Obersvables isn't an "all-or-nothing- thing" • You can just use for componentes that need additional performance

Slide 35

Slide 35 text

Summary Property Bindings Event Bindings OnPush Immutables Observables

Slide 36

Slide 36 text

Contact [mail] [email protected] [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer