Hochperformante Anwendungen mit Angular

Presentation von dotnet cologne, Köln, Mai 2017

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 • Überblick • 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. 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 ▪ 14
14. Preloading aktivieren Page ▪ 15 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
15. DEMO
16. Mehr zu Lazy Loading auf SOFTWAREarchitekt.at • 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
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. Mehr zu OnPush auf Heise.de • Steyer: Tipps und Tricks mit Angular, Teil 9: Performance-Tuning, https://goo.gl/O59xc4
26. Ahead of Time (AOT) Compilation
27. Angular Compiler HTML Template JavaScript Template Compiler
28. Ansätze für das Kompilieren • JIT: Just in Time, zur Laufzeit • AOT: Ahead of Time, während des Builds
29. Vorteile von AOT • Bessere Startup-Performance • Kleine Bundles: Compiler muss nicht ausgeliefert werden • Analysierbarkeit des Codes • Nicht verwendete Frameworkbestandteile abstoßen • Tree Shaking
30. Angular CLI • Commandline Interface für Scaffolding • cli.angular.io • Optionen • ng build --prod • @ngtools/webpack mit AotPlugin • Auch ohne CLI nutzbar
31. DEMO
32. Mehr zu AOT auf SOFTWAREarchitekt.at • 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
33. Caching mit Service Worker
34. 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)
35. 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.
36. 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>
37. Browser Support
38. Fallback für Safari & Co. • AppCache • Weniger Feature • Keine große Auswahl an Caching Patterns • Cache only • Network only
39. DEMO
40. Serverside Rendering
41. Warum serverside Rendering? Erste Seite vorrendern Startperformance Consumer
42. 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
43. renderModuleFactory […] renderModuleFactory(moduleFactory, { document: indexFileContentsAsString, url: options.req.url }) .then(string => { […] }); […] Alternative ohne AOT: renderModule
44. DEMO
45. Mehr zu SSR auf SOFTWAREarchitekt.at • Server Side Rendering With Angular 4, https://goo.gl/SdRtVT
46. Fazit Quick Wins Lazy Loading und Preloading AOT und Tree Shaking Caching mit Service Worker OnPush mit Immutables und Observables Consumer-Apps: Serverside Rendering
47. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer