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

Angular im Enterprise-Umfeld

Angular im Enterprise-Umfeld

Folien von Vortrag auf DWX 2017 in Nürnberg.

Manfred Steyer

June 27, 2017
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer

    & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
  2. Prinzipieller Ablauf Folie▪ 7 Client Authorization-Server Resource-Server 1. Umleitung 2.

    Umleitung mit Access-Token 3. Access-Token Ein zentrales Benutzerkonto Nur Auth-Svr. kennt Passwort Auth. von Client entkoppelt Flexibilität durch Token SPA: Kein Cookie: Kein CSRF
  3. Folie▪ 10 Client Authorization-Server Resource-Server 1. Direkte HTTP-Anfrage mit Credentials

    des Benutzers 2. Antwort mit Access-Token 3. Access-Token Resource Owner Password Credentials Flow
  4. Resource Owner Password Credentials Flow Folie▪ 11 Client Authorization-Server Resource-Server

    1. Direkte HTTP-Anfrage mit Credentials des Benutzers 2. Antwort mit Access-Token 3. Access-Token Voraussetzung: Vertrauensstellung zw. Benutzer und Client
  5. Implicit Flow mit OIDC Folie▪ 13 Client Authorization-Server Resource-Server 1.

    Umleitung 2. Umleitung mit Access-Token und Id-Token 3. Access-Token User Profile Endpoint
  6. Demo • Identity Server • Open Source • Leichtgewichtig und

    erweiterbar • .NET und .NET Core • https://github.com/IdentityServer • angular-oauth2-oidc • npm install angular-oauth2-oidc --save
  7. Warum Pakete? • Bereitstellen wiederverwendbarer Logik (Services, Komponenten etc.) •

    Projekt-übergreifend, Haus-intern • Öffentlich • Strukturierung einer großen Anwendung in kleinere Einheiten
  8. Entry Points als Barrels export * from './src/demo.service'; export {

    OtherDemoService } from './src/other-demo.service'; @NgModule({ … }) export class MyLibModule { }
  9. Generator • npm install -g yo • npm install -g

    generator-angular2-library • yo angular2-library
  10. Pakete lokal testen • Symbolische Links • Bibliothek: npm link

    • Konsument: npm link name-der-bibliothek
  11. Lokale npm-Registry • TFS • Nexus • Verdaccio • Leichtgewichtiges

    Node-Paket • Installation: npm i -g verdaccio • Start: verdaccio
  12. Alternativen zur Auswahl der Registry • Global: npm set registry

    http://localhost:4873 • Standard: registry.npmjs.org • npm get registry • Pro Projekt: .npmrc im Projektroot
  13. Häufige Optionen CLI • Einfach • Gute Out-of-the- Box-Config •

    Webpack im Unterbau Webpack • Sehr Flexibel • Komplex • Sehr viel Unterstützung • Deklarativ Gulp & Co. • Gulp/Grunt & SystemJS • Früher: defacto- Standard • Sehr Flexibel • Komplex • Imperativ
  14. Build mit CLI • .angular-cli.json • ng build • ng

    build --prod • Wenn alle Stricke reißen: • ng eject
  15. Webpack Page ▪ 41 File A File B File C

    File D File E Entry Point Bundle Bundle Loader (z.B. .ts  .js) Plugins können ganzes Bundles verändern
  16. Webpack-Konfiguration Page ▪ 42 module.exports = { entry: { 'vendor':

    './src/vendor.browser.ts', 'main': './src/main.browser.ts' }, […] }
  17. Webpack-Konfiguration Page ▪ 43 module.exports = { entry: { 'vendor':

    './src/vendor.browser.ts', 'main': './src/main.browser.ts' }, module: { rules: [{ test: /\.ts$/, use: ['typescript-loader', …] }] }, […] }
  18. Webpack-Konfiguration Page ▪ 44 module.exports = { entry: { 'vendor':

    './src/vendor.browser.ts', 'main': './src/main.browser.ts' }, module: { rules: [{ test: /\.ts$/, use: ['typescript-loader', …] }] }, plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' }) ] }
  19. 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 • Hohe Performance • Wird laufend erweitert Page ▪ 48
  20. 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 ▪ 49
  21. Zusammenfassung Token, OAuth 2 und OIDC Angular Package Format &

    Generator CLI + Eject = Webpack I18N mit Compiler oder ngx-translate