Wie man eine Router-First Enterprise-Anwendung erstellt

Die Architektur und Entwicklung von Unternehmensanwendungen stellt sowohl technische als auch organisatorische Herausforderungen. Besonders hervorzuheben ist dabei der Ansatz der Router-First Architektur, die in modernen Webanwendungen zunehmend an Bedeutung gewinnt. Dieser Ansatz fokussiert sich darauf, dass das Routing von Anfang an eine zentrale Rolle im Design und der Entwicklung der Anwendung spielt. Im Gegensatz zu herkömmlichen Architekturen, bei denen das Routing oft eine nachgelagerte Funktion ist, bildet der Router in einer Router-First-Anwendung die Grundlage für die Struktur und Navigation der gesamten Applikation.

Zunächst einmal ist es entscheidend, ein tiefes Verständnis für die geschäftlichen Anforderungen und die Auswirkungen der technischen Entscheidungen auf die Geschäftsziele zu entwickeln. Eine Router-First Architektur fördert eine klare Trennung der Module und ermöglicht eine fein abgestimmte Kontrolle über die Ladeprozesse der verschiedenen Teile der Anwendung. Dies ist besonders wichtig in großen Anwendungen, die mit zahlreichen verschiedenen Rollen und umfangreichen Geschäftslogiken arbeiten.

Ein zentraler Aspekt dieser Architektur ist die Verwendung von Lazy Loading und Feature Modules, um die Performance zu optimieren und die Anwendung modular aufzubauen. Jedes Modul wird nur dann geladen, wenn es tatsächlich benötigt wird, was nicht nur die Ladezeit reduziert, sondern auch die Wartbarkeit der Anwendung verbessert. Durch die konsequente Anwendung von Feature-Modulen wird eine hohe Wiederverwendbarkeit des Codes erreicht, was besonders in großen, komplexen Anwendungen von Vorteil ist.

Die Entwicklung eines "Walking Skeleton" ist ein zusätzlicher wichtiger Schritt bei der Implementierung dieser Architektur. Dieser minimal funktionsfähige Prototyp ermöglicht es, schnell eine rudimentäre Version der Anwendung zu erstellen, die dennoch die grundlegendsten Funktionen wie Routing und die Kommunikation zwischen den Modulen integriert. Der Vorteil dieses Vorgehens ist, dass frühe Tests und Feedback in den Entwicklungsprozess integriert werden können, wodurch spätere Fehler und Umstellungen vermieden werden.

Die Wahl der richtigen Tools und Frameworks für die Umsetzung ist ebenfalls von entscheidender Bedeutung. In modernen Webanwendungen hat sich Angular als eine der bevorzugten Lösungen für Enterprise-Anwendungen etabliert. Durch die Nutzung von Angulars eingebauten Funktionen wie dem Router-Modul, Lazy Loading und Angular Material für das Design, lässt sich eine solide Grundlage für die Anwendung schaffen. Auch die Integration von TypeScript und ES6 sorgt für eine robuste und skalierbare Codebasis, die den modernen Standards entspricht.

Ein weiterer wesentlicher Aspekt bei der Gestaltung einer Enterprise-Anwendung ist die Benutzer- und Rollenverwaltung. Eine präzise Identifikation und Definition von Benutzerrollen sowie die Zuordnung von entsprechenden Berechtigungen ist unerlässlich für die sichere und effiziente Nutzung der Anwendung. In Verbindung mit einem gut durchdachten Authentifizierungs- und Autorisierungsworkflow kann so eine reibungslose Benutzererfahrung gewährleistet werden, ohne die Sicherheit zu gefährden.

Die Verwendung von Tools wie GitHub und Kanban zur Planung und Organisation des Projekts hat sich als äußerst effektiv erwiesen. Diese Werkzeuge helfen nicht nur dabei, die Aufgaben zu priorisieren und den Entwicklungsprozess zu steuern, sondern fördern auch eine bessere Zusammenarbeit im Team. Ein klar definierter Entwicklungsprozess und die kontinuierliche Überprüfung der Fortschritte sind entscheidend für den Erfolg eines Projekts.

Für Unternehmen, die komplexe Geschäftsanwendungen entwickeln, ist es von großer Bedeutung, die Architektur und das Design von Anfang an auf Skalierbarkeit und Wartbarkeit auszurichten. Die Router-First-Architektur ist eine der besten Methoden, um eine solche Basis zu schaffen. Sie stellt sicher, dass die Anwendung sowohl heute als auch in Zukunft einfach erweitert und optimiert werden kann.

Es ist jedoch wichtig, nicht nur den technischen Aspekt zu betrachten. Die gesamte Architektur muss immer mit den Geschäftszielen und den Anforderungen der Benutzer im Einklang stehen. Auch die Einbindung von Design- und Usability-Tests ist für den Erfolg der Anwendung von großer Bedeutung. Denn nur wenn die Anwendung die Bedürfnisse der Endnutzer erfüllt und gleichzeitig den technischen Anforderungen gerecht wird, kann sie langfristig erfolgreich sein.

Wie man Speicherlecks in Angular mit RxJS vermeidet und den reaktiven Programmieransatz optimiert

Die Methode first() eignet sich besonders gut, wenn ein Observable nur einmalige Daten liefern soll, wie zum Beispiel beim Abrufen des aktuellen Wetters. In diesem Fall wird die Stream-Aktualisierung nach der ersten Antwort abgeschlossen, was dazu beiträgt, dass keine unnötigen Daten verarbeitet oder Speicherressourcen beansprucht werden. Ein Beispiel für die Implementierung dieser Methode zeigt das folgende Code-Snippet:

typescript
Copy code
import { map, switchMap, first } from 'rxjs/operators';

export class WeatherService implements IWeatherService {

  updateCurrentWeather(searchText: string, country?: string): void {
    this.getCurrentWeather(searchText, country)
      .pipe(first())
      .subscribe((weather) => this.currentWeather$.next(weather));
  }
}

Die zweite Methode, takeUntilDestroyed(), ist nützlich für Komponenten, die mehrfach aktualisiert werden müssen. Angenommen, eine Komponente wie CurrentWeatherComponent muss nach jeder Benutzerinteraktion aktualisiert werden, zum Beispiel nach einer neuen Eingabe im Suchfeld. Hier möchten wir den Stream aktiv halten, solange die Komponente existiert, aber nicht darüber hinaus, um unnötige Speicherbelastung zu vermeiden. Ein Beispiel für den Einsatz von takeUntilDestroyed() in einer Komponente sieht wie folgt aus:

typescript
Copy code
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class CurrentWeatherComponent implements OnInit {

  private destroyRef = inject(DestroyRef);
  ngOnInit(): void {
    this.weatherService
      .getCurrentWeather('Bethesda', 'US')
      .pipe(takeUntilDestroyed(this.destroyRef))

      .subscribe((data) => (this.current = data));

  }
}

Hier wird takeUntilDestroyed() verwendet, um den Observable-Stream zu beenden, sobald die Komponente zerstört wird. Die Methode nutzt DestroyRef, der automatisch die Zerstörung der Komponente überwacht und den Stream abschließt. Dies stellt sicher, dass die Komponente während ihrer Lebensdauer weiterhin aktualisiert werden kann, jedoch ohne das Risiko eines Speicherlecks.

Ein bedeutender Vorteil dieser beiden Methoden ist die Erleichterung der Verwaltung von Subscriptionen. Anstatt explizit den unsubscribe()-Befehl zu verwenden, was fehleranfällig sein kann, ist der Abschluss des Streams bei der Zerstörung der Komponente oder nach der ersten Antwort durch diese Strategien automatisch gewährleistet. Das bedeutet, dass der Code einfacher zu pflegen ist, da keine komplexen Mechanismen zur Verwaltung von Abonnements erforderlich sind.

Ein weiterer wichtiger Aspekt im Umgang mit RxJS in Angular ist der reaktive Programmieransatz. Wie bereits in Kapitel 1 behandelt, sollte das Abonnieren eines Observables in Angular nur dann erfolgen, um den Stream zu aktivieren. Wenn der subscribe()-Befehl in einem Code verwendet wird, ohne dass er notwendig ist, wird der Code imperativ und widerspricht dem reaktiven Programmieransatz. In einer reaktiven Umgebung sollte das Abonnement nur durch den reaktiven Fluss des Datenstroms gesteuert werden, nicht durch direkte Imperative in der Logik der Komponente.

typescript
Copy code
export class CurrentWeatherComponent {
  current$: Observable<ICurrentWeather>;
  constructor(private weatherService: WeatherService) {

    this.current$ = this.weatherService.currentWeather$;

  }
}

Im Template der Komponente kann der async-Pipe verwendet werden, um den aktuellen Wetterbericht direkt zu binden:

html
Copy code
<div *ngIf="current$ | async as current">
  {{ current | json }}
</div>

Darüber hinaus kann auch die Verwendung von Operators wie debounceTime, filter und tap helfen, den reaktiven Fluss noch weiter zu optimieren, insbesondere wenn es um die Verarbeitung von Benutzereingaben geht. In einem Beispiel wie dem CitySearchComponent, das die Eingabewerte des Benutzers überwacht, kann der reaktive Ansatz die Notwendigkeit von manuellen subscribe()-Methoden eliminieren und gleichzeitig eine saubere, wartbare Lösung bieten:

typescript
Copy code
import { debounceTime, filter, tap } from 'rxjs/operators';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
export class CitySearchComponent {
  search = new FormControl('', [Validators.required, Validators.minLength(2)]);
  constructor(private weatherService: WeatherService) {
    this.search.valueChanges
      .pipe(
        takeUntilDestroyed(),

        filter(() => this.search.valid),

        debounceTime(1000),
        tap((searchValue: string) => this.doSearch(searchValue))
      )
      .subscribe();
  }
  doSearch(searchValue: string) {
    const userInput = searchValue.split(',').map(s => s.trim());
    const searchText = userInput[0];

    const country = userInput.length > 1 ? userInput[1] : undefined;

    this.weatherService.updateCurrentWeather(searchText, country);
  }
}

Die Verwendung von debounceTime stellt sicher, dass nicht bei jeder Eingabe sofort eine Anfrage an den Wetterdienst gesendet wird, sondern erst nach einer kurzen Verzögerung, was die Benutzererfahrung verbessert und unnötige Anfragen vermeidet. Der filter-Operator sorgt dafür, dass nur gültige Suchanfragen weiterverarbeitet werden, und der tap-Operator wird verwendet, um die Suchanfrage zu initiieren, ohne den Stream zu beeinflussen.

Es ist entscheidend, dass Entwickler den reaktiven Ansatz konsequent anwenden, um die Wartbarkeit und Skalierbarkeit von Angular-Anwendungen zu gewährleisten. Das Bewusstsein für die effiziente Verwaltung von Observables, das Vermeiden von Speicherlecks und das Abonnieren von Streams nur dann, wenn es unbedingt notwendig ist, ist ein zentraler Bestandteil dieser Praxis.

Wie man mit Berechnungen in Angular umgeht, ohne die Leistung zu beeinträchtigen

Die Berechnung von Werten in Angular-Komponenten ist ein häufiger Bestandteil der Entwicklung, doch bestimmte Implementierungen können die Performance negativ beeinflussen. Besonders dann, wenn ein Wert wiederholt in der Vorlage verwendet wird und Angulars Change Detection häufig aufgerufen wird, kann dies zu signifikanten Leistungsproblemen führen. Ein klassisches Beispiel ist die Berechnung des Alters anhand des Geburtsdatums. In einer typischen Angular-Komponente könnte die Implementierung wie folgt aussehen:

typescript
Copy code
get age() {

  return this.now.getFullYear() - this.dateOfBirth.getFullYear();
}

Diese Methode nutzt getFullYear() von this.now und this.dateOfBirth, um das Alter des Nutzers zu berechnen. Wenn diese Berechnung jedoch als Eigenschaft in der Vorlage verwendet wird, kann Angular die age-Eigenschaft bis zu 60 Mal pro Sekunde aufrufen, da die Change Detection ständig den Status der Komponente überprüft. Dies kann zu ernsthaften Performanceproblemen führen, besonders bei größeren oder komplexeren Anwendungen.

