Angular mit Signal Store für komplexe Systeme
Situation
Wir hatten eine selbstgebaute Lösung für State Management, die auf RxJS basierte. Als Grundannahme wurde API-State von UI-State getrennt und in einer Schicht zusammengeführt. Die Lösung funktionierte und hatte Stärken, bspw. in der Typisierung. Sie war jedoch an manchen Stellen unnötig komplex, neue Teammitglieder ließen sich schwer einarbeiten, und die Wartung war aufwendig.
Task
Auf den “Angular Days” in München habe ich den NgRx Signal Store kennengelernt und war direkt überzeugt, dass dieser Ansatz alles beinhaltet, was wir uns vorstellen:
- synchroner State
- Abstraktion von API-State und UI-State
- Injection-Kontext zum Bereitstellen von Services → Auslagern von Businesslogik
- einfache Einbindung in Templates
Action
- Vorstellung des NgRx Signal Store im Team
- Wissensvermittlung und Diskussion der Vor- und Nachteile (Mehraufwand durch neue Abhängigkeit, Einarbeitung in die neue Lösung, ungewohnte funktionale Syntax)
- Implementierung eines Prototyps in einem kleinen Feature, um die Machbarkeit zu prüfen
- Entscheidung, den NgRx Signal Store in einem größeren Feature einzusetzen und die bisherige Lösung zu ersetzen
Result
- Der NgRx Signal Store ist heute die Standardlösung für State Management in unserem zentralen Monorepo.
- In einem TechTalk der Abteilung wurde die Lösung vorgestellt; andere Teams konnten den Store übernehmen.
- Auch in der Architekturberatung anderer Projekte haben wir von den Vorzügen des Signal Store berichtet und die Teams von der Nutzung überzeugt. Die Ergebnisse und das Feedback sind durchweg positiv.
- Der Signal Store ist gut dokumentiert, alle im Team können sich schnell einarbeiten. Zudem wird der Store weiterentwickelt, sodass wir im Laufe der Zeit neue Funktionalitäten in unsere Lösung einarbeiten können.
- Die
rxMethods harmonieren sehr gut mit RxJS, Signals, Apollo GraphQL und einfachen Datentypen gleichermaßen. - Das Team liebt die Lösung; Die Vorbehalte sind ausgeräumt.