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