The MFE solutioning started with breaking a monolith frontend application that was being maintained by multiple teams, this had a significant impact on the lead time for independent/isolated features. A solution was needed which could result in independent, isolated business apps that can be reused across multiple host applications(known hereon as a composer application).
We started by leveraging the vue-router and rollup to export a version-controlled UMD bundle that houses an entire SPA with a routing of its own. This bundled UMD will be mounted and rendered in various composer applications.
Next, we enabled 2-way communication between the MFE and the composer application(within peers as well) by creating a basic event bus.
Lastly, all being lego-ed up and running was to plug in the system to a CI/CD which completes the lifecycle.
This was how Livspace was able to host multiple SPAs, maintained by independent business teams within the same composer application.
Works for the VueJS ecosystem.
- Journey to MFE as a hybrid approach to monolith applications.
- How MFE changed high impact deliveries.
- Communication in MFEs
- Devops for MFEs
Rohit Kumar is a Software Engineer here at Livspace and has been key in transforming MFEs from ideation to action.