How-To

Datenmodellierung in Angular: Die Architektur einer Angular-Applikation richtig gestalten

Seite 3 / 3

Angular-Erweiterung: Flux-Architektur und Redux

Mit den Data Services löst Angular das Problem, bestimmte Informationen zentral vorzuhalten. In einer umfangreichen Applikation existieren jedoch meist zahlreiche Data Services parallel. Das wiederum kann unübersichtlich sein. App-Entwickler können dieses Problem mit einer zentralen Stelle umgehen, die den Applikationsstatus hält und überwacht. Dieses Architekturmuster ist vor allem durch die Flux-Architektur von Facebook populär geworden.

Der Ansatz Flux soll die Umsetzung umfangreicher Applikationen mit React – der View-Bibliothek von Facebook – ermöglichen. Reacts Fokus liegt auf der Implementierung von Benutzerschnittstellen und nicht auf der Gesamtarchitektur einer Applikation. Der Kerngedanke von Flux ist es, dass es eine zentrale Stelle gibt, über die sich der Applikationsstatus verändern lässt: den Dispatcher. Bei ihm sind die verschiedenen Stores registriert, die wiederum die Datenlieferanten für die Views der Applikation sind.

Die Views wiederum können über Actions des Dispatchers die Daten der App ändern. Diese Architekturform erzeugt einen zentralen und gerichteten Informationsfluss, mit dem sich selbst sehr große Applikationen umsetzen lassen. Neben dem ursprünglichen Flux gibt es mittlerweile noch weitere Bibliotheken, die dieses Architekturmuster mit einigen Abweichungen oder Erweiterungen implementieren. Eine der Bekanntesten ist Redux.

Die Flux-Architektur lässt sich jedoch nicht nur auf React-Applikationen anwenden, sondern auch mit Angular kombinieren. Dafür binden Entwickler beispielsweise die Redux-Bibliothek in ihre Angular-Applikation ein und können dann auf die Elemente der Bibliothek zugreifen. Im Gegensatz zu Flux legt Redux fest, dass es nur einen Store für die komplette Applikation geben soll. Dadurch können Entwickler, die Redux einsetzen, auf den Dispatcher verzichten und über die Actions direkt mit dem Store interagieren.

Die Actions implementiert man über reduce-Funktionen. Das sind Funktionen, die aus einem initialen State und einer Action einen neuen State erzeugen. Dadurch entsteht automatisch ein immutable State. Das bedeutet, dass Entwickler den State nicht modifizieren, sondern eine neue Repräsentation erzeugen. Durch diesen Ansatz kann das Framework Optimierungen durchführen, da es davon ausgehen kann, dass der State unveränderbar ist.

Natürlich müssen Angular-Nutzer auch hier das Rad nicht neu erfinden, sondern können bereits existierende Implementierungen wie beispielsweise ng2-redux einsetzen. Wer ng2-redux in seine Applikation eingebunden hat, kann ihn über die Dependency Injection wie einen gewöhnlichen Service nutzen.

Verwendung von ng2-redux:

@Component({
 selector: 'account-form',
 templateUrl: 'form.component.html'
})
class FormComponent {
 private account: Account;
  constructor(private ngRedux: NgRedux<IAppState>) {}
 onSave() {
 this.ngRedux.dispatch({ type: ADD, account: this.account });
 }
}

Fazit

Angular macht zwar einige Vorgaben zum Aufbau einer Applikation. Es liegt jedoch am Entwickler, wie er die Datenflüsse in einer App modelliert. Die Spanne der Möglichkeiten ist dabei groß und reicht von einfachen Data Services bis zur Einbindung zusätzlicher Bibliotheken wie Redux. Die meisten Implementierungen setzen auf einen gerichteten Datenfluss und die RxJS-Bibliothek – aus gutem Grund: So lassen sich Applikationen so strukturieren, dass Änderungen und Erweiterungen einfach möglich sind.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung