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

Angular Performance Workshop, ngconf 2018, Salt Lake City

Angular Performance Workshop, ngconf 2018, Salt Lake City

Slides from my Workshop

Manfred Steyer

April 19, 2018
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

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

    & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2
  2. ManfredSteyer Contents • Lazy Loading and Preloading • Performance for

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

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

    SharedModule Root Module Feature Modules Shared Module
  5. ManfredSteyer Root Module with Lazy Loading Page ▪ 10 const

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

    = [ { path: '', component: FlightBookingComponent, […] }, […] }
  7. ManfredSteyer Routes for "lazy" Module Page ▪ 12 const FLIGHT_ROUTES

    = [ { path: 'subroute', component: FlightBookingComponent, […] }, […] } flight-booking/subroute Triggers Lazy Loading w/ loadChildren
  8. ManfredSteyer Lazy Loading • Lazy Loading means: Loading it later

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

    loaded after the application started • When module is needed it is available immediately Page ▪ 17
  10. ManfredSteyer Activate Preloading Page ▪ 18 … imports: [ […]

    RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules }); ] …
  11. ManfredSteyer OnPush flights flight flight {{ flight.id }} {{ flight.id

    }} FlightSearch Card Card Angular just checks when “notified”
  12. ManfredSteyer "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
  13. ManfredSteyer Advantages of AOT • Better Startup-Performance • Smaller Bundles:

    You don't need to include the compiler! • Tools can easier analyse the code • Remove unneeded parts of frameworks • Tree Shaking
  14. ManfredSteyer Angular CLI • ng build --prod • @ngtools/webpack with

    AngularCompilerPlugin • Can be used without CLI too
  15. ManfredSteyer Challenges Other conditions Separate Services for Server and Client-Seite

    Renderer abstracts DOM 3rd parts libs Angular 5: Server Side DOM Simulation (partly)
  16. ManfredSteyer More about this in my Medium Account • Configuration

    Details, Samples etc. • https://medium.com/@ManfredSteyer/angular-performance-tuning- article-series-6e3c33707b25
  17. ManfredSteyer Conclusion Quick Wins Lazy Loading and Preloading OnPush w/

    Immutables and Observables AOT and Tree Shaking Caching w/ Service Worker Server Side Rendering
  18. ManfredSteyer Lab • Start with „Getting Started“ • Do the

    rest in any order you want • Probably more exercises than enough for ~ 1.5 hrs • Focus on your interests • http://bit.ly/ng-conf-18-perf