Upgrade to Pro — share decks privately, control downloads, hide ads and more …

steyer_angular_enterprise.pdf

15934fa2aa7b2ce21f091e9b7cffa856?s=47 Manfred Steyer
PRO
November 08, 2017
25

 steyer_angular_enterprise.pdf

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

November 08, 2017
Tweet

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