Micro front end architecture is a design pattern in which front end application is split into multiple individual micro applications and working loosely coupled together. The concept is vaguely is inspired from microservices.
Industry have been using monolithic architecture around until 2010 for almost all application which runs on server less environment since day one. Micro-frontends became a big trending topic circa 2020.
Typical web app architecture evolution from 2010 to 2020
Next logical web app architecture evolution: micro-frontends
What is micro front end architecture?
- It is possible to split the features to different application and merge them later in the runtime for the ease of development instead of accommodating every feature into a monolith application
- Dedicated teams can be assigned to each features of the same application and they can work indecently
- Easy coupling and decoupling of features from the monolith application
Advantages of MFE architecture
- Micro-frontends removes the last blocker allowing developers to move from “single threaded” to “multi-threaded” development and delivery processes
- Moreover, micro-frontends offer an overall better end user experience with smaller optimized bundle sizes because of shared modules and dependencies, lazy-loaded on demand
- A micro-frontends approach is a win/win situation for the developer and the end-user
How to implement MFE
- Multiple option to replicate same behavior to different apps
- Using Iframes
- Using Npm packages
- Using Edge Side Includes (ESI) is a simple markup language used to define web page components for dynamic assembly and delivery of web applications at the edges of the Internet.
- Using Module Federation
What is Module Federation?
- Extension of webpack. More like an interface
- In the process, sharing dependencies, if an application consuming a federated module does not have a dependency needed by the federated code — Webpack will download the missing dependency from that federated build origin
- Federated code can always load its dependencies but will attempt to use the consumers’ dependencies before downloading more payload.
- Less code duplication, dependency sharing just like a monolithic Webpack build
Features of Module Federation
- Smaller bundle size
- Sharing single instance of the class in both shell and remote
- Option to load modules from remote apps
- Lazy loading feature for modules
- Option to load components from remote apps
- Option to dynamically assign input and output variables to integrated component
- A Webpack build that is initialized first during a page load (when the onLoad event is triggered)
- Another Webpack build, where part of it is being consumed by a “host”
- When a bundle or Webpack build can work as a host or as a remote. Either consuming other applications or being consumed by others — at runtime
- Hosts themselves don’t know if they are host or remote on startup
- Any application that’s loaded first, becomes a host — as you change routes and move through an application, loading federated modules in the same way you would implement dynamic imports.
- However if you were to refresh the page, whatever application first starts on that load, becomes a host.