Um dieses Problem zu lösen, gibt es mehrere Ansätze. Eine Möglichkeit besteht darin, einen „Pure Pipe“ zu erstellen. Eine „Pure Pipe“ ist eine benutzerdefinierte Pipe, die von Angular nur dann neu berechnet wird, wenn sich ein abhängiger Wert ändert. Das bedeutet, dass Angular die Altersberechnung nur dann erneut durchführen muss, wenn sich das Geburtsdatum des Nutzers ändert. Weitere Informationen zu „Pure Pipes“ und deren Funktionsweise finden Sie auf der Angular-Website Pure Pipes.

typescript
Copy code
now = new Date();
dateOfBirth = signal(this.formGroup.get('dateOfBirth')?.value || this.now);
age = computed(() => this.now.getFullYear() - this.dateOfBirth().getFullYear());

Ein wichtiger Punkt bei der Verwendung von Signalen und berechneten Signalen ist jedoch, dass diese Technik derzeit nicht direkt mit reaktiven Formularen in Angular verwendet werden kann, da FormGroup und FormArray nicht mit Signalen kompatibel sind. Dies zeigt, wie tiefgreifend Signale Angular verändern und wie sorgfältig deren Integration in bestehende Formulare und Komponenten geplant werden muss.

Neben der Optimierung der Performance beim Berechnen von Alter oder anderen abgeleiteten Werten, ist es ebenfalls wichtig, dass Entwickler bei der Validierung von Daten auf Konsistenz und genaue Anforderungen achten. Zum Beispiel könnte eine Validierung des Geburtsdatums wichtig sein, um sicherzustellen, dass der Nutzer nicht ein Datum in der Zukunft oder ein unrealistisches Alter eingibt. Eine einfache Möglichkeit, dies umzusetzen, wäre die Einführung einer minimalen Altersgrenze, die verhindert, dass ein Geburtsdatum mehr als 100 Jahre zurückliegt:

typescript
Copy code
minDate = new Date(this.now.getFullYear() - 100, this.now.getMonth(), this.now.getDate());

Diese Validierung könnte direkt im HTML-Template eingebunden werden, um sicherzustellen, dass das Geburtsdatum innerhalb eines bestimmten Zeitrahmens liegt. Solche Validierungen tragen dazu bei, die Benutzererfahrung zu verbessern und Fehler zu vermeiden, die zu falschen oder inkonsistenten Daten führen könnten.

Des Weiteren sollte beachtet werden, dass die Verwendung von Formularen in Angular nicht nur das Eingeben und Verarbeiten von Benutzerdaten umfasst, sondern auch die Notwendigkeit, interaktive Elemente wie Autocomplete-Listen oder dynamische Formulareingabefelder zu unterstützen. Beispielsweise kann der Typahead-Filter für Adressdaten eine bessere Benutzererfahrung bieten, indem er den Nutzer beim Eingeben des Bundesstaates unterstützt und eine Dropdown-Liste der möglichen Werte anzeigt:

typescript
Copy code
const state = this.formGroup.get('address.state');

if (state != null) {
  this.states$ = state.valueChanges.pipe(
    startWith(''),
    map((value) => USStateFilter(value))
  );
}

In diesem Fall wird ein Filter auf die Eingabewerte angewendet, um nur gültige Bundesstaaten anzuzeigen, wodurch die Eingabe des Benutzers effizienter und weniger fehleranfällig wird. Das Template zur Anzeige des Autocomplete-Feldes würde dann wie folgt aussehen:

html
Copy code
<input matInput [matAutocomplete]="auto" formControlName="state" />

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let state of states$ | async" [value]="state.name">
    {{ state.name }}
  </mat-option>
</mat-autocomplete>

typescript
Copy code
phones: this.formBuilder.array(this.buildPhoneArray(user?.phones || [])),

Dies ermöglicht es, für jede Telefonnummer ein separates Formularsteuerelement zu erstellen und bei Bedarf hinzuzufügen. Ein zusätzliches Eingabefeld für eine neue Telefonnummer kann dann einfach über eine Schaltfläche hinzugefügt werden:

typescript
Copy code
addPhone() {

  this.phonesArray.push(this.buildPhoneFormControl(this.formGroup.get('phones').value.length + 1));
}

Die Verwendung von FormArray bietet den Vorteil, dass es eine einfache Möglichkeit zur Verwaltung dynamischer Formulareingaben bietet, die auf Benutzerinteraktionen reagieren.