Angular im Enterprise-Umfeld

Session von w-jax 2017, München

Transcript

1. Angular für Enterprise Anwendungen Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Fokus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. Ziel Ausgewählte erweiterte Themen, die besonders bei Unternehmensanwendungen wichtig sind, näher kennen lernen.
4. Inhalt • Modulstruktur und Lazy Loading • Wiederverwendbare Bibliotheken • State Mangement und Redux (ngrx) • Internationalisierung • [Login, 16:15, Raum München]
5. Modulstruktur und Lazy Loading
6. Modul Struktur Page ▪ 6 AppModule … … … SharedModule Root Module Feature Modules Shared Module
7. Lazy Loading Page ▪ 7 AppModule … … … SharedModule Root Module Feature Modules Shared Module
8. Root Module mit Lazy Loading Page ▪ 8 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
9. Routen für lazy Modules Page ▪ 9 const FLIGHT_ROUTES = [ { path: '', component: FlightBookingComponent, […] }, […] }
10. DEMO
11. Preloading
12. Idee • Modul nach Start der Anwendung lazy laden • Wenn Modul später benötigt wird, steht es sofort zur verfügung Page ▪ 12
13. Preloading aktivieren Page ▪ 13 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
14. npm Pakete
15. Gründe für npm Pakete Wiederverwendbare Logik Große Anwendngen strukturieren
16. Aufbau • /node_modules • your-stuff • package.json
17. Einträge in package.json (Auszug) name version description entry-point(s) typings (peer) dependencies
18. Barrels
19. Idee hinter Barrels • ES Module: Datei == Modul • Viel zu feingranular für Konsument einer API • Barrel == Façade für Module == Public API
20. index.ts as Barrel export * from './src/demo.service'; export { OtherDemoService } from './src/other-demo.service'; @NgModule({ … }) export class LibStarterModule { }
21. Angular Package Format https://goo.gl/hjt7G3
22. Viele Details
23. Generator • npm install -g yo • npm install -g generator-angular2-library • yo angular2-library
24. Alternative Fokus: Interner Einsatz von Paketen (Monorepo) + viel mehr (Ngrx, ngUpgrade, …) https://nrwl.io/nx
25. Lokal testen • Symbolic Links • Library: npm link • Konsument: npm link library-name
26. Lessons Learned • Debugging: Link src folder • Oder: src kopieren • ng serve --preserve-symlinks • Vor Produktion: Ordner dist linken und mit Angular Compiler (AOT) testen
27. Veröffentlichen • Version in package.json erhöhen • npm version [patch | minor | major | version] • npm run build • cd ../dist • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873
28. Lokale npm-Registry • TFS • Nexus • Verdaccio • Very lightweight • npm i -g verdaccio • Start: verdaccio
29. Alternativen zum Festlegen der Registry • Global: npm set registry http://localhost:4873 • Standard: registry.npmjs.org • npm get registry • Projekt: .npmrc in project root
30. DEMO
31. State Management
32. App Home Booking Boarding FlightService PassengerService BoardingService
33. App Home Booking Boarding FlightService PassengerService BoardingService ▪ Verworren ▪ Schwer Nachvollziehbar ▪ Keine Struktur
34. App Home Booking Boarding Store State … boarding statistics bookings Boarding Reducer State State State Action Action Action Action … Reducer Action Single Immutable State Tree … Redux für Angular
35. Pro Contra
36. Boilerplate generieren https://nrwl.io/nx
37. DEMO
38. Internationalisierung
39. Optionen • Angular Compiler • Angular Translate
40. Angular Compiler • Extrahiert Texte aus Templates in Sprachfiles • Formate • XML Message Bundle (XMB) • XML Localisation Interchange File Format (XLIFF, version 1.2) • Kompiliert Sprachfiles zurück in Anwendung • Kompilierung beim Start (JIT) oder Build (AOT) • https://angular.io/docs/ts/latest/cookbook/i18n.html • Sprache kann im Betrieb nicht geändert werden (aber: Work in Progress) • Hohe Performance • Wird laufend erweitert Page ▪ 40
41. Angular Translate • Community Lösung • Leichtgewichtig, erweiterbar • https://github.com/ngx-translate • Migration von defacto-Standard für AngularJS 1.x • JSON-basierte Dateien • Sprache kann während der Laufzeit geändert werden • Nicht so performant wie Angular Compiler I18N • Keine (offizielle) Möglichkeit, Texte zu extrahieren Page ▪ 41
42. Initialisieren this.translate.addLangs(['en', 'de']); this.translate.setDefaultLang('de'); this.translate.use('de');
43. Resourcendatei { "FLIGHTS": { "from": "From", "to": "to", "search": "Search", "found": "{{count}} flights found." } }
44. Übersetzen <th>{{'FLIGHTS.from' | translate}}</th> <th>{{'FLIGHTS.found' | translate:{count: 7} }}</th>
45. Production Build
46. Typische Aktionen Bundling Minification enableProdMode() AOT Tree Shaking Whitespace Removal
47. Gute Nachricht ng build --prod
48. Flight Search (Prod Build w/o AOT)
49. Flight Search (Prod Build w/ AOT)
50. Build Optimizer • Build Optimizer macht Code besser "treeshakable" • Standard für Production Builds seit Angular CLI 1.5
51. Angular Anwendung mit Angular Material
52. Zusammenfassung Module Lazy Loading & Preloading Pakete Angular Package Format & Generator State Management und Redux I18N mit Compiler oder ngx-translate Production Build Build Optimizer & Co.
53. Kontakt & Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer