Die experten.werkstatt der solutions.hamburg bot Anlass zum fachlichen Austausch unter Softwareexperten. mgm war am 6. September im Rahmen des Developer Days vor Ort und hat den Thementrack „Enterprise Framework auf React gestaltet. Ein Nachbericht.

Vom 6. bis zum 8. September 2017 bevölkerten nicht nur Studenten und Lehrkräfte den Mediencampus der Hochschule für Angewandte Wissenschaften Hamburg. Dazu gesellten sich etliche neugierige ältere Semester mit grünen Badges und Armbändern, die durch die Gänge liefen und lila Pfeilen auf dem roten Linoleumboden folgten. Auslöser dafür war die experten.werkstatt der solutions.hamburg, Deutschlands größtem Digitalisierungskongress. Hier erhielten erfahrene Softwareentwickler und -architekten die Möglichkeit, noch einmal die Bänke in Hörsälen und Seminarräumen zu drücken und ihre Erfahrungen aus der Praxis auszutauschen.

Framework-Begeisterung, Aliens und Picasso

Den Auftakt des Tracks „Enterprise Framework auf React“ am 6. September machte Hamarz Mehmanesh, CEO von mgm, der sehr anschaulich den Kontext und die Motivation erklärte, die bei mgm zu der Entwicklung des modellgetriebenen Frameworks A12 geführt hatte. Ausschlaggebend waren Aufwände, die bei Enterprise-Anwendungen entstehen und durch die auf dem Markt verfügbaren Frameworks nicht reduziert werden konnten. Und das trotz aller Begeisterung, mit der Softwareentwickler immer wieder neue Frameworks evaluieren und mit kleinen Anwendungen testen.

Aus einer überschaubaren Anwendung, die anfangs Formulare mit 300 Feldern beinhaltete, wurde eine erwachsene Anwendung mit 40.000 Feldern und Millionen Validierungsregeln.

Beispiel ELSTER Online: Aus einer überschaubaren Anwendung, die anfangs Formulare mit 300 Feldern beinhaltete, wurde eine erwachsene Anwendung mit 40.000 Feldern und Millionen Validierungsregeln. Um den hohen Aufwand fachlicher Änderungen handhabbar zu machen, entstand die Idee, die fachlichen Inhalte in Modelle auszulagern. Mit speziellen Editoren erhalten Business Experten bzw. Experten aus dem Fachbereich die Möglichkeit, diese Modelle anzupassen – ganz ohne Zutun eines Entwicklers. Weitere Aufwände, die das Framework adressiert, sind die steigenden Anforderungen an Benutzeroberflächen. Hier schilderte Hamarz den Weg von UI/UX-Experten als externe Ressourcen – den Aliens – über den Zwischenschritt als intern geschätzte „Picasso“-Dienstleister bis hin zu tatsächlichen Teamkollegen, die nahtlos in den Entwicklungsprozess eingebunden sind.

Ein perfektes Paar: React und modellgetriebene Entwicklung

Im zweiten Block warfen Baschir Jaghoori und Martin Backschat ausgewählte Schlaglichter auf die Technik des Frameworks. Baschir startete mit einer Live-Demo auf einem Testsystem, die eine mit A12 erstellte Beispielanwendung im Bereich Industrieversicherung zeigte. Geschäftsanwender erwarten demnach ein gewisses „App-Feeling“. Anschließend zeigte er an einigen Code-Beispielen, wie React und die Virtual DOM Technologie im Rahmen des Frameworks eingesetzt wird. So kommt zum Beispiel bei einem Tree-Widget zunächst ein Template für die Komponente zum Einsatz, während bestimmte Features im Code ausgelagert und in einer Kaskade zuschaltbar sind.

Nach Beispielen zu Formularen und Wiederholbarkeit gab Baschir einen Einblick in die modellgetriebenen Aspekte des Frameworks und wie das Rendern mit React damit zusammenfällt: „Wir verstehen die Fachlichkeit als eine Art State. Das Modell ist immer führend, die UI ist abgeleitet.“

Martin setzte eine Ebene höher an und stellte zunächst aktuelle Entwicklungen vor, um ganze Business-Anwendungen modellgetrieben zu bauen. Im Fokus standen dabei architektonische Überlegungen hinsichtlich des Einsatzes von React und der Store-Architektur von Redux. Ausgehend von der Frage, wie sich Elemente auf der Anwendungsebene verdrahten lassen, erklärte Martin die Grundlagen rund um die „Choreographie von Engines“. Eine zentrale Herausforderung: Wie schneidet man die Anwendung? Und welche Aspekte werden überhaupt auf die Anwendungsebene gehoben?

Mittlerweile sind nahezu alle gängigen Praktiken, die Entwickler serverseitig einsetzen, auch im Client nutzbar – sogar Dependency Injection.

Den Abschluss des Blocks bildeten Überlegungen zum React-Ökosystem und inwieweit Konzepte wie Immutability auf die gesamte technische Architektur Einfluss nehmen. Eine Beobachtung zum Schluss: Mittlerweile sind nahezu alle gängigen Praktiken, die Entwickler serverseitig einsetzen, auch im Client nutzbar – sogar Dependency Injection. Das ermöglicht es, in der Client-Architektur eine größere Komplexität beherrschbar zu machen.

Design trifft Entwicklung

Mit Livia Böhme und Fred Funke vervollständigten zwei UI/UX-Experten den Thementrack. Im Mittelpunkt ihres Vortrags stand die Frage: Wie schafft man es, Design in einem Softwarehaus zu integrieren und in den Entwicklungsprozess einzubinden? Livia stellte dafür zunächst die üblichsten Organisationsformen vor. Dabei ist das Thema UI der Entwicklung entweder nachgelagert nach dem Motto „Macht das mal schön“ oder vorgelagert wie im typischen Agenturmodell. Das Problem bei diesen Ansätzen: Es entstehen große Aufwände und Inkonsistenzen. mgm setzte deshalb auf den Ansatz, UI/UX als Teil des agilen Entwicklungsprozesses zu verankern und Überlappungen sowohl in Richtung Business Analyse als auch Entwicklung zu haben. Anhand von Beispielen zeigte Livia, wie diese Organisationsform funktioniert und wie Design-Entscheidungen nachvollziehbar bleiben.

„Lego-Baukasten ohne Anleitung“: Deshalb sind Patterns wichtig – Empfehlungen für das Zusammenspiel verschiedener Komponenten.

Fred thematisierte zunächst die Design-Herausforderungen im Kontext der Framework-Entwicklung. So muss eine komponentenbasierte UI beispielsweise auf die Wiederverwendbarkeit in verschiedensten Kontexten ausgelegt sein und mit verschachtelten Strukturen klarkommen. Außerdem ist die reine Bereitstellung von Komponenten nicht genug. Das wäre wie ein „Lego-Baukasten ohne Anleitung“. Deshalb sind Patterns wichtig – Empfehlungen für das Zusammenspiel verschiedener Komponenten. Livia stellte daraufhin den Widget Showcase vor, der Business Analysten die verfügbaren Komponenten direkt im Browser zeigt und Leitfäden für die Nutzung bereitstellt. Zu guter Letzt führten die UI/UX-Experten den UI Designer vor – den Editor von A12, der den Aufbau der Benutzeroberfläche ermöglicht. Und hier schloss sich der Kreis: Änderungen am UI-Modell führten direkt zu Änderungen der mit React gerenderten Oberfläche im Browser – ohne weiteren Entwicklungsaufwand.