REACT als Frontendtechnologie für Fachanwendungen der Walbusch-Gruppe, und deren Integration in eine ERP-Integrationsplattform

Ein großer Punkt ist das Überarbeiten unseres User-Frontends. Beinahe jede Abteilung von Walbusch benutzt ein Programm, welches hausintern entwickelt wurde, um den Arbeitsfluss so effektiv wie möglich gestalten zu können. Bereits vor über 15 Jahren hat Walbusch damit angefangen diese GUIs zu entwickeln und das damals state-of-the-art Framework „Swing“ von Java verwendet. Es wurde also bei jeder kleinsten Änderung eine Java-Application auf jedem Arbeitsrechner von jedem Mitarbeiter neu installiert. Auch wenn die Funktionalität der Apps top und aktuell war, war ihr Design und ihre Menüführung zwischen Windows 98 und XP stecken geblieben.

Nun stellen wir aktuell unser Frontend, App für App, auf eine Web GUI um. Es gibt viele Vorteile, die wir uns dadurch gewinnen. Das Ausliefern der GUI geschieht durch das Updaten der Software auf einem Server und nicht mehr auf jedem einzelnen Rechner unserer vielen Mitarbeiter. So können wir das Deployment der neuen Software direkt begleiten und reagieren, falls etwas schief laufen sollte.

Wie bauen wir uns eine Web-Oberfläche? Die GUI wird in der Entwicklungssprache geschrieben, die sich seit Jahren auf GUI-Design spezialisiert und bewährt hat, nämlich JavaScript mit SCSS zum zentralen Ändern des Look-And-Feels der App. Um unser geliebtes Java nicht gänzlich abzuschreiben, haben wir uns zusätzlich für den Aufsatz TypeScript entschieden. TypeScript gibt uns unsere Typsicherheit zurück. So hat sich uns die große Welt der Web-Entwicklung eröffnet und wir können auf die Erfahrung der größten GUI-Framework-Anbieter zugreifen. Unser Go-To ist React. Das heute „Meta“ genannte Unternehmen hat Facebook und Instagram mit dem damals noch eigenem Framework „React“ entwickelt, welches heute Open-Source ist. Dieses Framework bietet mittlerweile viele Basiskomponenten, die man erweitern und designen kann. Ein weiterer Vorteil ist nun, dass wir UX- und UI-Designer anstellen können, welche sich viel besser in unserer neuen Software-Landschaft zurecht finden. Gerade im Web-Bereich ist eine optimierte GUI und darauf spezialisierte Designer Gang und Gäbe.

Unsere Business-Analysten liefern uns die Vorarbeit, die wir brauchen. Mit dem Fachbereich zusammen erfassen sie deren Arbeitsprozesse und modernisieren diese. In enger Zusammenarbeit mit den Designern werden die Wünsche der Fachbereiche konkretisiert und ausgestaltet.

Ein Beispiel: Unsere Hemden – Sie werden sowohl vom Einkauf in unseren Datenbank eingepflegt, vom Lager versendet und damit deren Bestandszahlen bearbeitet und von der Finanzbuchhaltung und dem Onlineshop-Team mindestens eingesehen. In Swing wurde ein Maskengenerierungs-Tool eingesetzt um die Bedienoberfläche grundlegend zu gestalten. Danach wurde jede Interaktionsmöglichkeit mit der Maske implementiert und als Drittes der Datenfluss definiert, ganz klassisch nach dem bewährten MVC-Muster. Man hat viele Interaktionen immer wieder gleich implementieren müssen und auch die Daten wurden an verschiedensten Stellen manipuliert, was mit der Zeit zu riesigen Analyse-Aufwänden führte, wenn man etwas anpassen oder wiederverwenden wollte.

Projekt Gandalf und Frodo schaffen uns nun eine solide Basis zur zentralen Datenverwaltung durch das Einführen der Walbusch-Integrationsplattform, an die wir alle Um-Systeme anschließen können. So auch das neue Web-Frontend.

React hat seine ganz eigene Art eine GUI aufzubauen. React legt einen hohen Wert auf das Bauen von einzelnen Komponenten, die man einfach wiederverwenden kann, und bricht dafür sogar mit dem viel vertretenen MVC Design. Dieser Aufbau bietet sich gerade durch die Verwendung unserer Integrationsplattform an. Nach diesem neuen Muster ergibt sich eine kleine Komponente, welche die zentrale Schnittstelle ans Backend bildet.
Darauf können sich nun weitere kleine Komponenten stützen, die diese Daten passend zur Schau stellen und sogar ein Default-Design haben können, das dem Look-And-Feel aller Walbusch-Apps entspricht. Von der Bedienung der Backendschnittstelle wissen sie nichts.
Und diese Komponenten kann man nun einfach zu einer Maske zusammen stecken, dies sich nicht mehr mit den Funktionen jeder einzelnen kleinen Komponente befassen muss.
Jede Maske kann sich nun auf eine Aufgabe spezialisieren, sei es das Anlegen von Daten, das Anzeigen von Detailinfos oder einem Dashboard, und dabei viele Komponenten wiederverwenden, die ihren eigenen Funktions- und ggf. Datenfluss haben.

So haben wir bereits eine ansehnliche Bibliothek von React-Komponenten zusammengetragen, welche alle einfach in der Anwendung und Wartung sind.