Auf Mikro-Front-End-Architektur basierende Benutzerschnittstelle anpassen

Die grundlegende BenutzeroberflÃ?chenplattform von Sterling Store Engagement ist eine einzige, monolithische Front-End-Anwendung, die mit Angular und dem Bootstrap-Framework aufgebaut ist. In den letzten Jahren ist die Anwendungscodebasis mit neuen Funktionen in jedem Release komplex geworden. Um die Herausforderung nahtloser Angular-Versions-Upgrades in der Cloud zu meistern, unterstützt Sterling Store Engagement die Mikro-Frontend-Architektur. Die Mikro-Front-End-Architektur teilt die monolithische Anwendung in kleinere und logische Module auf, die als Mikro-Front-Ends bezeichnet werden, und sorgt gleichzeitig dafür, dass die Benutzererfahrung einer einzigen Anwendung ähnelt.

Sterling Store Engagement unterstützt mehrere Funktionen, die sich auf die Filialabwicklung und die Bestandsverwaltung erstrecken. Jedes Feature wird als Winkelkomponentenmodul modelliert, das mehrere Routen oder Ansichten enthält. Ziel ist es, jedes Funktionsmodul in einzelne Angular-Anwendungen aufzuteilen, die mit Hilfe von Single-Spa zusammen orchestriert werden.

Jede Einzel-Spa-fähige Winkelanwendung verfügt über eine eigene package.json und steuert ihre eigenen Abhängigkeiten, sodass eine Anwendung unabhängig voneinander aktualisiert werden kann und Sie bei der Durchführung von Cloud-Upgrades unterstützt. Jede einzelne Spa-fähige Winkelanwendung verwendet eine gemeinsame Gruppe von Komponenten und Services über gemeinsam genutzte Widgetbibliotheken. Die Anwendungen nutzen den Status auch über Sitzungsspeicher oder Kontext gemeinsam.

In der neuen Mikro-Frontend-basierten Architektur besteht Sterling Store Engagement aus mehreren Angular-Anwendungspaketen und verwendet eine Vanilla-JS-Anwendung, die auch als Store-Root-App bekannt ist und Single-SPA als Router oder Orchestrator nutzt. Die store-root-app-Anwendung lädt eine bestimmte Angular-Anwendung basierend auf der Route, und daher ist es eine Last, ein Git Repo für jedes Anwendungspaket zu haben. Daher wurde der Mono-Repo-Weg gewählt, bei dem Lerna und Yarn-Workspaces verwendet werden, um den Quellcode aller Anwendungspakete und abhängigen Bibliotheken in einem einzigen Git -Repository zu verwalten.

Lerna versucht, die Verwaltung von npm Links für Multi-Package-Projekte zu vereinfachen, die in einem einzigen Repository gehostet werden, das auch als Monorepo bekannt ist. Es analysiert die Pakete und erstellt automatisch die erforderlichen npm -Links. Es behandelt auch die Ausführung von Tasks über mehrere Pakete hinweg und erleichtert die Versionierung und Veröffentlichung. Im Yarn-Arbeitsbereich können Sie mehrere Pakete einrichten. Wenn Sie den Befehl yarn install ausführen, werden alle Pakete in einem einzigen Arbeitsgang installiert. Lerna delegiert die Verwaltung der Abhängigkeiten an Yarn.

Das folgende Diagramm veranschaulicht die Architektur der Benutzerschnittstelle des Micro-Front-Ends: