Micro Frontend Architecture

  • An architectural pattern that extends the backend microservice concept to the frontend area.

In other words, it refers to a structure that develops and distributes one large-scale front-end application by dividing it into several independent “small front-end applications.”

An architecture that separates the front end into several independent applications (micro apps), develops and deploys each separately, and ultimately integrates them into one UI.

Why use it

  • Used to reduce the complexity of large-scale projects, ensure team independence, and facilitate partial deployment and updates.

structure

  • Container (or Shell): The main app that acts as the overall framework. Responsible for common styles, routing, authentication, etc.
  • Micro Apps: Frontend for each service unit that operates independently. Each has its own independent build and deployment pipeline.
  • Integration Layer: Container binds multiple Micro Apps together like a single page.

Advantages

  • Independent Deployment: If you modify just one part, there is no need to redeploy the whole thing.

  • Technology stack diversity (Polyglot Frontend): Other frameworks such as React, Vue, and Angular can coexist in the same project.

  • Team Autonomy: Each team can independently design, test, and distribute apps.

  • Partial rollback/ease of deployment: In case of failure, only specific apps can be quickly rolled back.