Angular Performance Workshop, ngconf 2018, Salt Lake City

Slides from my Workshop

Transcript

1. ManfredSteyer Angular Performance Workshop Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2
3. ManfredSteyer Turbo Button
4. ManfredSteyer Quick Wins Bundling Minification enableProdMode()
5. ManfredSteyer Contents • Lazy Loading and Preloading • Performance for Data Binding with OnPush • AOT and Tree Shaking • Caching with Service Worker • Server Side Rendering
6. ManfredSteyer Schedule • ~ 30 Minutes: Presentation • Rest: Labs
7. ManfredSteyer Lazy Loading
8. ManfredSteyer Module Structure Page ▪ 8 AppModule … … … SharedModule Root Module Feature Modules Shared Module
9. ManfredSteyer Lazy Loading Page ▪ 9 AppModule … … … SharedModule Root Module Feature Modules Shared Module
10. ManfredSteyer Root Module with Lazy Loading Page ▪ 10 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
11. ManfredSteyer Routes for "lazy" Module Page ▪ 11 const FLIGHT_ROUTES = [ { path: '', component: FlightBookingComponent, […] }, […] }
12. ManfredSteyer Routes for "lazy" Module Page ▪ 12 const FLIGHT_ROUTES = [ { path: 'subroute', component: FlightBookingComponent, […] }, […] } flight-booking/subroute Triggers Lazy Loading w/ loadChildren
13. ManfredSteyer DEMO
14. ManfredSteyer Lazy Loading • Lazy Loading means: Loading it later • Better startup performance • Delay during execution for loading on demand
15. ManfredSteyer Preloading
16. ManfredSteyer Idea • Module that might be needed later are loaded after the application started • When module is needed it is available immediately Page ▪ 17
17. ManfredSteyer Activate Preloading Page ▪ 18 … imports: [ […] RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules }); ] …
18. ManfredSteyer Performance- Tuning with OnPush
19. ManfredSteyer DEMO
20. ManfredSteyer OnPush flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card Angular just checks when “notified”
21. 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
22. ManfredSteyer Activate OnPush @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class FlightCard { […] @Input() flight; }
23. ManfredSteyer DEMO
24. ManfredSteyer Ahead of Time (AOT) Compilation
25. ManfredSteyer Angular Compiler HTML Template JavaScript Template Compiler
26. ManfredSteyer Approaches • JIT: Just in Time, at runtime • AOT: Ahead of Time, during build
27. 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
28. ManfredSteyer Angular CLI • ng build --prod • @ngtools/webpack with AngularCompilerPlugin • Can be used without CLI too
29. ManfredSteyer
30. ManfredSteyer
31. ManfredSteyer Bundles without AOT and Tree Shaking JIT Compiler
32. ManfredSteyer Caching with Service Worker
33. ManfredSteyer Service Worker Browser Web Application Service Worker
34. ManfredSteyer Service Worker Browser Service Worker Request Response Cache Same Origin Policy Under your control!
35. @BASTAcon & @ManfredSteyer Abstractions for your Service Worker @angular/service-worker
36. ManfredSteyer Server Side Rendering
37. ManfredSteyer Why Server Side Rendering? Prerender 1st Page Start up performance Consumer
38. ManfredSteyer renderModuleFactory […] renderModuleFactory(moduleFactory, { document: indexFileContentsAsString, url: options.req.url }) .then(string => { […] }); […] Available since Angular 4.0
39. ManfredSteyer
40. ManfredSteyer Challenges Other conditions Separate Services for Server and Client-Seite Renderer abstracts DOM 3rd parts libs Angular 5: Server Side DOM Simulation (partly)
41. ManfredSteyer More about this in my Medium Account • Configuration Details, Samples etc. • https://medium.com/@ManfredSteyer/angular-performance-tuning- article-series-6e3c33707b25
42. ManfredSteyer Conclusion Quick Wins Lazy Loading and Preloading OnPush w/ Immutables and Observables AOT and Tree Shaking Caching w/ Service Worker Server Side Rendering
43. 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