Durch die Schallmauer: Hochperformante Anwendungen mit Angular

Folien von Vortrag auf BASTA! Spring 2017 in Frankfurt

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. Ansatzpunkte Größe der Bundles Zeitpunkt des Ladens Initialisierung von Framework und Anwendung Datenbindung Debugging- Informationen
6. Inhalt • Überblick • Lazy Loading und Preloading • Datenbindungsperformance und OnPush • AOT und Tree Shaking • Caching mit Service Worker • Serverside Rendering
7. Lazy Loading
8. Module Struktur Page  9 AppModule … … … SharedModule Root Module Feature Modules Shared Module
9. Lazy Loading Page  10 AppModule … … … SharedModule Root Module Feature Modules Shared Module
10. Root Module mit Lazy Loading Page  11 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
11. Routen für Feature Module Page  12 const FLIGHT_ROUTES = [ { path: '/bookings', component: FlightBookingComponent, […] }, […] } Url: /flights/bookings Triggers Lazy Loading
12. webpack Konfiguration • angular2-router-loader • Erzeugt mehrere Chunks Page  13
13. DEMO
14. Preloading
15. 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
16. Preloading aktivieren Page  17 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
17. Performance- Tuning mit OnPush
18. DEMO
19. Angular traversiert gesamten Baum flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card
20. Baum traversieren • An und für sich sehr schnell • Angular generiert optimierten Code • Bei Bedarf: Optimierungsmöglichkeit mit OnPush
21. OnPush flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card Nur geprüft nach “Benachrichtigung”
22. OnPush aktivieren @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class FlightCard { […] @Input() flight; }
23. Benachrichtigen bei Änderung? • Gebundene Daten ändern • Mit Observable “Event” auslösen
24. Inputs ändern flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card flightold === flightnew
25. Immutables
26. 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
27. Immutables und Angular flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card Änderung
28. DEMO
29. Observables
30. Observables mit OnPush Page  45 flights flight$ flight$ {{ flight$.id }} {{ flight$.id }} FlightSearch Card Card Änderung
31. Observables mit OnPush Page  46 flights$ flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Änderung Card
32. Observables binden? <flight-card [item]="flight | async" […]> </flight-card>
33. DEMO
34. 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
35. Ahead of Time (AOT) Compilation
36. Angular Compiler HTML Template JavaScript Template Compiler
37. Ansätze für das Kompilieren • JIT: Just in Time, zur Laufzeit • AOT: Ahead of Time, während des Builds
38. Vorteile von AOT • Bessere Startup-Performance • Kleine Bundles: Compiler muss nicht ausgeliefert werden • Analysierbarkeit des Codes • Nicht verwendete Frameworkbestandteile abstoßen • Tree Shaking • Vorbedingung: EcmaScript-Module
39. HTML TypeScript ES5+ES6 Modules Webpack 2 oder Rollup Treeshaked Bundle AOT Angular Compiler
40. AOT mit Angular CLI und Seed
41. Angular CLI • Commandline Interface für Scaffolding • cli.angular.io • Optionen • ng build --aot • ng build --prod • @ngtools/webpack mit AotPlugin • Auch ohne CLI nutzbar
42. Angular Class Seed • Vorkonfiguriertes Projekt • Autor: Angular Contributor • https://github.com/AngularClass/angular2-webpack-starter • npm run build:aot • NgcWebpackPlugin
43. DEMO
44. 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
45. Mehr zu AOT auf der BASTA! Spring 2017 • Session: Real World Angular 2: Erfahrungen von der Projektfront • DO, 16:00 • Christian Liebel
46. Caching mit Service Worker
47. 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)
48. 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.
49. 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>
50. Browser Support
51. Fallback für Safari & Co. • AppCache • Weniger Feature • Keine große Auswahl an Caching Patterns • Cache only • Network only
52. Mehr zu Service Worker auf der BASTA! • Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2 • DO, 9:45
53. DEMO
54. Serverside Rendering
55. Warum serverside Rendering? Erste Seite vorrendern Startperformance Consumer
56. Angular Universal • Ursprünglich Community-Projekt • https://github.com/angular/universal • Ab Angular 4: Im Core [Refactoring!] • Vorrendern mit NodeJS • ASP.NET: Angular Services
57. Node Server import 'angular2-universal-polyfills'; import { createEngine, ExpressEngineConfig } from 'angular2-express-engine'; import { MainModule } from './app.node.module';
58. Node Server import 'angular2-universal-polyfills'; import { createEngine, ExpressEngineConfig } from 'angular2-express-engine'; import { MainModule } from './app.node.module'; […] const app = […]; app.engine('.html', createEngine({}));
59. Node Server import 'angular2-universal-polyfills'; import { createEngine, ExpressEngineConfig } from 'angular2-express-engine'; import { MainModule } from './app.node.module'; […] const app = […]; app.engine('.html', createEngine({})); app.get('/*', (req, res) => { […] });
60. Node Server import 'angular2-universal-polyfills'; import { createEngine, ExpressEngineConfig } from 'angular2-express-engine'; import { MainModule } from './app.node.module'; […] const app = […]; app.engine('.html', createEngine({})); app.get('/*', (req, res) => { const expressConfig : ExpressEngineConfig = { ngModule: MainModule, […] }; });
61. Node Server import 'angular2-universal-polyfills'; import { createEngine, ExpressEngineConfig } from 'angular2-express-engine'; import { MainModule } from './app.node.module'; […] const app = […]; app.engine('.html', createEngine({})); app.get('/*', (req, res) => { const expressConfig : ExpressEngineConfig = { ngModule: MainModule, […] }; res.render('index', expressConfig); });
62. Herausforderungen Andere Rahmenbedingungen Services für Server und Client-Seite Renderer abstrahiert DOM Dritt-Komponenten?
63. Fazit Quick Wins Lazy Loading und Preloading AOT und Tree Shaking Caching mit Service Worker OnPush mit Immutables und Observables Consumer-Apps: Serverside Rendering
64. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer