„React in großem Stil“

In der experten.werkstatt der solutions.hamburg teilen Baschir Jaghoori und Martin Backschat ihre Erfahrungen mit der Entwicklung eines React-basierten Frameworks. Wir haben vorab mit den Software-Architekten gesprochen.

Redaktion: Baschir und Martin, Ihr entwickelt bei mgm ein Framework auf Basis von React. Was für ein Framework ist das? Und was sind Eure Rollen in dem Projekt?

Martin: Unsere Vision ist es, eine Art Baukasten für Geschäftsanwendungen zu entwickeln. Und zwar modellbasiert in Bereichen wie etwa Formulare inklusive Validierungen und Berechnungen, Listen mit Suchfiltern und Facettierungsmöglichkeiten, und auch für Use-Cases und Layouts für Anwendungen. Das Projekt nennt sich A12. Viele Bausteine haben wir schon client- und serverseitig: zum Beispiel Widgets, Engines zur Interpretation von Modellen zur Laufzeit, Validierungskomponenten, Benutzerverwaltung und Security. Meine Aufgabe ist es aktuell, die Bauteile auf Anwendungsebene zusammenzubringen.

Baschir: Als Architekt für die clientseitige Entwicklung bin ich für alles verantwortlich, was rund um Typescript im Browser läuft. Dazu gehören vor allem auch unsere Engines, die mit Modellen operieren. Die Modelle definieren Teile der Anwendung. Mit React können wir den Laufzeitzustand einfach und stabil in HTML umwandeln.

Redaktion: Wie kam es zu dem Einsatz von React?

Baschir: Ausgangspunkt war eine XForms-Engine, die wir in Kundenprojekten für Formulare genutzt hatten. Die Engine war in Java geschrieben und wurde mit GWT nach JavaScript übersetzt. Wir wollten die Engine auf Basis nativer JavaScript-Technologie in die nächste Generation bringen. Genau zu dieser Zeit kam React auf den Markt, was für uns ein großer Glücksfall war. Es passt hervorragend mit unserem modellbasierten Ansatz zusammen.

Martin: Ausgehend von der Engine für Formulare haben wir uns gefragt: Welche Bereiche der Anwendung finden wir in ähnlicher Form in vielen Kundenprojekten wieder, sind unserer Erfahrung nach gut verstanden und lassen sich über Modelle beschreiben und parametrisieren? So sind weitere Modelle, Engines und Komponenten entstanden, so dass wir nun auf dem Weg sind, komplette Anwendungen abzudecken. React ist dabei clientseitig ein Gamechanger. Man kann einfach Top-Down denken und das rendern, was man sieht. Der Clou bei den Engines: Sie funktionieren von der Idee her so ähnlich wie Redux – als eine Art storebasierte Architektur. Die Formular-Engine nimmt zum Beispiel das Modell und die Daten und präsentiert dann das Formular. Das funktioniert in der Engine ähnlich wie in Redux – größtenteils zustandslos und funktional.

Redaktion: Welche Erfahrungen möchtet Ihr in der experten.werkstatt vermitteln?

Baschir: Wir haben mit der speziellen Art, in der React bei uns zum Einsatz kommt, viel gelernt. Dieses Wissen möchten wir weitergeben und zeigen, wie sich im Enterprise-Kontext eigene Lösungen modellbasiert auf Basis von React, Redux und Typescript aufsetzen lassen. Das ist eine sehr mächtige Kombination.

Martin: Die Art und Weise, wie wir React einsetzen, kann für Enterprise Architekten sehr interessant sein. Wir benutzen nicht nur React als View-Technologie, sondern auch weitere Elemente aus dem React-Ökosystem, darunter Redux für das State-Management. Gerade die Kombination mit Modellen und Engines ist unglaublich spannend für alle Szenarien, in denen mehrere gleichartige Entwicklungsarbeiten anstehen. Die Technologie wird dadurch ganz anders ausgereizt. Nehmen wir Formulare: bei einem Formular lohnt es sich nicht, ein Modell dafür zu entwickeln und eine Engine zu bauen. Bei tausend Formularen mit vielen Varianten und Versionen sieht das aber anders aus. Da gibt es mit dem modellbasierten Ansatz eine enorme Zeit- und Kostenersparnis.

Share