enginsight GmbH

Modulare Single Page Application

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)

Das Design der Menüs und die Struktur sollte identisch mit dem bereits existierendem Ui sein. Die Gestaltung der Routen hinter jedem Menüpunkte sollte angelehnt, dennoch funktionaler als das des bestehenden Ui’s werden. Da fast jede Subroute mit einer Übersicht der entsprechenden Daten beginnt die sie anzeigt und diese Daten nach unterschiedlichsten Parametern gefiltert und aber auch sortiert werden können sollten, hab ich eine wiederverwendbare „Datenübersichtskomponente“ entworfen, die mittels einer Suchleiste Filter mit unterschiedlichsten zugehörigen Filtersets erstellt. Des weiteren kann eine Verkettungen von Sortierungen erstellt werden. Jeder Such und Sortier Vorgang wurde mittels eines Chips dargestellt welcher dann geändert, verschoben oder gelöscht werden konnte.

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.

alte ember.js code Struktur. keine Code Teilung. Ladezeit lang (> 2 Sekunden)
neue module federation app in react. Alle haupt Menupunkte sind eigenständige single page applications (SPA). Ladezeit kurz (< 1 Sekunde) ​

Skills

  • Figma
  • Typescript
  • esLint
  • React
  • React-Query
  • React-i18next
  • Webpack + Module Federation
  • OpenAPI + OpenAPI Codegen
  • Lerna
  • Husky
  • Cypress
  • Sketchbook
  • Gitlab + Gitlab-Runner

Tags

React, Webpack, Lerna, Husky, Cypress, SPA, load-balancing, Codegen, OpenApi, Hooks, i18next, internationalisation, performance, reimplementation, modular development, Gitlab, gitlab-runner