© Excellent backgrounds/Shutterstock.com
Java Magazin
Flux-Architektur mit JavaFX

Alles ist im Fluss

In den letzten Jahren hat Facebook mit seiner JavaScript-Bibliothek React für einiges Aufsehen bei Frontend-Entwicklern gesorgt. Denn bei React werden einige altbekannte Muster und Best Practices kritisch hinterfragt, verworfen und neu gedacht. Mit der Flux-Architektur bietet Facebook auch einen Architekturansatz für React als Alternative zum klassischen Model View Controller an. Die Grundidee dieser Architektur ist aber nicht auf React oder JavaScript beschränkt, sondern kann auch für JavaFX-Entwickler interessant sein.

Manuel Mauky


Zu den größten Herausforderungen von Frontend-Entwicklern zählt der Umgang mit veränderlichen Zuständen. Im klassischen Model View Controller befindet sich der Applikationszustand im Modell. Aber auch UI-Komponenten an sich besitzen natürlich einen Zustand, der bei Änderungen im Modell gezielt aktualisiert werden muss. Gezielt bedeutet hier, dass nur die Komponenten aktualisiert werden, die von der konkreten Änderung der Anwendungsdaten auch tatsächlich betroffen sind. Aber auch die andere Richtung der Kommunikation ist wichtig: Der Nutzer interagiert mit der View, um letztlich wiederum den Applikationszustand zu verändern. Wie die konkrete Ausgestaltung dieser Aspekte aussieht, ist Gegenstand der verschiedenen MVC-Varianten.

Im Web ist es ähnlich. Seit Ajax werden Daten dynamisch vom Server geladen und gezielt in den DOM-Baum der Seite eingefügt. Während das für einfache Beispielanwendungen mit purem JavaScript machbar ist, kommt man bei komplexeren Anwendungen kaum ohne ein Framework aus, das die DOM-Manipulation einfacher macht. Vor Ajax sah die Welt dagegen noch einfach aus. Bei geänderten Daten musste die gesamte Webseite neu geladen und gerendert werden. Der alte clientseitige Zustand in Form des DOMs wurde verworfen und durch einen komplett neuen ersetzt. In gewisser Weise bringen React und die Flux-Architektur dieses einfache Denkmodell wieder zurück in die Gegenwart.

Bei Flux befinden sich der Anwendungszustand und die Logik zum Verändern dieses Zustands in so genannten Stores. Stores sind allerdings nicht spezifisch für eine Ansicht, sondern repräsentieren eine fachliche Einheit. Views sind bei Flux weitestgehend zustandslos. Sie zeigen lediglich die Daten der Stores an. Ändern sich die Daten des Stores, wird die View neu gezeichnet. Entwickler müssen sich keine Gedanken darüber machen, welche UI-Komponente gerade welche Information anzeigt und welche UI-Updates notwendig sind, um die Oberfläche wieder auf den aktuellen Stand zu bringen. Stattdessen wird nur definiert, wie der Anwendungszustand auf UI-Komponenten abgebildet wird. Gedanklich nähert man sich damit den Ideen der funktionalen Programmierung an, die sonst ja eher selten mit dem Frontend in Verbindung gebracht wird.

Tatsächlich gibt es natürlich gute Gründe, warum wir heute nicht mehr ständig den Refresh-Button des Browser benutzen, sondern von modernen Anwendungen erwarten, dass sie sich dynamisch anpassen. Hier kommt React ins Spiel: Diese Bibliothek stellt dem oder der Entwickler/in...

Java Magazin
Flux-Architektur mit JavaFX

Alles ist im Fluss

In den letzten Jahren hat Facebook mit seiner JavaScript-Bibliothek React für einiges Aufsehen bei Frontend-Entwicklern gesorgt. Denn bei React werden einige altbekannte Muster und Best Practices kritisch hinterfragt, verworfen und neu gedacht. Mit der Flux-Architektur bietet Facebook auch einen Architekturansatz für React als Alternative zum klassischen Model View Controller an. Die Grundidee dieser Architektur ist aber nicht auf React oder JavaScript beschränkt, sondern kann auch für JavaFX-Entwickler interessant sein.

Manuel Mauky


Zu den größten Herausforderungen von Frontend-Entwicklern zählt der Umgang mit veränderlichen Zuständen. Im klassischen Model View Controller befindet sich der Applikationszustand im Modell. Aber auch UI-Komponenten an sich besitzen natürlich einen Zustand, der bei Änderungen im Modell gezielt aktualisiert werden muss. Gezielt bedeutet hier, dass nur die Komponenten aktualisiert werden, die von der konkreten Änderung der Anwendungsdaten auch tatsächlich betroffen sind. Aber auch die andere Richtung der Kommunikation ist wichtig: Der Nutzer interagiert mit der View, um letztlich wiederum den Applikationszustand zu verändern. Wie die konkrete Ausgestaltung dieser Aspekte aussieht, ist Gegenstand der verschiedenen MVC-Varianten.

Im Web ist es ähnlich. Seit Ajax werden Daten dynamisch vom Server geladen und gezielt in den DOM-Baum der Seite eingefügt. Während das für einfache Beispielanwendungen mit purem JavaScript machbar ist, kommt man bei komplexeren Anwendungen kaum ohne ein Framework aus, das die DOM-Manipulation einfacher macht. Vor Ajax sah die Welt dagegen noch einfach aus. Bei geänderten Daten musste die gesamte Webseite neu geladen und gerendert werden. Der alte clientseitige Zustand in Form des DOMs wurde verworfen und durch einen komplett neuen ersetzt. In gewisser Weise bringen React und die Flux-Architektur dieses einfache Denkmodell wieder zurück in die Gegenwart.

Bei Flux befinden sich der Anwendungszustand und die Logik zum Verändern dieses Zustands in so genannten Stores. Stores sind allerdings nicht spezifisch für eine Ansicht, sondern repräsentieren eine fachliche Einheit. Views sind bei Flux weitestgehend zustandslos. Sie zeigen lediglich die Daten der Stores an. Ändern sich die Daten des Stores, wird die View neu gezeichnet. Entwickler müssen sich keine Gedanken darüber machen, welche UI-Komponente gerade welche Information anzeigt und welche UI-Updates notwendig sind, um die Oberfläche wieder auf den aktuellen Stand zu bringen. Stattdessen wird nur definiert, wie der Anwendungszustand auf UI-Komponenten abgebildet wird. Gedanklich nähert man sich damit den Ideen der funktionalen Programmierung an, die sonst ja eher selten mit dem Frontend in Verbindung gebracht wird.

Tatsächlich gibt es natürlich gute Gründe, warum wir heute nicht mehr ständig den Refresh-Button des Browser benutzen, sondern von modernen Anwendungen erwarten, dass sie sich dynamisch anpassen. Hier kommt React ins Spiel: Diese Bibliothek stellt dem oder der Entwickler/in...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang