Das könnte dich ebenfalls interessieren: Docker Images erstellen und auf Dockerhub hochladen

Einen VPS bei Hetzner einrichten

Hetzner bietet oft Empfehlungslinks mit Guthaben-Vorteilen für Neukunden. Selbstverständlich kann man auch andere Anbieter nutzen, aber Hetzner ist preislich attraktiv und bietet solide Leistungen.

Was ist ein VPS?

Ein Virtual Private Server (VPS) ist ein virtueller Server, der auf einer physischen Maschine betrieben wird und als eigenständiger Server agiert. Er bietet mehr Kontrolle als klassisches Shared Hosting und ist eine kostengünstige Alternative zu dedizierten Servern. Der Zugriff erfolgt in der Regel per SSH (Secure Shell), wodurch wir den Server über die Kommandozeile steuern können.

SSH-Zugriff auf den VPS

Nach dem Erstellen eines VPS erfolgt die Verwaltung meist über eine Secure Shell (SSH). SSH ist ein Protokoll, das verschlüsselte Verbindungen zu entfernten Servern ermöglicht. Um sich mit dem Server zu verbinden, nutzt man folgenden Befehl:

ssh root@<IP-Adresse-des-Servers>

Falls ein SSH-Schlüssel hinterlegt wurde, kann die Authentifizierung per Public-Key-Authentifizierung erfolgen, was sicherer als ein Passwort ist.

Server bei Hetzner erstellen

1. Nach der Anmeldung in der Hetzner Cloud navigieren wir zu „Projekte“ und erstellen ein neues Projekt.
2. Danach wählen wir „Server hinzufügen“ und können eine Instanz konfigurieren.
3. Für den Anfang reicht oft das günstigste Modell aus. Ich empfehle jedoch, die Option für eine IPv4-Adresse zu aktivieren, da rein IPv6-basierte Setups oft Kompatibilitätsprobleme verursachen.

Domain einrichten

Um die Anwendung später unter einer eigenen Domain zu erreichen, muss man eine Domain registrieren und mit dem Server verknüpfen.

Domain bei Hetzner beantragen

1. In der Hetzner ConsoleH eine neue Domain registrieren oder eine bestehende Domain hinzufügen.
2. Um DNS-Einträge zu verwalten, müssen wir den DNS-Zugriff aktivieren.

Nameserver setzen

Folgende Nameserver sollten genutzt werden:

helium.ns.hetzner.de. 
hydrogen.ns.hetzner.com. 
oxygen.ns.hetzner.com.

Diese neuen Nameserver bieten bessere Performance und Flexibilität im Vergleich zu den alten Hetzner-Nameservern:

ns1.first-ns.de.
robotns2.second-ns.de.
robotns3.second-ns.com.

Beide Nameserver Varianten sind aber möglich! Die DNS Änderungen brauchen etwas Zeit. Mit Tools wie MXToolbox können wir aber überprüfen, ob die Änderungen bereits stattgefunden haben.

Domain mit dem Server verbinden

Nun muss die IP-Adresse des Servers mit der Domain verknüpft werden:

1. In der Hetzner Cloud zu DNS-Zonen wechseln.
2. Die registrierte Domain auswählen.
3. Einen neuen A-Record erstellen und die IPv4-Adresse des Servers eintragen.
4. Falls vorhanden, den IPv6-Record (AAAA) entfernen, um Kompatibilitätsprobleme zu vermeiden.

Mit MXToolbox kann man auch hier prüfen, ob die DNS-Änderungen bereits übernommen wurden.

Kubernetes einrichten

Kubernetes ist ein leistungsfähiges Orchestrierungstool für Container. Ich verwende k3s, eine schlanke Kubernetes-Variante, die sich besonders gut für kleinere Umgebungen eignet.

K3s auf dem Server installieren

Per SSH auf den Server verbinden und k3s mit folgendem Befehl installieren:

curl -sfL https://get.k3s.io | sh - 

