Krystoff Beuermann lab25

„In komplexen Anwendungen mit tief verschachtelten Komponenten kann das Durchreichen der Daten zu einer unübersichtlichen Angelegenheit werden.“

React ist eine JavaScript-Bibliothek aus dem Hause Facebook, die sich zunehmender Beliebtheit unter Frontend-Entwicklern erfreut. Diese Beliebtheit führt u. a. dazu, dass Webanwendungen mittlerweile den Stellenwert und die Funktionsvielfalt von Desktopanwendungen besitzen. Immer komplexere Zustandsautomaten bescheren manchen Webentwicklern jedoch schlaflose Nächte. Grund genug, sich React einmal näher anzuschauen.

Im Jahr 2014 stand Facebook mit der technischen Architektur seines sozialen Netzwerks an einem Scheidepunkt. Manche Nutzer waren unzufrieden, denn sie bekamen Benachrichtigungen über eingehende Chatnachrichten angezeigt, obwohl keine neuen Nachrichten vorhanden waren. Die hohe technische und organisatorische Komplexität bei Facebook brachte das gängige Model-View-Controller-(MVC-)Pattern an seine Grenzen. Eine hohe Anzahl von Models kommuniziert mit unzähligen Views, teilweise kreuz und quer und zu guter Letzt noch bidirektional. Das Ganze endete darin, dass sich manche Facebook-Entwickler an bestimmte Codestellen nicht mehr herantrauten in der Angst, einen Fehler in einem völlig anderen Modul hervorzurufen. Eine Lösung musste her, und so schufen die Softwareingenieure von Facebook das Flux-Muster.

Flux

Flux ist keine Software, sondern beschreibt eine Funktionsweise und unterscheidet sich fundamental zum Model View Controller, dem bisherigen Platzhirsch der Softwarearchitekturmuster. Im Gegensatz zu MVC fließen die Daten bei Flux stets nur in eine Richtung. Im Wesentlichen spielen vier Komponenten eine Rolle: Actions, Dispatcher, der Store und die View (Abb. 1).

Abb. 1: Die Flux-Architektur

Abb. 1: Die Flux-Architektur

Der Dispatcher ist die zentrale Einheit, die alle Datenflüsse in einer Flux-Anwendung verteilt. Jeder Store registriert sich beim Dispatcher und übergibt eine Callback-Funktion. Reagiert der Dispatcher auf eine Action, verteilt er deren Daten über die Callbacks an alle Stores, die bei ihm registriert sind. Je komplexer eine Applikation wird, desto wichtiger wird die Rolle des Dispatchers. Sind mehrere Stores vorhanden, kann der Dispatcher die Callbacks in einer vordefinierten Reihenfolge aufrufen. Stores enthalten Zustand und Geschäftslogik der Webapplikation. Sie entsprechen ungefähr der Rolle der Models aus dem MVC. Im Gegensatz zum Model, das im Idealfall nur Daten eines Objekts verwaltet, verwalten die Stores unter Umständen die gesamten Daten der Anwendung.

Mit dieser eher theoretischen Vorstellung über das Flux-Muster trauen wir uns nun an die beliebteste Flux-Umsetzung namens Redux.

 

Den vollständigen Artikel lesen Sie in der Ausgabe:

PHP Magazin 6.18 - "Web-App Quickstart: Web-App samt API und Docker-Container"

Alle Infos zum Heft
579858110Globales State Management mit React, Redux, MobX und dem Context API
X
- Gib Deinen Standort ein -
- or -