An Overview of Micro Frontends: Concepts, Characteristics, Implementation Options, and Use Cases

Micro frontends extend the microservice idea to the frontend, decomposing a large web application into multiple independent, deployable front‑end applications that together appear as a single cohesive product.

Key characteristics include independence and autonomy, unlimited technology‑stack choice, granular decoupling and composability, which improve build and delivery efficiency, enable teams using different stacks to collaborate, and reduce duplicated development effort.

Implementation solutions covered are:

iframe : native isolation with high resource consumption and limited interaction.

Module Federation (Webpack 5) : remote loading of modules, shared dependencies, and expose/exposes configuration.

EMP : a Webpack5 Module Federation‑based solution that loads micro‑apps via CDN, supports dynamic updates and shared state.

Runtime dependency approaches : single‑spa, qiankun, icestark, garfish – each provides a loader, lifecycle management, and routing hijacking.

Fronts : a progressive micro‑frontend framework built on Module Federation, allowing gradual adoption.

Web Components : custom elements, Shadow DOM, and HTML templates offering framework‑agnostic, reusable micro‑frontend building blocks.

A micro‑frontend framework should implement essential functions such as application loading (HTML or JS entry, with optional preloading), lifecycle management (load, mount, update, unmount), routing synchronization, inter‑application communication (local and global), sandbox isolation (JS isolation via snapshots, sandbox or Wasm VM; CSS isolation via naming conventions, automatic scoping, Shadow DOM), and unified exception handling.

Typical scenarios for adopting micro frontends include large applications that become difficult to maintain as they grow and situations where several relatively independent applications need to be integrated into a single product; the decision should be based on whether the benefits outweigh the associated costs.