Das Skript installiert k3s und startet den Kubernetes-Dienst. Nach der Installation kann k3s mit folgendem Befehl überprüft werden:

kubectl get nodes

k3s bringt eine eigene kubectl-Version mit, sodass keine separate Installation nötig ist.

YAML-Files für FE, BE, MySQL und Redis erstellen

Für das Deployment unserer Anwendung brauchen wir YAML-Dateien für:

• Frontend (Angular)
• Backend (NestJS)
• Datenbank (MySQL)
• Session-Management (Redis)

Eine Deployment-Datei für das Backend könnte so aussehen:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: backend
          image: dockerhub-user/backend:latest
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: backend-service
spec:
  selector:
    app: backend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
  type: ClusterIP

Was sind Deployments und Services?

• Deployments verwalten die Bereitstellung und Skalierung von Containern.
• Services sorgen für eine stabile Netzwerkverbindung zwischen Containern.
• ClusterIP bedeutet, dass der Service nur innerhalb des Kubernetes-Clusters erreichbar ist.

Caddy als Reverse Proxy einrichten

Damit eingehender Traffic richtig verteilt wird, wird ein Reverse Proxy benötigt. K3s bringt standardmäßig Traefik mit, allerdings habe ich mich für eine einfachere Lösung entschieden: Caddy. Ich war echt erstaunt wie wenig Anleitungen bzw. Dokumentation es zu Caddy in Kombination mit Kubernetes gibt.

Warum Kubernetes mit Caddy?

• Automatische Let’s Encrypt SSL-Zertifikate
• Einfache Konfiguration per Caddyfile
• Built-in Load Balancer

Traefik entfernen

kubectl delete helmrelease traefik -n kube-system

Caddy Deployment erstellen

apiVersion: apps/v1
kind: Deployment
metadata:
  name: caddy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: caddy
  template:
    metadata:
      labels:
        app: caddy
    spec:
      containers:
        - name: caddy
          image: caddy
          volumeMounts:
            - name: caddy-config
              mountPath: /etc/caddy/Caddyfile
      volumes:
        - name: caddy-config
          configMap:
            name: caddy-config
---
apiVersion: v1
kind: ConfigMap
metadata:
  name: caddy-config
data:
  Caddyfile: |

    example.com {
        reverse_proxy backend-service:3000
    }

---
apiVersion: v1
kind: Service
metadata:
  name: caddy-service
spec:
  type: LoadBalancer
  selector:
    app: caddy
  ports:
    - port: 80
      targetPort: 80
    - port: 443
      targetPort: 443

Wichtig: Da Let’s Encrypt ein Rate-Limit hat, sollten Tests zunächst mit Staging-Zertifikaten erfolgen!

Fazit

Nach diesen Schritten läuft die Anwendung nun in einem Kubernetes-Cluster auf einem Hetzner VPS und ist über eine eigene Domain erreichbar. Als nächstes würde es sich anbieten eine automatische CI/CD-Pipeline einzurichten, um neue Versionen ohne manuellen Aufwand zu deployen.

The post Deployment einer WebApp mit Kubernetes und Caddy appeared first on Nerd Corner.

Das könnte dich ebenfalls interessieren: NestJS auf Vercel hosten

Erstellung der Docker Compose Yml

Mit Docker Compose können alle Komponenten einer Anwendung über eine einzige Konfigurationsdatei definiert und gemeinsam gebuildet bzw. gestartet werden.

version: '3.8'

services:
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "3000:3000"
    depends_on:
      - mysql
      - redis
    environment:
      - DATABASE_URL=mysql://user:password@mysql:3306/db
      - SESSION_STORE=redis://redis:6379

  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: db
    ports:
      - "3306:3306"

  redis:
    image: redis:latest
    ports:
      - "6379:6379"

Erstellung der Env Datei

Um Umgebungsvariablen zentral zu verwalten, erstellen wir eine .env Datei:

DATABASE_URL=mysql://user:password@mysql:3306/db 
SESSION_STORE=redis://redis:6379

