steyer_angular_enterprise.pdf

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