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

Performance Tuning with Angular

Performance Tuning with Angular

Slides from my talk at Angular Berlin, Oct 2018

Manfred Steyer

October 11, 2017
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 (GDE) Page ▪ 2 Manfred Steyer
  2. Contents • Lazy Loading and Preloading • Performance for Data

    Binding with OnPush • AOT and Tree Shaking • Caching with Service Worker • Server Side Rendering
  3. Module Struktur Page ▪ 8 AppModule … … … SharedModule

    Root Module Feature Modules Shared Module
  4. Lazy Loading Page ▪ 9 AppModule … … … SharedModule

    Root Module Feature Modules Shared Module
  5. Root Module with Lazy Loading Page ▪ 10 const APP_ROUTE_CONFIG:

    Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
  6. Routes for Feature Modules Page ▪ 11 const FLIGHT_ROUTES =

    [ { path: '', component: FlightBookingComponent, […] }, […] }
  7. Lazy Loading • Lazy Loading means: Loading it later •

    Better startup performance • Delay during execution for loading on demand
  8. Idea • Module that might be needed later are loaded

    after the application started • When module is needed it is available immediately Page ▪ 14
  9. OnPush flights flight flight {{ flight.id }} {{ flight.id }}

    FlightSearch Card Card Angular just checks when “notified”
  10. "Notify" about change? • Change bound data (@Input) • Angular

    compares just the object reference! • Raise Event within the component • Notify a bound observable • Trigger it manually
  11. Change Inputs flights flight flight {{ flight.id }} {{ flight.id

    }} FlightSearch Card Card flightold === flightnew
  12. Not „all or nothing“ • You can use OnPush just

    for selected components • Using it compleatly: Redux • @ngrx/store
  13. Advantages of AOT • Better Startup-Performance • Smaller Bundles: You

    don't need to include the compiler! • Tools can easier analyse the code • Remove not needed parts of frameworks • Tree Shaking
  14. Challenges • Most tree shaking tools are conservative • They

    just remove code when they are 100% sure • Very often, they aren't sure :-) • Solution: Angular Build Optimizer • Rewrites compiled code • Currently: Experimental
  15. What are Service Workers? • Background Tasks • Web App

    installs them • Are activated and deactivated on demand
  16. Service Worker und Caching/ Offline • Intercept requests • Decide

    how to respond (Cache, Network) • Same Origin Policy • Caching Patterns • Cache only • Network only • Try cache first, then network • Try network first, then cache • etc.
  17. Service Worker with Workbox (sw.js) importScripts('./assets/workbox-sw.js'); const workboxSW = new

    WorkboxSW(); const networkFirst = workboxSW.strategies.networkFirst(); const cacheFirst = workboxSW.strategies.cacheFirst();
  18. Service Worker with Workbox (sw.js) importScripts('./assets/workbox-sw.js'); const workboxSW = new

    WorkboxSW(); const networkFirst = workboxSW.strategies.networkFirst(); const cacheFirst = workboxSW.strategies.cacheFirst(); workboxSW.router.registerRoute( new RegExp('^http:\/\/www.angular.at\/api\/'), networkFirst); workboxSW.router.registerRoute(/./, cacheFirst);
  19. Challenges Other conditions Separate Services for Server and Client-Seite Renderer

    abstracts DOM 3rd parts libs Angular 5: Server Side DOM Simulation (partly)
  20. Conclusion Quick Wins Lazy Loading and Preloading AOT and Tree

    Shaking Caching w/ Service Worker OnPush w/ Immutables and Observables Consumer- Apps: Server Side Rendering