Redux & Angular: Die Architektur-Alternative zur klassischen MVC-Variante
Interview mit Manuel Mauky

Redux & Angular: Die Architektur-Alternative zur klassischen MVC-Variante

Hartmut Schlosser

Im Umfeld des von Facebook entwickelten React Frameworks ist das Architektur-Muster Redux entstanden. Wir haben uns auf der JAX 2017 mit Manuel Mauky unterhalten, was Redux ist, welche Vorteile es im Zusammenspiel mit Angular bietet und wie gut Redux mit Java-UI-Technologien wie JavaFX funktioniert.

Die Ursprünge von Redux liegen in der Flux-Architektur.

JAXenter: Du hast auf der JAX Redux vorgestellt. Kannst du kurz erläutern, was es damit auf sich hat?

Manuel Mauky: Redux ist ein Frontend-Architekturmuster als Alternative zu klassischen MVC-Varianten. Es bedient sich sehr stark an Konzepten der Funktionalen Programmierung wie Unveränderlichkeit von Daten und puren Funktionen. Gleichzeitig ist Redux auch eine JavaScript-Bibliothek, die dieses Pattern implementiert. Die Ursprünge dieser Idee liegen in der so genannten Flux-Architektur, die bei Facebook entwickelt wurde, im Original aber etwas stärker objektorientiert ist.

JAXenter: Du setzt Redux in Kombination mit Angular ein. Weshalb will man das tun?

Manuel Mauky: Die Vorteile sehe ich in der Nachvollziehbarkeit der Datenflüsse innerhalb der Anwendung. Angular setzt dazu auf einen eher objektorientierten Ansatz, bei dem der Zustand in Services verteilt liegt. UI-Komponenten kommunizieren mit diesen Services, und Services kommunizieren auch untereinander und tauschen dabei Daten aus. Dies kann schnell unübersichtlich werden, so dass sich der Entwickler irgendwann fragt, warum sich die Anwendung jetzt in diesem Zustand befindet, wo die Daten liegen und wie sie dahin gekommen sind.

Lesen Sie auch: „Flux als Architekturidee und Web Components stehen nicht im Widerspruch“

Mit Redux und den dazugehörigen Entwicklertools ist die Nachvollziehbarkeit meines Erachtens wesentlich besser gegeben. Die Daten liegen an einer klar definierten Stelle, und es ist auch klar definiert, wie Nutzer-Interaktionen diese Daten verändern können. Dies erleichtert auch das Finden von Bugs ungemein. Für mich persönlich liegt der Vorteil darin, dass ich damit auch Angular-Anwendungen größtenteils funktional programmieren kann.

JAXenter: Redux stammt ja aus der React-Welt. Was muss man beachten, wenn man es mit Angular einsetzen möchte? Wo liegen die Unterschiede?

Manuel Mauky: Die Unterschiede liegen vor allem darin, wie die Daten aus dem Redux-Store – das ist der zentrale Ort, wo aller Anwendungszustand liegt – zu den UI-Komponenten gelangen. Da React selbst sehr funktional ist, läuft die Anbindung dort ebenfalls recht elegant mit funktionalen Mitteln. Bei Angular nutzt man stattdessen RxJS, also Reactive Streams, um die Daten zum UI zu bringen.

Die Implementierung der UI-Logik an sich läuft genauso nach Redux-Art ab und unterscheidet sich nicht groß von der React-Variante. Man könnte vermutlich einen Großteil des Codes bei einer Migration (in welche Richtung auch immer) gleich übernehmen. Ein Unterschied ergibt sich aber sicherlich dadurch, dass sich Redux in der React-Welt als Quasi-Standard durchgesetzt hat. In der Angular-Community dagegen wird zwar auch aktiv daran entwickelt, aber es ist natürlich noch nicht so weit verbreitet. Das kann Auswirkungen z.B. auf die Unterstützung durch Dritt-Bibliotheken haben.

JAXenter: Geht Redux auch mit dezidierten Java-Technologien – beispielsweise JavaFX?

Manuel Mauky: Das ist eine sehr interessante Frage, die ich mir auch schon vor einiger Zeit gestellt habe. Wie man die Flux-Architektur, also die Ursprungsvariante von Redux, mit JavaFX umsetzen kann, hatte ich ja letztes Jahr bereits auf der JAX und im JavaMagazin gezeigt. Aber mit dem ReduxFX-Projekt, welches von Michael Heinrichs gestartet wurde, befindet sich auch eine echte Redux-Variante für JavaFX in der Entwicklung. Ich halte diesen Ansatz für sehr elegant, war anfangs aber skeptisch, was die Praxistauglichkeit angeht. Der an React angelehnte, sehr funktionale Ansatz dort harmoniert nämlich nicht besonders gut mit FXML, der XML-Beschreibungssprache von JavaFX. Dadurch sind z.B. Entwicklertools wie der SceneBuilder nicht mehr nutzbar.

Inzwischen muss ich meine Ansicht aber revidieren, denn aktuell sind wir dabei, auch diese Lücke zu schließen.

Interessanterweise habe ich die Inspiration dazu, wie das gehen könnte, bei der Beschäftigung mit Angular-Redux bekommen. Denn an dieser Stelle weisen Angular mit seinen Templates und JavaFX mit FXML gewisse konzeptionelle Ähnlichkeiten auf.

JAXenter: Was sollten die Besucher deiner Session auf alle Fälle mit nach Hause nehmen?

Manuel Mauky: Meine Kernbotschaft ist, wie so oft, dass sich der Blick über den Tellerrand lohnt und neben dem Original-Angular-Way auch interessante Alternativen existieren. Und dass Inspiration von anderen GUI-Technologien, hier also React, sehr fruchtbar sein kann. Ganz konkret will ich zeigen, dass mit Redux die UI-Logik besser nachvollziehbar umgesetzt werden kann. Und das ist eben nicht auf React beschränkt, sondern funktioniert auch mit Angular.

JAXenter: Vielen Dank für dieses Gespräch!

Manuel hat in Görlitz Informatik studiert und arbeitet seit 2010 bei der Saxonia Systems AG als Java-Entwickler. Er beschäftigt sich mit allen Bereichen der Anwendungsentwicklung, setzt aber einen Fokus auf den Frontend-Bereich. Daneben interessiert er sich für funktionale Programmierung. Manuel ist außerdem Organisator der Görlitzer Java User Group und regelmäßiger Speaker bei JUGs und Konferenzen.
Geschrieben von
Hartmut Schlosser
Hartmut Schlosser
Hartmut Schlosser ist Redakteur und Online-Koordinator bei Software & Support Media. Seine Spezialgebiete liegen bei Java-Enterprise-Technologien, JavaFX, Eclipse und DevOps. Vor seiner Tätigkeit bei S & S Media studierte er Musik, Informatik, französische Philologie und Ethnologie.
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.