Next-generation platform

Customizing micro front-end architecture-based user interface

Sterling Store Engagement in the next-generation platform extends access and control of store operations to store associates through an intuitive set of features that spans store fulfillment and inventory management operations along with store-specific customer service activities.

The baseline UI platform of Sterling Store Engagement is a single, monolithic front-end application that is built with Angular and Bootstrap framework. Over the last few years, with addition of new features in each release, the application codebase has becomes complex. To overcome the challenge of seamless angular version upgrades in cloud, Sterling Store Engagement supports micro-frontend architecture. The micro-frontend architecture splits monolithic application into smaller and logical modules called as micro-front-ends, and at the same time keeps the user experience similar to using a single application.

Sterling Store Engagement supports multiple features that spans across store fulfillment and inventory management operations. Each feature is modeled as an angular feature module that contains multiple routes or views. The objective is to break up each feature module into individual angular application, which is orchestrated together by using Single-Spa.

Each single-spa-enabled angular application comes with its own package.json and controls its own dependencies, allowing an application to be upgraded independently and help you complete cloud upgrades. Each single-spa-enabled angular application uses a common set of components and services through shared widget libraries. The applications also share state through session storage or context.

In the new micro front-end-based architecture, Sterling Store Engagement is composed of multiple angular application packages and uses a vanilla JS application that is also known as the store-root-app, which leverages single-spa as a router or orchestrator. The store-root-app application loads a specific angular application based on the route, and thus, having one Git repo for each application package is a burden. Therefore, the mono-repo way was chosen by using Lerna and Yarn workspaces to manage source code of all application packages and dependent libraries in a single Git repository.

Lerna attempts to ease the management of npm links for multi-package projects that are hosted in a single repository that is also known as monorepo. It analyzes the packages and automatically creates the necessary npm links. It also handles execution of tasks across multiple packages and eases the pain of versioning and publishing. The Yarn workspace allows you to set up multiple packages. When you run the yarn install command, all packages are installed in a single pass. Lerna delegates the dependencies management to Yarn.

The following diagram illustrates the micro-frontend user interface architecture:

Architecture of the new micro front-end user interface