Microfrontends

Microfrontend architecture is essentially the Microservice architecture applied to the frontend. It allows splitting a web application into multiple parts that can be developed and deployed independently.

Module Federation allows creating Micro Frontend applications using Webpack.

Concepts

• Shell - the root of the application

Shared Dependencies

Ideas:

• Create a NPM package containing all the shared libraries (e.g. react, react-dom, mui, jotai), which is added as a dependency to each micro frontend.
  • Saves having to define each dependency explicitly in each micro frontend (e.g. specifying React in each application)

Resources

• Module Federation - Webpack Documentation
• Micro Frontend Architecture in Angular Applications - Module Federation
• Webpack 5 Module Federation: A game-changer in JavaScript architecture

Examples

• Module Federation Examples

---

Last update: August 12, 2023
Created: June 3, 2023