What we need
A scalable, modular, dev-ops friendly, enterprise grade web app hosting platform (ie. Shell) which will compose multiple SPAs side-by-side and allow them to communicate with each other under a single website brand.
MFE features
Single Page Apps (SPAs) should follow Micro Services development principles, hence each SPA can be also called Micro FrontEnd following the same terminology.
MFEs should be lightweight and should focus on one business workflow (e.g one for Accounts, one for Recipients, one for Making Payment, one for Statements ...)
They can be developed using different UI Frameworks ( React, Angular, Vue, Svelte ) depending on application requirements or team's skillsets.
They should share a common look and feel via modular CSS, they can also share common functionality via WebComponents
They live independently, developed, versioned, deployed separately. Should not clash with each other when composed, no global pollution, double loading React or conflicting versions.
They are lazy loaded at runtime (they have to implement a common interface), by the hosting shell app.
They manage their own App state but also raise / subscribe to events so they can communicate with each other.
Shell features
The security context (login / logout / session monitor, permissions),
Lazy loading and layout of MFEs at runtime when routed
Lifecycle management of each MFE as they get mounted or unmounted.
What have we used to build this
- Lerna to organise our sample code as a monorepo to manage independent MFEs in a single repository for convenience. In a multi team environment, this may not be desirable.
Lerna behind the scenes uses Yarn workspaces to link multiple package dependencies and install all MFEs and Shell in one go using
yarn installSystemJS Dynamic ES Module loader polyfill (which will eventually be replaced with es-modules when all browsers support import-maps). SystemJS is like AMD allows multiple assets to be dynamically loaded on demand.
SingleSPA to register and manage individual MicroFEs implemented with different FWs ( React and Svelte example here)
Where is the code
ReadMe documentation should give you all the know-how you need
Links
Also inspired from Jack Harrington's Youtube posts
Top comments (2)
Nice article Bulent, will deffo try this over the weekend!
Hi Bulent,
Could you detail what you mean behind « in a single repository for convenience. In a multi team environment, this may not be desirable. » ?