Wichtig: Alle ENV-Variablen, die im Code verwendet werden, müssen auch in docker-compose.yml vorkommen!

Docker-Image für das Frontend

Das Angular-Frontend muss für die Produktion gebaut werden. Hier ein Beispiel-Dockerfile:

FROM node:20 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

Da wir für den Build auf nginx angewiesen sind brauchen wir auch eine entsprechende Config Datei:

server {
  listen 80;
  server_name _;

  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

Docker-Image für das Backend

Auch das NestJS-Backend muss gebaut werden. Hier ein optimiertes Dockerfile

# Build stage
FROM node:20 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# Production stage
FROM node:20-alpine
WORKDIR /app

COPY --from=build /app/dist ./dist
COPY package.json package-lock.json ./
RUN npm install --only=production
CMD ["node", "dist/main.js"]

Builden der App mit Docker Compose

Nachdem alle Dockerfiles konfiguriert wurden können jetzt die Images gebuildet werden. Mit Docker compose ist das ganze wirklich einfach.

docker compose up -d --build

Anschließend sind die Images fertig, die Container gebaut und die App kann lokal direkt ausgetestet werden! Als letzer Schritt müssen die Images noch auf DockerHub hochgeladen werden, damit sie später leichter für das Deployment auf einem Server genutzt werden können.

Hochladen auf Docker Hub

Das Hochladen wird nachfolgend Schritt für Schritt erklärt:

1. Erstelle einen Account bei Docker Hub.
2. Erstelle ein Repository für das Frontend und Backend (1 privates Repo ist aktuell kostenlos).
3. Baue die Images und tagge sie:

   docker tag <image-id> dockerAccountName/frontend:latest
   docker tag <image-id> dockerAccountName/backend:latest

4. Melde dich an und pushe die Images:

   docker login
   docker push dockerAccountName/frontend:latest
   docker push dockerAccountName/backend:latest

Ausblick: Deployment mit Kubernetes

Da die Images nun auf Docker Hub sind, steht dem Deployment nichts mehr im Wege. Ich habe mich für ein Kubernetes-Cluster auf einem Hetzner-VPS entschieden. Mehr Infos dazu hier.

The post Docker Images erstellen und auf Docker Hub hochladen appeared first on Nerd Corner.

Das könnte dich auch interessieren: Wie man in Angular eine PUSH Architektur programmiert.

Liste der Komponenten

• Entwicklungsumgebung (z.B. VS Code)
• Angular CLI
• SVG File

Erstellung eines Büroplans

Ich würde beinahe behaupten, dass die Erstellung des Büroplans der schwerste Teil der Aufgabe war. Der Büroplan kann auf unterschiedliche Weisen erstellt werden. Wichtig dabei ist, dass es sich um eine SVG Datei handeln muss. Ich habe hierfür Adobe Xd genutzt und mit Linien, Rechtecken und Kreisen gearbeitet. Das Ergebnis könnte schöner sein, aber es reicht um die Funktionalität zu demonstrieren. Du kannst meinen Plan benutzen oder auch einen eigenen erstellen.

Nachdem das SVG Bild erstellt wurde, müssen die Bereiche die einen Arbeitsplatz darstellen zu einer Gruppe zusammengefasst werden. Ich habe den Gruppe noch gleich die Klasse „seat“ zugeteilt. Das sieht dann so aus:

<g class="seat" >
    <g id="table-0" transform="translate(19 59)">
      <rect width="66" height="35" stroke="none" />
      <rect x="2.5" y="2.5" width="61" height="30" fill="none" />
    </g>
    <g id="screen-0" transform="translate(31 84)">
      <rect id="fill" width="42" height="4" stroke="none" />
      <path
        d="M0,1.5h42M39.5,0v4M42,2.5h-42M2.5,4v-4"
        fill="none"
        clip-path="url(#clip)"
      />
    </g>
    <g id="chair-0" transform="translate(40 30)">
      <ellipse cx="12.5" cy="11" rx="12.5" ry="11" stroke="none" />
      <ellipse cx="12.5" cy="11" rx="10" ry="8.5" fill="none" />
    </g>
  </g>

Der gezeigte Codeausschnitt entspricht einem Arbeitsplatz, wie beispielsweise der in dem roten Kreis hier:

Angular Reactive Form erstellen

Um den Büroplan in eine reactive Form einzubinden, erstellen wir ein neues Angular Projekt. Ich habe mich bei dem Projekt vom deutschen YouTuber Unleashed Design inspirieren lassen: https://www.youtube.com/watch?v=NOuVxP7FxBc. Allgemein kann ich seine Videos sehr empfehlen! Man lernt bei ihm immer wieder neue Tipps und Tricks, besonders im Umgang mit Angular.

Wir brauchen für die Reactive Angular Form SVG das ReactiveFormsModule. Anschließend erstellen wir eine FormGroup und FormControl Felder. Die FormGroup habe ich reservationForm getauft. Sie beinhaltet ein Feld für den Namen, ein Feld für den Wochentag und ein Feld für den Platz den man buchen möchte.

public reservationForm: FormGroup = new FormGroup({
    name: new FormControl('', [Validators.required], []),

    weekday: new FormControl('', [Validators.required], []),

    seat: new FormControl('', [Validators.required], []),
  });

Um sich das Formular anzeigen lassen zu können ist etwas html Code notwendig:

<form [formGroup]="reservationForm">
  <label for="name"> Your name:</label>
  <input id="name" type="text" formControlName="name" placeholder="Name" />

  <label for="weekday"> Enter the reservation day:</label>
  <input
    id="weekday"
    type="text"
    formControlName="weekday"
    placeholder="Monday"
  />
</form>

Zur besseren Demonstration macht es Sinn sich auch den Wert des Formulars anzeigen zu lassen:

<p>Values: {{ reservationForm.value | json }}</p>
<p>Form valid: {{ reservationForm.valid }}</p>

Seats Komponente für die Angular Form SVG erstellen

Um ein Custom Formular Feld zu bauen wird als erstes eine neue Komponente benötigt. Hier können wir gleich einen Tipp von Unleashed Design nutzen. Angular bietet nämlich die Möglichkeit SVG Bilder als templateUrl einzubinden. Wir löschen die seats.component.html und ersetzen diese durch unseren SVG Büroplan mit dem Namen seats.component.svg. In der seats.component.ts können wir dadurch die templateUrl durch die SVG Datei ersetzen:

selector: 'app-seats',
templateUrl: './seats.component.svg',
styleUrls: ['./seats.component.sass'],

Das Custom Formular Feld kann jetzt in die reactive Form eingebunden werden:

<app-seats id="seat" formControlName="seat"></app-seats>

In der Sass Datei kann der SVG Büroplan beliebig angepasst werden. Farben, Strichdicken, und vieles mehr können hier eingestellt werden. Ich habe es so angepasst, dass der Büroplan rot wird, wenn das SVG Formularfeld invalid wird:

$successColour: #19e619

:host
    &.ng-touched, &.ng-dirty
            &.ng-invalid
                svg
                    .wall, .seat
                        stroke: red

    svg
        margin: 25px 0 25px 0
        
        .wall
            stroke: black
            fill: #fff 
            stroke-width: 5
        .separators
            stroke: black
            fill: none
            stroke-width: 5
        .separate-room
            stroke: black
            fill: none
            stroke-width: 5

        .seat
            stroke: grey
            cursor: pointer
            fill: #fff 
            transition: all 250ms
            stroke-width: 4
            &.selected
                fill: $successColour
                stroke-width: 1

ControlValueAccessor hinzufügen

Wir können zwar schon unseren Büroplan in der Reactive Form sehen, aber er ist noch ohne Funktion. Um das zu ändern wird ein ControlValueAccessor benötigt. Der ControlValueAccessor dient als Schnittstelle für eine benutzerdefinierte Formularsteuerung, die sich in Angular Formulare integrieren lässt. Der ControlValueAccessor verlangt nach diesen vier Methoden:

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

Mehr Informationen zum ControlValueAccessor finden sich in der Doku: https://angular.io/api/forms/ControlValueAccessor

Damit die seats.component.ts Komponente Zugriff auf den VALUE_ACCESSOR erhält müssen wir folgenden Provider konfigurieren:

providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => SeatsComponent),
      multi: true,
    },
  ],

