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

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

October 11, 2017
Tweet

Transcript

  1. Through the Sound Barrier High-Performance Applications with Angular Manfred Steyer

    SOFTWAREarchitekt.at
  2. About me… • Manfred Steyer • SOFTWAREarchitekt.at • Trainer &

    Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
  3. Turbo Button

  4. Quick Wins Bundling Minification enableProdMode()

  5. Contents • Lazy Loading and Preloading • Performance for Data

    Binding with OnPush • AOT and Tree Shaking • Caching with Service Worker • Server Side Rendering
  6. Lazy Loading

  7. Module Struktur Page ▪ 8 AppModule … … … SharedModule

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

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

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

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

    Better startup performance • Delay during execution for loading on demand
  12. Preloading

  13. Idea • Module that might be needed later are loaded

    after the application started • When module is needed it is available immediately Page ▪ 14
  14. Activate Preloading Page ▪ 15 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,

    { preloadingStrategy: PreloadAllModules });
  15. Performance- Tuning with OnPush

  16. DEMO

  17. OnPush flights flight flight {{ flight.id }} {{ flight.id }}

    FlightSearch Card Card Angular just checks when “notified”
  18. Activate OnPush @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class FlightCard

    { […] @Input() flight; }
  19. "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
  20. Change Inputs flights flight flight {{ flight.id }} {{ flight.id

    }} FlightSearch Card Card flightold === flightnew
  21. Observables and OnPush <flight-card [item]="flights$ | async" […]> </flight-card>

  22. DEMO

  23. Not „all or nothing“ • You can use OnPush just

    for selected components • Using it compleatly: Redux • @ngrx/store
  24. Ahead of Time (AOT) Compilation

  25. Angular Compiler HTML Template JavaScript Template Compiler

  26. Approaches • JIT: Just in Time, at runtime • AOT:

    Ahead of Time, during build
  27. 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
  28. Angular CLI • ng build --prod • @ngtools/webpack with AotPlugin

    • Can be used without CLI too
  29. DEMO

  30. Tree Shaking

  31. 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
  32. None
  33. Caching with Service Worker

  34. What are Service Workers? • Background Tasks • Web App

    installs them • Are activated and deactivated on demand
  35. 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.
  36. None
  37. Service Worker with Workbox (sw.js) importScripts('./assets/workbox-sw.js'); const workboxSW = new

    WorkboxSW();
  38. 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();
  39. 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);
  40. DEMO

  41. Server Side Rendering

  42. Why Server Side Rendering? Prerender 1st Page Start up performance

    Consumer
  43. renderModuleFactory […] renderModuleFactory(moduleFactory, { document: indexFileContentsAsString, url: options.req.url }) .then(string

    => { […] }); […] Available since Angular 4.0
  44. DEMO

  45. Challenges Other conditions Separate Services for Server and Client-Seite Renderer

    abstracts DOM 3rd parts libs Angular 5: Server Side DOM Simulation (partly)
  46. More about this • https://medium.com/@ManfredSteyer/angular-performance-tuning- article-series-6e3c33707b25

  47. 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
  48. Contact [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer