Micro frontend

{{Short description|Pattern in front-end web development}}

A micro frontend is an architectural pattern for web development, where independently developed frontends are composed into a greater whole.{{Cite web |title=Micro Frontends |url=https://martinfowler.com/articles/micro-frontends.html |access-date=2023-05-03 |website=martinfowler.com}} It is analogous to a microservices approach but for client-side single-page applications written in JavaScript.{{Cite web |title=Contentstack: What is a micro-frontend approach? - CW Developer Network |url=https://www.computerweekly.com/blog/CW-Developer-Network/Contentstack-What-is-a-micro-frontend-approach |access-date=2022-08-29 |website=www.computerweekly.com}} It is a solution to de-composition and routing for multiple front-end applications.{{Cite web |title=Decision Strategies for a Micro Frontends Architecture |url=https://www.infoq.com/news/2020/01/strategies-micro-frontends/ |access-date=2022-08-29 |website=InfoQ |language=en}}

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

• With tooling such as module federation or native federation
• With libraries such as [https://single-spa.js.org/ Single-SPA] or frameworks such as [https://www.piral.io/ Piral]
• With Web Components
• With iframes

Companies that use micro frontends are Canonical, IKEA, Scania AB, Spotify, etc.{{Cite web |title=Experiences Using Micro Frontends at IKEA |url=https://www.infoq.com/news/2018/08/experiences-micro-frontends/ |access-date=2022-08-29 |website=InfoQ |language=en}}

For Webpack this concept is referred to as module federation.{{Cite web |title=Module Federation |url=https://webpack.js.org/concepts/module-federation/ |access-date=2022-08-29 |website=webpack |language=en}}