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

High-Performance Applications with Angular, GDG Dev Fest in Munich

High-Performance Applications with Angular, GDG Dev Fest in Munich

Talk vom GDG Dev Fest in Munich, November 2017

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

November 26, 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 ▪ 3 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
  6. Lazy Loading

  7. Module Structure Page ▪ 9 AppModule … … … SharedModule

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

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

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

    [ { path: '', component: FlightBookingComponent, […] }, […] }
  11. DEMO

  12. Lazy Loading • Lazy Loading means: Loading it later •

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

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

    after the application started • When module is needed it is available immediately Page ▪ 17
  15. Activate Preloading Page ▪ 18 … imports: [ […] RouterModule.forRoot(

    ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules }); ] …
  16. Performance- Tuning with OnPush

  17. DEMO

  18. OnPush flights flight flight {{ flight.id }} {{ flight.id }}

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

    Angular just compares the object reference! • e. g. oldFlight === newFlight • Raise Event within the component • Notify a bound observable • Trigger it manually • Don't do this at home ;-) • At least: Try to avoid this
  20. Activate OnPush @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class FlightCard

    { […] @Input() flight; }
  21. Change Inputs flights flight flight {{ flight.id }} {{ flight.id

    }} FlightSearch Card Card flightold === flightnew
  22. Observables and OnPush <div *ngFor="let f of fligths$ | async">

    … </div>
  23. DEMO

  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 • Huge improvements w/ Angular 5 and CLI 1.5 b/c of Build Optimizer
  28. Angular CLI • ng build --prod • AngularCompilerPlugin • WebPack-Plugin

    • Can be used without CLI too
  29. DEMO

  30. Sample Application w/ Angular Material

  31. DEMO

  32. More about this in my Medium Account • Configuration Details,

    Samples etc. • https://medium.com/@ManfredSteyer/angular-performance-tuning- article-series-6e3c33707b25
  33. Conclusion Quick Wins Lazy Loading OnPush w/ Immutables and Observables

    AOT and Tree Shaking
  34. Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer