Micro frontend explained

A micro frontend is an architectural pattern for web development, where independently developed frontends are composed into a greater whole.^[1] It is analogous to a microservices approach but for client-side single-page applications written in JavaScript.^[2] It is a solution to de-composition and routing for multiple front-end applications.^[3]

Micro frontends (MFE) can be built using the following approaches:

• With tooling such as module federation or native federation
• With libraries such as Single-SPA or frameworks such as Piral^[4]
• With Web Components
• With iframes

Companies that use micro frontends are Canonical, IKEA, Scania AB, Spotify, etc.^[5]

For Webpack this concept is referred to as module federation.^[6]

See also

• Microservices
• Software modernization

Notes and References

1. Web site: Micro Frontends. 2023-05-03. martinfowler.com.
2. Web site: Contentstack: What is a micro-frontend approach?. 2022-08-29. CW Developer Network.
3. Web site: Decision Strategies for a Micro Frontends Architecture . 2022-08-29. InfoQ.
4. Rappl, Florian. The Art of Micro Frontends. Verzdesign Publishing. .
5. Web site: Experiences Using Micro Frontends at IKEA. 2022-08-29. InfoQ.
6. Web site: Module Federation. 2022-08-29. webpack.