Routing
The single-SPA has a layout engine that can be installed via the single-spa-layout npm package. It provides a routing API to manage the top-level routing. The layout engine is a built-in feature by the single-SPA library to implement the routing of MFes.
The design may have an MFe for navigation only, and the layout needs to be defined in the root application’s index.html file. The library has a well-defined list of APIs for the layout flow.
Inter-app Communication
A good architecture is one in which micro frontends are decoupled and do not need to frequently communicate. Route-based single-spa applications inherently require less inter-app communication.”
An MFe design is where there are significantly fewer inter-app communications.
Below are the points where two MFes need to communicate:
Functions, components, logic, and environment variables
The public interface must be created to share a function, component, logic, or environment variable.
API Data
It’s not recommended to share the API data between MFes. Instead, if needed, an in-memory JavaScript cache of API objects is the way.
UI State
The UI state is not supposed to be shared between MFes. If two MFes frequently share the UI states, they should be merged into one MFe. Still, if at some point it’s required, then, RxJS, Custom Events, or sub-sub are the available options.
State Management
You shouldn’t use the single-SPA team with any state management library within the MFe design. If you have to use it, state management shouldn’t be used at the central level, so there shouldn’t be a common store across all MFes. Instead, the single application may have its own stores. Using a common store will break the concept of an MFe.
Home