ngEurope: High-Performance Applications with Angular

Slides from my session at ngEurope 2018 in Paris

Transcript

1. ManfredSteyer Through the Sound Barrier High-Performance Applications with Angular Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 3 Manfred Steyer
3. ManfredSteyer Turbo Button
4. ManfredSteyer Quick Wins Bundling Minification enableProdMode()
5. ManfredSteyer Contents • Lazy Loading • Performance for Data Binding with OnPush • AOT and Tree Shaking • New and upcoming features • [Caching with Service Worker: Subsequent Sessions]
6. ManfredSteyer Lazy Loading
7. ManfredSteyer Module Structure Page ▪ 10 AppModule … … … SharedModule Root Module Feature Modules Shared Module
8. ManfredSteyer Lazy Loading Page ▪ 11 AppModule … … … SharedModule Root Module Feature Modules Shared Module
9. ManfredSteyer Root Module with Lazy Loading Page ▪ 12 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
10. ManfredSteyer Routes for "lazy" Module Page ▪ 13 const FLIGHT_ROUTES = [ { path: '', component: FlightBookingComponent, […] }, […] }
11. ManfredSteyer DEMO
12. ManfredSteyer Performance- Tuning with OnPush
13. ManfredSteyer DEMO
14. ManfredSteyer OnPush flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card Angular just checks when “notified”
15. 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 • observable$ | async • Trigger it manually • Don't do this at home ;-) • At least: Try to avoid this
16. ManfredSteyer Activate OnPush @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class FlightCard { […] @Input() flight; }
17. ManfredSteyer DEMO
18. ManfredSteyer Ahead of Time (AOT) Compilation
19. ManfredSteyer Angular Compiler HTML Template JavaScript Template Compiler
20. ManfredSteyer Approaches • JIT: Just in Time, at runtime • AOT: Ahead of Time, during build
21. 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
22. ManfredSteyer Angular CLI • ng build --prod • @ngtools/webpack with AngularCompilerPlugin • Can be used without CLI too
23. ManfredSteyer Flight Search (Prod Build w/o AOT) Production Mode without AOT (no lazy loading)
24. ManfredSteyer Production Mode with AOT (no lazy loading)
25. ManfredSteyer Angular Build Optimizer makes code more treeshakable (default since CLI 1.5)
26. ManfredSteyer AOT is stricter than JIT !
27. ManfredSteyer Solutions Angular Language Service • Plugins for IDEs AOT for debugging • Possible since Angular 5 • Incremental AOT • Fast after 1st recompilation • ng serve --aot • Give it a try!
28. ManfredSteyer Further improvements in upcoming versions New AOT Compiler: More treeshakable Code No Breaking Changes "Early numbers are extremely promising in terms of code size" • -- Rob Wormald, Angular Developer Advocate • https://goo.gl/KTFMqd
29. ManfredSteyer More about this in my Medium Account • Configuration Details, Samples, Videos etc. • https://medium.com/@ManfredSteyer/angular-performance-tuning- article-series-6e3c33707b25
30. ManfredSteyer Conclusion Lazy Loading OnPush AOT and Tree Shaking
31. ManfredSteyer Quick wins Use the CLI Try out AOT for debugging New Version: Better Performance
32. ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer