Angular im Enterprise-Umfeld

Folien von Vortrag auf DWX 2017 in Nürnberg.

Transcript

1. Angular im Enterprise-Umfeld Manfred Steyer SOFTWAREarchitekt.at
2. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. Ziel Vier ausgewählte erweiterte Themen, die besonders bei Unternehmensanwendungen wichtig sind, näher kennen lernen.
4. Inhalt • Login und Identity Lösungen • Wiederverwendbare Bibliotheken • Build-Automatisierung • Internationalisierung
5. Login und Identity
6. Rollen Folie▪ 6 Client Authorization-Server Resource-Server
7. 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
8. OAuth 2
9. Implicit Flow Folie▪ 9 Client Authorization-Server Resource-Server 1. Umleitung 2. Umleitung mit Access-Token 3. Access-Token
10. 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
11. 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
12. Authentifizierung mit OpenId Connect Page ▪ 12
13. 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
14. 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
15. DEMO
16. npm Pakete
17. Warum Pakete? • Bereitstellen wiederverwendbarer Logik (Services, Komponenten etc.) • Projekt-übergreifend, Haus-intern • Öffentlich • Strukturierung einer großen Anwendung in kleinere Einheiten
18. Aufbau • node_modules • your-stuff • package.json
19. Einträge in package.json (Auszug) name version description entry-point(s) typings dependencies
20. package.json { "dependencies": { "@angular/core": "4.2.0", "@angular/http": "4.2.0" } }
21. package.json { "dependencies": { "@angular/core": "4.2.0", "@angular/http": "4.2.0" } }
22. package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^4.0.0", "@angular/http": "^4.0.0" } }
23. package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^4.0.0", "@angular/http": "^4.0.0" }, "devDependencies": { [...] } }
24. Entry Points als Barrels export * from './src/demo.service'; export { OtherDemoService } from './src/other-demo.service'; @NgModule({ … }) export class MyLibModule { }
25. Angular Package Format https://goo.gl/hjt7G3
26. Viele Details
27. Generator • npm install -g yo • npm install -g generator-angular2-library • yo angular2-library
28. Pakete lokal testen • Symbolische Links • Bibliothek: npm link • Konsument: npm link name-der-bibliothek
29. Lokale npm-Registry • TFS • Nexus • Verdaccio • Leichtgewichtiges Node-Paket • Installation: npm i -g verdaccio • Start: verdaccio
30. Pakete veröffentlichen • npm publish • npm install package-name
31. Pakete veröffentlichen • npm publish --registry http://localhost:4873 • npm install package-name --registry http://localhost:4873
32. Alternativen zur Auswahl der Registry • Global: npm set registry http://localhost:4873 • Standard: registry.npmjs.org • npm get registry • Pro Projekt: .npmrc im Projektroot
33. DEMO
34. Build-Automatisierung
35. 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
36. Angular CLI
37. Build mit CLI • .angular-cli.json • ng build • ng build --prod • Wenn alle Stricke reißen: • ng eject
38. Webpack Page ▪ 40
39. 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
40. Webpack-Konfiguration Page ▪ 42 module.exports = { entry: { 'vendor': './src/vendor.browser.ts', 'main': './src/main.browser.ts' }, […] }
41. Webpack-Konfiguration Page ▪ 43 module.exports = { entry: { 'vendor': './src/vendor.browser.ts', 'main': './src/main.browser.ts' }, module: { rules: [{ test: /\.ts$/, use: ['typescript-loader', …] }] }, […] }
42. 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' }) ] }
43. DEMO
44. Internationalisierung
45. Optionen • Angular Compiler • Angular Translate
46. 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
47. 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
48. DEMO
49. Zusammenfassung Token, OAuth 2 und OIDC Angular Package Format & Generator CLI + Eject = Webpack I18N mit Compiler oder ngx-translate
50. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer