...loading...
Enginsight
Modulare Single Page Application
React
MUI
Git
Typescript
Webpack
Cypress
Die enginsight GmbH suchte nach einem neuen Ansatz, für ihre komplexe Nutzeroberfläche mit Hauptaugenmerk auf: bessere Benutzerfreundlichkeit, mehr Geschwindigkeit, besserer Skalierbarkeit und breiterem Funktionsumfang.
Kurzbeschreibung
Als Security Dienstleister für Digitale Infrastrukturen ist die enginsight GmbH ein aufstrebendes Unternehmen welches mit hochkomplexen Daten agiert und ihren Nutzern schnelles zielgerichtetes reagieren ermöglichen muss.
Gestaltung
(aus rechtlichen Gründen dürfen hier keine realen Bilder des Frontend gezeigt werden. Ich bitte um Verständnis)
Umsetzung
Da die bestehende Benutzeroberfläche als „Mega-App“ bereits die Nachteile in Entwicklung und Geschwindigkeit zeigt, habe ich mich entschloßen das Konzept der Webpack Module-Federation anzuwenden. Nach diesem Prinzip habe ich eine Login-App entwickelt, welche nach erfolgreichem login erst die Container App läd, in die dann jede Subroute als eigenständige SPA-App dynamisch eingehangen wird. Als Techstack habe ich für die Benutzeroberfläche React mit Material Ui (mui) gewählt. Dadurch konnte die Hauptstruktur der App(s) schnell aufgebaut und mittels Theme angepasst werden.
Product Owner
Die Planung der Entwicklung und die Umsetzung und vorallem auch die Nachvollziebarkeit der Entwicklungsschritte, habe ich durch überlegte Tickets und Milesstones unterteilt. Dabei habe ich die Datenstrucktur der bestehenden Api (ohne Dokumentation) durch dringen müssen. Als einzige Grundanforderung habe ich eine Swagger Configuration im OpenApi standard und deren Erweiterung angefordet um eine klare Projektsturktur zu gewährleisten.
Tech Stack
Das Augenmerk sollte auf einer erweiterbaren und vorallem wartbaren Struktur liegen. Dazu habe ich mich für React mit Typescript entschieden. Als State Management habe ich ReactQuery verwendet und mittels dem openapi-codegen und der api-swagger die gesamte kommunikation zur Api einwandfrei generiert. Um erstmal eine schnelle Umsetzung zu gewährleisten habe ich mich für MUI Componenten entschieden, die Anschließend an das CI per Theme angepasst wurden. Webpack diente als Bundler zusammen. Jede Route der App