Variablen und Methoden für den Angular Forms ControlValueAccessor

Der nächste Schritt sieht komplizierter aus, als er eigentlich ist. Im Prinzip handelt es sich um feste Variablen und Methoden, die jedes custom Formularfeld benötigt.

Jedes Custom reactive Form braucht die nachfolgenden Variablen. Die Variable onTouched, damit das Formularfeld später zu touched werden kann. Außerdem onChange und die statische Variable touched als boolean, um zu wissen ob das Ganze schon touched ist. Ein Formularfeld kann auch disabled sein, daher wird ebenfalls die statische Variable isDisabled als boolean benötigt. Selbstverständlich braucht jedes custom Formular auch einen value.

public onTouched = () => {};
public onChange = (value: string) => {};
public touched: boolean = false;
public isDisabled: boolean = false;
public value: string = '';

Jedes Custom Reactive Form braucht auch die Möglichkeit diese Variablen zu verändern. Hier kommt die bereits im vorherigen Abschnitt besprochenen ControlValueAccessor Methoden zum Einsatz. Zum einen die writeValue Funktion, die der value Variable einen neuen Wert gibt. Die Funktion markAsTouched ruft onTouched auf und setzt die Variable touched auf true, falls das custom Formularfeld vorher noch nicht angeklickt wurde. Zum Schluss werden noch die beiden Methoden registerOnChange und registerOnTouched benötigt. Beide updaten eigentlich nur ihren jeweiligen Wert. Die Funktion registerOnChange updated den Wert onChange und registerOnTouched updated den Wert onTouched. Das reactive Form Module kann auch ganze Formulare disablen. Damit auch das custom reactive Formfeld darauf hört, wird die Methode setDisabledState genutzt. Mit dieser Methode kann die Variable isDisabled verändert werden.

