Durch die Schallmauer: Hochperformante Anwendungen mit Angular

Slides from my talk at JAX 2017 in 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 ▪ 8 AppModule … … … SharedModule Root Module Feature Modules Shared Module
8. Lazy Loading Page ▪ 9 AppModule … … … SharedModule Root Module Feature Modules Shared Module
9. Root Module mit Lazy Loading Page ▪ 10 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
10. Routen für Feature Module Page ▪ 11 const FLIGHT_ROUTES = [ { path: '', component: FlightBookingComponent, […] }, […] }
11. webpack Konfiguration • @ngtools/webpack • Vorkonfiguriert bei Angular CLI Page ▪ 12
12. Lazy Loading => Laden wird hinausgezögert
13. Preloading
14. Idee • Module, die später eventuell benötigt werden, nach Anwendungsstart vorladen • Wenn Modul benötigt wird, steht es augenblicklich zur Verfügung Page ▪ 15
15. Preloading aktivieren Page ▪ 16 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
16. DEMO
17. Performance- Tuning mit OnPush
18. DEMO
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. DEMO
24. 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
25. Ahead of Time (AOT) Compilation
26. Angular Compiler HTML Template JavaScript Template Compiler
27. Ansätze für das Kompilieren • JIT: Just in Time, zur Laufzeit • AOT: Ahead of Time, während des Builds
28. Vorteile von AOT • Bessere Startup-Performance • Kleine Bundles: Compiler muss nicht ausgeliefert werden • Analysierbarkeit des Codes • Nicht verwendete Frameworkbestandteile abstoßen • Tree Shaking
29. Angular CLI • Commandline Interface für Scaffolding • cli.angular.io • Optionen • ng build --prod • @ngtools/webpack mit AotPlugin • Auch ohne CLI nutzbar
30. DEMO
31. Caching mit Service Worker
32. 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)
33. 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.
34. Service Worker Toolbox //sw-with-toolbox.js importScripts('/node_modules/sw-toolbox/sw-toolbox.js'); toolbox.router.get('/(.*)', toolbox.networkOnly, {origin: 'http://www.angular.at'}); toolbox.router.default = toolbox.cacheFirst; <script src="node_modules/sw-toolbox/companion.js" data-service-worker="sw-with-toolbox.js"></script>
35. Browser Support
36. Fallback für Safari & Co. • AppCache • Weniger Feature • Keine große Auswahl an Caching Patterns • Cache only • Network only
37. DEMO
38. Serverside Rendering
39. Warum serverside Rendering? Erste Seite vorrendern Startperformance Consumer
40. SSR und Angular • Ursprünglich Community-Projekt • Angular Universal • https://github.com/angular/universal • Ab Angular 4: Im Core [Refactoring!] • Vorrendern mit NodeJS • ASP.NET: Angular Services
41. renderModuleFactory […] renderModuleFactory(moduleFactory, { document: indexFileContentsAsString, url: options.req.url }) .then(string => { […] }); […] Alternative ohne AOT: renderModule
42. DEMO
43. Fazit Quick Wins Lazy Loading und Preloading AOT und Tree Shaking Caching mit Service Worker OnPush mit Immutables und Observables Consumer-Apps: Serverside Rendering
44. Mehr auf SOFTWAREarchitekt.at & Co. • Lazy Loading von Modulen mit Angular 2, dem neuen Router und Webpack, https://goo.gl/rvsCjM • Performanceoptimierung mit Preloading und dem neuen Angular Router, https://goo.gl/LkXZ7e • 5 Things You Wouldn't Necessarily Expect When Using AOT And Tree Shaking In Angular, https://goo.gl/FwuzrR • Angular 2 AOT Compilation And Tree Shaking With Webpack2 And/Or Rollup: Step By Step, https://goo.gl/99zrnG • Server Side Rendering With Angular 4, https://goo.gl/SdRtVT • Steyer: Tipps und Tricks mit Angular, Teil 9: Performance-Tuning, https://goo.gl/O59xc4
45. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer