Angular: Die reaktive Architektur meistern mit NgRx und DDD

Was ist Reactive Architecture?

Die Kernidee der reaktiven Architektur besteht darin, dass eine Anwendung nahtlos auf verschiedene Ereignisse reagiert und so eine dynamische und reaktionsschnelle Benutzererfahrung schafft. Diese Ereignisse können aus verschiedenen Quellen stammen, darunter Benutzerinteraktionen wie das Klicken auf Schaltflächen, Eingaben oder Navigation, Systemereignisse wie das Ändern der Fenstergröße oder der Netzwerkstatus sowie Backend-Antworten wie das Empfangen von API-Daten oder Push-Benachrichtigungen.

In einer Angular Reactive Architecture lösen solche Ereignisse typischerweise Aktionen in NgRx aus, die Änderungen im Store initiieren. Der Store fungiert als Single Source of Truth für die Frontend-Anwendung, ähnlich einer Datenbank für die Benutzeroberfläche. Er ist in mehrere State-Slices unterteilt, die jeweils einen bestimmten Bereich der Anwendungsdaten repräsentieren. Ein Slice kann beispielsweise für die Benutzer-Authentifizierung zuständig sein, während ein anderer die Produktdaten verwaltet.

State-Selectoren spielen eine zentrale Rolle in dieser Architektur. Sie überwachen Änderungen im Store und extrahieren effizient bestimmte State-Bereiche, die von der Anwendung benötigt werden. Wenn eine Änderung im Store auftritt – sei es durch eine Benutzeraktion oder ein Backend-Ereignis –, geben die entsprechenden Selektoren Updates aus. Diese Updates veranlassen die Angular-Komponenten, nur die betroffenen UI-Bereiche zu aktualisieren, wodurch unnötige Neurenderings vermieden und die Anwendung synchron mit den zugrunde liegenden Daten gehalten wird.

Durch die Kombination der reaktiven Natur von RxJS, der State-Management-Fähigkeiten von NgRx und des komponentenbasierten Designs von Angular entsteht eine leistungsstarke, eventgesteuerte Benutzererfahrung, die sich hervorragend für komplexe Anwendungen skalieren lässt.

Warum reaktive Architektur anstelle traditioneller Ansätze?

Traditionelle Webanwendungen folgen oft einem imperativen Ansatz, bei dem Benutzeraktionen API-Aufrufe auslösen, die Antworten die UI aktualisieren und Komponenten direkt mit Funktionen arbeiten, um den State zu ändern. Dies kann zu stark gekoppelten Komponenten, unvorhersehbaren Zustandsänderungen und Leistungsproblemen führen.

Reaktive Architektur hingegen ermöglicht einen deklarativen Ansatz, bei dem Änderungen durch einen unidirektionalen Datenstrom fließen. Anstatt aktiv Daten abzurufen oder den State zu ändern, reagieren Komponenten einfach auf State-Änderungen, die vom Store ausgegeben werden. Dies macht Anwendungen vorhersehbarer, testbarer und besser geeignet für Echtzeit-Updates.

Bausteine der Angular Reactive Architecture

Die Domain-Schicht bildet das Fundament der Anwendung und verwaltet die Geschäftslogik, das State-Management und die Backend-Kommunikation. Sie besteht aus dem NgRx-Store, der als Single Source of Truth dient. Dieser speichert sowohl UI-spezifische Informationen (z. B. ob eine Seitenleiste geöffnet ist) als auch Remote-Daten, die vom Backend abgerufen werden, wie Benutzerprofile.

Selectoren extrahieren und transformieren Rohdaten in ein optimiertes Format für die Komponenten. Effects verwalten asynchrone Prozesse wie API-Aufrufe oder Logging, sodass Komponenten auf die reine Darstellung fokussiert bleiben. Services übernehmen die Backend-Kommunikation, darunter API-Anfragen und Authentifizierung. Facades bieten eine Schnittstelle für Komponenten, indem sie Datenströme aus Selektoren und Trigger-Funktionen über Actions bereitstellen.

Die Feature-Schicht enthält smarte Komponenten (Container-Komponenten), die Facades nutzen, um Daten zu subscriben oder Aktionen auszulösen. Diese Komponenten verwalten spezifische Logik wie das Filtern einer Produktliste, greifen aber nicht direkt auf den State zu.

Die UI-Schicht konzentriert sich ausschließlich auf die Darstellung. Komponenten erhalten Daten über @Input und geben Ereignisse über @Output aus. Sie enthalten keinerlei Geschäftslogik und sind dadurch hochgradig wiederverwendbar.

Codebeispiele für zentrale Konzepte

NgRx-Selector zum Filtern von Produkten

import { createSelector } from '@ngrx/store';
import { AppState } from '../reducers';

export const selectProducts = (state: AppState) => state.products;

export const selectAvailableProducts = createSelector(
  selectProducts,
  (products) => products.filter(product => product.available)
);

Komponenten, die auf diesem Selektor subscriben, werden automatisch aktualisiert, wenn sich der Produktstatus ändert.

API-Aufrufe effizient mit Effects verwalten

import { Actions, createEffect, ofType } from '@ngrx/effects';
import { ProductService } from '../services/product.service';
import { fetchProducts, fetchProductsSuccess } from '../actions/product.actions';
import { mergeMap, map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

export class ProductEffects {
  loadProducts$ = createEffect(() =>
    this.actions$.pipe(
      ofType(fetchProducts),
      mergeMap(() =>
        this.productService.getProducts().pipe(
          map(products => fetchProductsSuccess({ products })),
          catchError(() => of({ type: '[Product] Load Failed' }))
        )
      )
    )
  );

  constructor(private actions$: Actions, private productService: ProductService) {}
}

So werden API-Anfragen effizient verarbeitet und unnötige doppelte Anfragen vermieden.

Leistungsoptimierung mit Change Detection

Die reaktive Architektur funktioniert am besten in Kombination mit Angulars OnPush Change Detection-Strategie. Standardmäßig überprüft Angular die gesamte Komponentenstruktur auf Änderungen, was in großen Anwendungen ineffizient sein kann.

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductListComponent {
  @Input() products: Product[];
}

Mit ChangeDetectionStrategy.OnPush wird die Komponente nur aktualisiert, wenn sich die Referenz der Eingabeparameter ändert, was unnötige Neurenderings verhindert.

Wie andere Branchen reaktive Architektur nutzen

Netflix nutzt reaktive Architektur, um riesige Mengen an Streaming-Daten zu verwalten und eine nahtlose Videowiedergabe zu ermöglichen. Google setzt RxJS und reaktives State-Management in Gmail und Google Docs für Echtzeit-Updates und Kollaborationsfunktionen ein. Banken und Finanzinstitute verwenden ähnliche Prinzipien zur Echtzeit-Verarbeitung von Transaktionen und Börsendaten.

Fazit: Warum Angular Reactive Architecture die Zukunft ist

Angular Reactive Architecture, basierend auf NgRx, RxJS und Domain-Driven Design, bietet eine skalierbare, wartbare und leistungsstarke Lösung für moderne Webanwendungen. Durch klare Trennung der Verantwortlichkeiten, optimierte State-Verwaltung und die Nutzung reaktiver Prinzipien können Teams robuste und zukunftssichere Anwendungen entwickeln. 🚀