writeValue(value: string): void {
  this.value = value;
}
markAsTouched(): void {
  if (!this.touched) {
    this.onTouched();
    this.touched = true;
  }
}
registerOnChange(onChange: any): void {
  this.onChange = onChange;
}
registerOnTouched(onTouched: any): void {
  this.onTouched = onTouched;
}

setDisabledState(isDisabled: boolean): void {
  this.isDisabled = isDisabled;
}

SVG Gruppen mit den Formularvariablen verknüpfen

Damit der SVG Büroplan auch funktional nutzbar ist brauchen wir noch die Möglichkeit einzelne Arbeitsplätze auszuwählen. Hierfür nutzen wir die Angular Bindingmöglichkeiten. Eine Funktion isSelected() wird benötigt, um das Sytling des Arbeitsplatzes zu erkenn bzw. zu verändern.

[class.selected]="isSelected('seat-0')"
(click)="select('seat-0')"

Außerdem eine Funktion select(), welche den ausgewählten Platz anhand eines Namens ( „seat-1“, „seat-2“…) erkennt. Innerhalb dieser select() Funktion wird zuerst überprüft, ob das Formular allgemein disabled ist. Wenn das nicht der Fall ist überprüft eine zweite Abfrage, ob der Platz bereits ausgewählt wurde. Falls das der Fall ist wird der value zu nichts, ansonsten wird der value zu dem Namen des Arbeitsplatzes, also beispielsweise „seat-3“.

public select(option: string): void {
  if (!this.isDisabled) {
    if (this.isSelected(option)) {
      this.value = '';
    } else {
      this.value = option;
    }
    this.onChange(this.value);
    this.markAsTouched();
  }
}

