Angular Performance Tuning

Talk from BASTA! 2017, Mainz (Germany)

Transcript

1. Durch die Schallmauer Hochperformante Anwendungen mit Angular Manfred Steyer SOFTWAREarchitekt.at
2. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. Turbo-Taste
4. Quick Wins Bundling Minifikation enableProdMode()
5. Inhalt • Lazy Loading und Preloading • Datenbindungsperformance und OnPush • AOT und Tree Shaking • Caching mit Service Worker • Serverside Rendering
6. Lazy Loading
7. Module Struktur 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 mit Lazy Loading Page ▪ 11 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
10. Routen für Feature Module Page ▪ 12 const FLIGHT_ROUTES = [ { path: '/bookings', component: FlightBookingComponent, […] }, […] } Url: /flights/bookings Triggers Lazy Loading
11. DEMO
12. Preloading
13. Idee • Module, die später eventuell benötigt werden, nach Anwendungsstart vorladen • Wenn Modul benötigt wird, steht es augenblicklich zur Verfügung Page ▪ 16
14. Preloading aktivieren Page ▪ 17 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
15. Performance- Tuning mit OnPush
16. DEMO
17. Angular traversiert gesamten Baum flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card
18. Baum traversieren • An und für sich sehr schnell • Angular generiert optimierten Code • Bei Bedarf: Optimierungsmöglichkeit mit OnPush
19. OnPush flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card Nur geprüft nach “Benachrichtigung”
20. OnPush aktivieren @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class FlightCard { […] @Input() flight; }
21. Benachrichtigen bei Änderung? • Gebundene Daten ändern • Mit Observable “Event” auslösen
22. Inputs ändern flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card flightold === flightnew
23. Immutables
24. Immutables • Objekte, die sich nicht ändern können • TypeScript: Access-Modifier readonly • Wenn sich Daten ändern  Immutable durch ein neues ersetzen • Änderungen können einfach erkannt werden: • oldObject === newObject • Mit oder ohne Bibliotheken
25. Immutables und Angular flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card Änderung
26. DEMO
27. Observables
28. Observables OnPush? <flight-card [item]="flights$ | async" […]> </flight-card>
29. DEMO
30. Nicht „alles oder nichts“ • Immutables und Observables müssen nicht durchgängig genutzt werden • Nutzung kann sich auf ausgewählte Teile beschränken • Vollständige Nutzung: Redux • @ngrx/store
31. Ahead of Time (AOT) Compilation
32. Angular Compiler HTML Template JavaScript Template Compiler
33. Ansätze für das Kompilieren • JIT: Just in Time, zur Laufzeit • AOT: Ahead of Time, während des Builds
34. Vorteile von AOT • Bessere Startup-Performance • Kleine Bundles: Compiler muss nicht ausgeliefert werden • Analysierbarkeit des Codes • Nicht verwendete Frameworkbestandteile abstoßen • Tree Shaking
35. Angular CLI • ng build --aot • ng build --prod • @ngtools/webpack mit AotPlugin • Auch ohne CLI nutzbar
36. DEMO
37. Tree Shaking
38. Herausforderungen • Die meisten Werkzeuge sind konservativ • Entfernen nur Teile, wenn sie sich "100%ig sicher" sind • Lösung: Angular Build Optimizer • Schreibt Kompilate um • Derzeit experimentell
40. Caching mit Service Worker
41. Was sind Service Worker? • Hintergrund-Tasks • Werden von Web App installiert • Können sich deaktivieren und bei Ereignissen wieder aktivieren • Nur HTTPS (außer localhost) • "Herzstück" von Progressive Web Apps
42. Service Worker und Caching/ Offline • Anfragen abfangen • Entscheiden, wie auf Anfragen zu antworten ist • Same Origin Policy • Caching Muster • Cache only • Network only • Try cache first, then network • Try network first, then cache • etc.
44. Service Worker mit Workbox (sw.js) importScripts('./assets/workbox-sw.js'); const workboxSW = new WorkboxSW();
45. Service Worker mit Workbox (sw.js) importScripts('./assets/workbox-sw.js'); const workboxSW = new WorkboxSW(); const networkFirst = workboxSW.strategies.networkFirst(); const cacheFirst = workboxSW.strategies.cacheFirst();
46. Service Worker mit 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);
47. Browser Support
48. DEMO
49. Serverside Rendering
50. Warum serverside Rendering? Erste Seite vorrendern Startperformance Consumer
51. Angular Universal • Ursprünglich Community-Projekt • https://github.com/angular/universal • Ab Angular 4: Im Core [Refactoring!] • Vorrendern mit NodeJS • ASP.NET: Angular Services
52. renderModuleFactory […] renderModuleFactory(moduleFactory, { document: indexFileContentsAsString, url: options.req.url }) .then(string => { […] }); […] Alternative ohne AOT: renderModule
53. Herausforderungen Andere Rahmenbedingungen Services für Server und Client-Seite Renderer abstrahiert DOM Dritt-Komponenten? Angular 5: Serverseitige DOM-Simulation (tlw.)
54. Mehr zu all diesen Themen • https://medium.com/@ManfredSteyer/angular-performance-tuning- article-series-6e3c33707b25
55. Fazit Quick Wins Lazy Loading und Preloading AOT und Tree Shaking Caching mit Service Worker OnPush mit Immutables und Observables Consumer-Apps: Serverside Rendering
56. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer