Micro Frontend

Kinjal P Darji
2 min readFeb 3, 2023

Micro frontend is an architectural and organizational style. It brings the micro service architecture to the frontend. It is a collection of micro-apps being developed independent of one another. These micro-apps can be built, tested, and deployed independently. Just like in the world of microservices where the backend is divided into individual services. Each micro frontend (Or app) is just a fragment of the page or we can say a separate feature of the web page. A micro frontend can be a single page or different fragments of the page like headers, teasers etc. This makes it more likable to be used with Adobe Experience Manager.

Monolith Architecture VS Micro Services and Micro Frontend

Monolith Architecture VS Micro Services and Micro Frontend

Why Micro Frontend?

A front-end monolith is the client side of a web application built as a single codebase. It’s quite common that the backend of a system is modular while the front end remains monolith. All parts of monolith systems rely on one another. So, if you want to change something or add a new feature, you may end up with the whole system failing. As opposite to this, the micro frontend architecture imitates microservices architecture of backend. Where loosely coupled components are taken care of by different teams semi-independently. Also, teams aren’t grouped around a skill or technology, but rather formed around a customer need or use case.

For example, an ecommerce site features like payment and product details will involve two independent teams responsible for end-to-end development, code quality, user experience, and deployment. Each team has its own clearly-defined missions.

Using a micro-frontend architecture allows programmers to avoid the limitations of heavy monoliths. Some of the advantages of using micro-frontend are listed below.

  • Accelerated development
  • Autonomous teams working on one perticular micro fronend feature
  • Loose coupling that enables higher app stability
  • Smaller codebase for each micro frontend which enables maintainable clean code
  • Independent deployments
  • Faster rollouts
  • Easier unit testing and app scaling
  • Reduced risk in case of major changes (remember loose copuling)
  • Faster page load
  • Technology freedom (Each micro frontend can use the framework suitable to their need)

When to use Micro Frontend?

  • When the solution is complex, is based on microservices, and can be split into multiple self-contained services/features/components.
  • When you want to leverage different tech stacks to fulfill specific requirements.
  • When you have large development team which can be divided into small autonomous teams for better team management.

--

--

Kinjal P Darji

Hi, I am an AEM architect and a certified AWS Developer — Associate.