public isSelected(option: string): boolean {
  return option === this.value;
}

Dateien zum Herunterladen

• Projekt auf Github

The post Wie man eine Reactive Angular Form SVG mit klickbaren Elementen erstellt appeared first on Nerd Corner.

Angular selbst überprüft regelmäßig das View Model auf Änderungen. Sollte sich aufgrund einer State Änderung das View Model verändern, rendert Angular die View neu, weil Angular automatisch das UI anpasst, wenn sich das Model verändert. Durch diese kontinuierlichen Beobachtungen wird die ganze Anwendung langsamer.

Zudem steigt mit dem traditionellen Pull Ansatz die Komplexität. Besonders, wenn mehrere Views dieselben Daten benötigen. Was passiert, wenn sich die Daten ändern? Wie werden die Views darüber informiert, dass neue Daten verfügbar sind? Callback Funktionen könnten helfen, aber dann wird die Anwendung schnell unübersichtlich. Außerdem wirken sie sich besonders bei größeren Anwendungen negativ auf die Handhabung und Wartung aus. Schließlich müssen die Objekte einzeln initialisiert werden und die Abhängigkeiten bzw. die Reihenfolge der Methoden beachtet werden.

Um dieses Problem zu umgehen kann eine Push basierte Architektur genutzt werden. Angular bietet hier mit RxJS und dem Fassaden Entwurfsmuster eine hervorragende Möglichkeit zur Implementierung! Die Implementierung wird anhand eines Angular Beispiels in diesem Blog Artikel erläutert und ist für alle Plattformen und Frameworks (Angular, React, Vue.js, usw.) übertragbar.

Liste der Komponenten:

• Entwicklungsumgebung
• Angular CLI

Was ist eine Fassade eigentlich?

Das Fassaden Entwurfsmuster ist ein zentrales Interface, welches mit verschiedenen Schnittstellen eines oder mehrerer untergeordneter Systeme kommuniziert. Es kann je nach Bedarf zusätzliche Funktionen sowohl vor als auch nach einer Client Anfrage ausführen.

Das Fassaden Objekt bietet eine einheitliche und meist vereinfachte Schnittstelle zu einer Menge von Schnittstellen eines Subsystems.

Es sorgt als Vermittler dafür, dass die Kommunikation bzw. der Zugriff auf die einzelnen Komponenten eines Subsystems vereinfacht und damit auch die direkte Abhängigkeit von diesen Komponenten minimiert wird. Es delegiert die Clientaufrufe so, dass Clients weder die Klassen noch ihre Beziehungen und Abhängigkeiten kennen müssen.

Das ist besonders in großen Systemen hilfreich, wenn ein Subsystem viele technisch orientierte Klassen enthält, die selten von außen verwendet werden. Die Verwendung einer Fassade senkt die Komplexität, da mehrere Schnittstellen zu einer zusammengefasst werden. Außerdem kann das Subsystem durch die lose Kopplung leichter erweitert werden.

Die PUSH Architektur

Für eine Push basierte Architektur können fortgeschrittene Entwurfsmuster wie Redux oder NgRx verwendet werden. Allerdings kann auch eine sehr elegante und performante push basierte Lösung mit RxJS erreicht werden.

Mit Hilfe der lang lebigen RxJS Observable streams können Veränderungen der Daten an alle Subscriber gepusht werden. Dazu subscriben die Views dem gewünschten Daten Stream. Verändern sich dann die Daten, werden die Änderungen über den Stream direkt an alle Subscriber gepusht ohne das der UI Thread geblockt wird.

Auf diese Art und Weise wird ein direkter Datenzugang verhindert und die Daten sind read-only. Die eigentliche Datenquelle wird ähnlich wie bei einer API angesprochen, die von den Views verwendet wird. Als zentrale Schnittstelle dient hier die eingangs beschriebene Fassade. Diese besteht aus Streams, die Daten liefern, wenn sich die Daten ändern und Methoden, um Änderungen an den Daten anzufordern oder bestimmte benutzerdefinierte Streams anzufordern.

