Customizing micro front-end architecture-based user interface
The baseline user interface platform of Sterling Store Engagement is a single and 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 become 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: