Zahlen & Fakten
• Web App mit verschiedenen Backend-Systemen
• Branche: Energiemanagement
• Start Mitte September 2016 mit Angular 2.0.0
• 7 Frontend-Entwickler
• über 80 fachliche und technische Module
• über 350 Komponenten
• über 2700 Unittests
Slide 9
Slide 9 text
!==
Slide 10
Slide 10 text
Angular
• TypeScript
• komponentenbasiertes Framework
• kein $scope und keine Controller
• modular aufgebaut
• rxjs
• angular-cli
• feste Releasezyklen und Semantic Versioning
Slide 11
Slide 11 text
Angular Versionen
• September 2016: 2.0
• März 2017: 4.0
• November 2017: 5.0
• Mai 2018: 6.0
• aktuell: 6.1.9 und 7.0.0-beta.7
Slide 12
Slide 12 text
Learnings der zwei Jahre
Slide 13
Slide 13 text
$ ng new
Slide 14
Slide 14 text
angular-cli
• entwickelt vom Angular Team
• standardisierte Projektstruktur inkl Tests
• Production Build
• Webpack
• ab v6: Updates und Libraries
Slide 15
Slide 15 text
ng add
$ ng add @angular/material
• fügt Angular Material in die Applikation
• fügt die CSS Themes hinzu
• das Default Theme
• alle nötigen Imports des Moduls
$ ng generate @angular/material:material-nav —name=nav
• erstellt eine NavComponent
• erstellt den kompletten Boilerplate-Code
Slide 16
Slide 16 text
ng update
• aktualisiert Pakte und startet Migrationsskripte (wenn
verfügbar)
$ ng update @angular/cli --migrate-only --
from=1.7.4
• aktualisiert von v1.7.4 auf v6.1.9
• fügt fehlende Abhängigkeiten hinzu
• migriert zur neuen angular.json Datei
Slide 17
Slide 17 text
Struktur
Architektur
Slide 18
Slide 18 text
Angular Architektur
ngModule
ngModule
root Module
ngModule
Router
Component
Template
Styles Service
Pipe Directive
imports
PropertyBinding
EventBinding
DI
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureRoutingModule } from './feature-routing.module';
import { FeatureComponent } from './feature/feature.component';
@NgModule({
imports: [
CommonModule,
FeatureRoutingModule
],
declarations: [ FeatureComponent ]
})
export class FeatureModule { }
src/app/modules/feature/feature.module.ts
Slide 29
Slide 29 text
Aliase
Slide 30
Slide 30 text
@app
• konsistente Importe in der kompletten App
• Beispiel
import {
FooService
} from '../../../core/package/foo.service';
• besser:
import { FooService } from '@app/core';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { SingletonService } from '@app/core';
import { environment } from '@env/environment';
import { ExampleService } from './example.service';
@Component({
/* ... */
})
export class ExampleComponent implements OnInit {
constructor(
private SingletonService: SingletonService,
private exampleService: ExampleService
) {}
}
example.component.ts
Third Party
App Globals
Locally
Slide 33
Slide 33 text
Typings
Slide 34
Slide 34 text
Typings
interface User {
firstName: string;
lastName: string;
age: number;
createdDate: string | Date;
}
Response vom Server Rückgabewert eines Datepickers
Slide 35
Slide 35 text
Typ Restriktionen (I)
interface Order {
state: 'pending' | 'approved' | 'rejected';
}
Slide 36
Slide 36 text
Typ Restriktionen (II)
enum States {
pending = 1,
approved = 2,
rejected = 3;
}
interface Order {
state: States;
}
Slide 37
Slide 37 text
rxjs/observable
Slide 38
Slide 38 text
class CountryService {
private countries: Observable;
constructor(private http: Http) {
this.countries = this.http.get('/api/countries')
.publishReplay(1)
.refCount();
}
public getCountries(): Observable {
return this.countries;
}
}
country.service.ts
rxjs cached den letzten Emittenten Wert.
das Observable ist nutzbar, solange Subscriptions aktiv sind
Slide 39
Slide 39 text
SCSS
Slide 40
Slide 40 text
SCSS
• SCSS ist ein CSS Präprozessor
• Features
• Variablen
• Funktionen
• Mixins
• Angular Materials nutzt SCSS
ng test
• Testen von Angular Apps ist einfach
$ ng test
• Es wird Jasmine mit Karma und PhantomJS verwendet
• Nachteile
• langsam
• PhantomJS hat eine veraltete Rendering Engine
• PhantomJS wird nicht mehr weiter entwickelt
Slide 44
Slide 44 text
ng test
• Chrome 59 und später hat einen Headless Modus
• Das geht einfach
$ ng test --browser ChromeHeadless --single-run
• Nachteile
• es ist immer noch langsam
Slide 45
Slide 45 text
Jest
• „Delightful JavaScript Testing“ von Facebook
• Jest ist fast API-kompatibel mit Jasmine
• Fokus auf die Entwicklung (schnell und einfach zu nutzen)
• abstrahiert den DOM über JSDOM
• Code Coverage out of the box
• TypeScript Support
Slide 46
Slide 46 text
Jest Installation
$ yarn add --dev jest jest-preset-angular @types/jest
Slide 47
Slide 47 text
Vorteile von Jest
• 300% schnellere Testausführung
• ~2700 Tests laufen in etwa 60 Sekunden
• Integration in WebStorm und VS Code
• Snapshot Testing möglich
Slide 48
Slide 48 text
Commit Messages
+
ChangeLog Generator
Slide 49
Slide 49 text
• github.com/conventional-changelog/standard-version
• definiert
• Typ des Commits (Fix, Feature, Layout, usw.)
• Optional den Scope (Component oder Module)
• Commit Message
• Optional Body
• Ticket-ID
Slide 50
Slide 50 text
fix(foo-bar): removes dependency of jQuery
We don’t need jQuery, so it can be removed
closes #4711
Development Build
• $ yarn start
• startet yarn serve
"serve": "ng serve —sourcemaps --ssl --
host=0.0.0.0 --disable-host-check --extract-css"
• startet das Testbackend mit yarn test-backend
"test-backend": "nodemon --watch test-backend -e
js,ts,json -i '*.spec.ts' --exec \"cd test-
backend && ts-node -r tsconfig-paths/register\"
src/server.ts"
Slide 54
Slide 54 text
Production Build
• Unser Production Build
"build:prod": "npm run version && npm run
node-with-more-memory ./node_modules/
@angular/cli/bin/ng build -- --build-
optimizer --env=prod"
Slide 55
Slide 55 text
Debugging mit Augury
Slide 56
Slide 56 text
Augury
• Google Chrome Developer Tool Erweiterung
• visualisiert Components
• visuelles Debugging möglich
• Change Detection und Performance Checks