Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Data Binding Performance with OnPush, Immutables and Observables

Angular Data Binding Performance with OnPush, Immutables and Observables

Manfred Steyer

November 24, 2016
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer

    & Consultant • Focus: Angular • Google Developer Expert Page  2 Manfred Steyer
  2. Contents • How databinding works • How to improve performance

    with OnPush? • OnPush and Immutables • OnPush and Observables
  3. Data-Binding in AngularJS 1.x Page  6 Model Model Directive

    Nearly everything can depend on everything Solution: Multiple Digest-Cycles
  4. 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)
  5. 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
  6. Property-Binding Page  9 model item item {{ item.title }}

    {{ item.title }} [http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]
  7. Event-Bindings (One-Way, Bottom/Up) • No Digest for propagating events •

    But: Events can change state  Digest for updating Property-Bindings Page  11
  8. Property- and Event-Bindings Page  12 Performing Property-Binding Executing Event-Handlers

    Event occurs App is ready All Handlers executed Properties bound
  9. View Page  14 <button (click)="search()" [disabled]="!from || !to"> <table>

    <tr *ngFor="let flight of flights"> <td>{{flight.id}}</td> <td>{{flight.date}}</td> <td>{{flight.from}}</td> <td>{{flight.to}}</td> <td><a href="#" (click)="selectFlight(flight)">Select</a></td> </tr> </table> <td [text-content]="flight.id"></td>
  10. Two Way = Property and Event Bindings Page  22

    <input [ngModel]="from" (ngModelChange)="from = $event"> Property + Change changed value
  11. Angular traverses the whole tree by default flights flight flight

    {{ flight.id }} {{ flight.id }} FlightSearch Card Card
  12. OnPush flights flight flight {{ flight.id }} {{ flight.id }}

    FlightSearch Card Card Only checked when “notified”
  13. How to “notify” about a change • Change Input •

    Use Observable to trigger “an event”
  14. Change Input flights flight flight {{ flight.id }} {{ flight.id

    }} FlightSearch Card Card flightold == flightnew
  15. 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)
  16. 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
  17. 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;
  18. 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
  19. Immutables and Angular flights flight flight {{ flight.id }} {{

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

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

    flight.id }} {{ flight.id }} FlightSearch Card Change Card
  22. 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