Die eigentlichen Rohdaten sind erst verfügbar, nachdem sie durch den/die Stream(s) gepusht worden sind. Diese Abschirmung zentralisiert die gesamte Logik und zwingt die Views passiv auf die eingehenden Daten zu reagieren. Mit den Push basierten Diensten werden Angular View Komponenten hoch performant und nutzen dabei sowohl ChangeDetectionStrategy.OnPush, als auch die async Pipe für die gelieferten Stream Daten.

Daher ist das System lazy loading. Das UI-Framework braucht nicht nach Zustandsänderungen des View-Modells suchen und wartet stattdessen lazy darauf, dass ein neuer Zustand gepusht wird.

Praxisbeispiel

Als Beispiel für eine Push basierte Architektur dient eine einfache Anwendung, welche über den HTTP Request https://random-data-api.com/api/beer/random_beer?size=1 eine zufällige Bier Sorte erhält. Eine View zeigt die Biersorte an. Über ein kleines Input Feld kann die Anzahl der anzuzeigenden Biere variiert werden. Eine Fassade als zentrales Element pusht automatisiert die neuen Biersorten an die View, sobald diese verfügbar sind.

Als Vorbild für das Entwurfsmuster dient der Artikel von Thomas Burleson: https://thomasburlesonia.medium.com/push-based-architectures-with-rxjs-81b327d7c32d

Als erstes muss das State Management aufgesetzt werden:

export interface Beer {
  brand: string;
  name: string;
  style: string;
  hop: string;
  alcohol: string;
}

export interface BeerState {
  beerArray: Beer[];
  size: number;
}

Als nächstes initialisieren wir die Werte des Statemanagements der Fassade:

export interface BeerState {
  beerArray: Beer[];
  size: number;
}

let _state: BeerState = {
  beerArray: [],
  size: 4
};

Die Fassade nutzt RxJS Streams um Daten direkt an die Views zu pushen. Diese Streams können auch automatisiert bei einer Änderung der States einen Rest API call ausführen:

combineLatest(this.size$)
      .pipe(
        //switchMap: Maps values to observable. Cancels the previous inner observable.
        switchMap(([size]) => {
          return this.findBeerArray(size);
        })
      )
      .subscribe((beerArray) => {
        this.updateState({ ..._state, beerArray });
      });

Die Streams werden so aufgebaut, dass sie dauerhaft erhalten bleiben und nur bei einer Datenänderung aktiv werden:

export class BeerFacade {

  beerArray$ = this.state$.pipe(
    map((state) => state.beerArray),
    distinctUntilChanged()
  );

  size$ = this.state$.pipe(
    map((state) => state.size),
    distinctUntilChanged()
  );

  private updateState(state: BeerState) {
    this.store.next((_state = state));
  }
}

Für die bessere Handhabung werden die Streams zu einem Einzigen zusammengefasst:

vm$: Observable<BeerState> = combineLatest(this.beerArray$, this.size$).pipe(
    map(([beerArray, size]) => {
      return { beerArray, size };
    })
  );

Der HTTP Request kann in einen seperaten Data Service ausgelagert werden. Da es sich hierbei aber nur um ein kleines Beispielprogramm handelt, wird der Restcall innerhalb der Facade implementiert und ausgeführt:

/** RandomBeer REST call */
  private findBeerArray(size: number): Observable<Beer[]> {
    const url = `https://random-data-api.com/api/beer/random_beer?size=${size}`;
    return this.http.get<Beer[]>(url);
  }

Die Fassade und der View Model Stream können nun einfach initialisiert und genutzt werden. Es ist unglaublich wenig Code notwendig:

export class AppComponent {
  vm$: Observable<BeerState> = this.facadeService.vm$;

  //facadeService is public for direct usage in html
  constructor(public facadeService: RandomBeerFacadeService) {} 
  title = 'RandomBeerApp';
}

Die Daten des View Model Streams werden mit folgendem Codeschnippsel angezeigt:

<div *ngIf="vm$ | async as vm">  
  <ul>
    <li id="random-beer-list" *ngFor="let u of vm.beerArray">
      Brand: {{ u.brand }}, Alcohol: {{ u.alcohol }}, Hop: {{ u.hop }}
    </li>
  </ul>
  <input id="input-rand-beer" type="number" (change)="facadeService.updateSize($event)" />
</div>

Dabei sorgt die Async Pipe von Angular dafür, dass immer die aktuellsten Daten angezeigt werden. Hier findet sich eine genaue Erklärung der Async Pipe.

Da der Fassaden Service als public deklariert wurde, werden die Inputs direkt an die updateSize Funktion der Fassade weitergegeben:

updateSize(selectedSize: any) {
    const size = selectedSize.target.value;
    this.updateState({ ..._state, size });
  }

Als Resultat zeigt die Applikation zunächst 4 zufällige Biere an. Anschließend kann durch das Input Feld die Anzahl auf 7 erhöht werden. Dadurch wird die Funktion updateSize() aufgerufen, welche mittels updateState() den State des size$ streams aktualisiert. Als Folge dessen wird automatisiert ein neuer REST call ausgeführt und das Ergebnis an das View Model gepusht. Mit Hilfe der async Pipe werden somit die neusten Daten angezeigt. In unserem Fall die 7 zufälligen Biersorten.

Abschließend macht es Sinn die Funktionalität der einzelnen Fassaden Bestandteile zu testen:

it('should get individual Observable "stream" of vm data', (done) => {
    testFacade.vm$.subscribe((vm) => {
      expect(vm.size).toEqual(initStateMock.size);
      done();
    });
  });

  it('should update state values', (done) => {
    const updatedStateMock: TestBeerState = {
      beerArray: [
        {
          brand: 'Pabst Blue Ribbon',
          name: 'Two Hearted Ale',
          style: 'Merican Ale',
          hop: 'Sorachi Ace',
          alcohol: '2,9%',
        },
        {
          brand: 'Bud Light',
          name: 'La fin Du Monde',
          style: 'Stout',
          hop: 'Bullion',
          alcohol: '2,7%',
        },
      ],
      size: 2,
    };
    testFacade['updateState'](updatedStateMock);
    testFacade.vm$.subscribe((vm) => {
      expect(vm).toEqual(updatedStateMock);
      done();
    });
  });

  it('should update the size value', (done) => {
    const newSize = 9;
    const mockEvent = {
      target: {
        value: newSize,
      },
    };
    testFacade['updateSize'](mockEvent);
    testFacade.vm$.subscribe((vm) => {
      expect(vm.size).toEqual(newSize);
      done();
    });
  });

  it('should perform a mocked http request', (done) => {
    const httpMock: HttpTestingController = TestBed.inject(
      HttpTestingController
    );

    const mockResponse = {
      brand: 'Pabst Blue Ribbon',
      name: 'Two Hearted Ale',
      style: 'Merican Ale',
      hop: 'Sorachi Ace',
      alcohol: '2,9%',
    };

    testFacade['findBeerArray'](1);
    testFacade.vm$.subscribe((tb) => {
      expect(tb.beerArray).toBeTruthy();
      expect(tb.beerArray[0].brand).toBe(mockResponse.brand);
      expect(tb.beerArray[0].name).toBe(mockResponse.name);
      expect(tb.beerArray[0].style).toBe(mockResponse.style);
      expect(tb.beerArray[0].hop).toBe(mockResponse.hop);
      expect(tb.beerArray[0].alcohol).toBe(mockResponse.alcohol);

      done();
    });

    const mockRequest = httpMock.expectOne(
      'https://random-data-api.com/api/beer/random_beer?size=1'
    );
    mockRequest.flush(mockResponse);
  });

Dateien zum Herunterladen

• Source Code in GitHub

The post Wie man eine Angular Fassade mit PUSH Architektur programmiert appeared first on Nerd Corner.