• Blog
  • /
  • Micro-Frontend Architecture
on March 30, 2023
  • Others

The micro-frontend architecture is a type of design applied to the frontend that allows us to divide UI  into smaller, individual and semi-independent applications that work together. This frontend concept is very much inspired by the microservices used mostly in the backend

Core Ideas behind Micro Frontend

  • Technological independence
  • Separation of teams
  • Team nomenclatures: Build independent apps that are self contained
  • Resilient web design: Services are independent, so if one of them crashes, others keep functioning.
  • Use native browser events: Use Browser Events for communication 
  • Faster development:  Developers can work on multiple services in parallel

Technical benefits of architecture

  • Optimize for feature development
  • Good for medium to large sized project

Technical benefits of architecture

  • No more frontend monolith
  • Multiple frontend per team
  • The source code for each individual micro frontend will by definition be much smaller than the source code of a single monolithic frontend
  • Continuously deployable components
  • Be able to keep changing
  • Can be upgraded whenever it makes sense, rather than being forced to stop the world and upgrade everything at once

Sample Implementation

  • There should be a landing page where customers can browse and search for restaurants. 
  • Each restaurant needs its own page that shows its menu items, and allows a customer to choose what they want to eat, with discounts, meal deals, and special requests
  • Customers should have a profile page where they can see their order history, track delivery, and customise their payment options

Integration Approaches

There is a micro frontend for each page in the application, and there is a single container application, which:

  • Renders common page elements such as headers and footers
  • Addresses cross-cutting concerns like authentication and navigation
  • Brings the various micro frontends together onto the page, and tells each micro frontend when and where to render itself

1. Server-side template composition

Code is split up into such a way that each piece represents a self-contained domain concept that can be delivered by an independent team  but the assumption is that they each have their own deployment pipeline, which allows us to deploy changes to one page without affecting or thinking about any other page.

2. Build-time integration

Publish each micro frontend as a package, and have the container application include them all as library dependencies. Here is how the container’s package.json might look for our example app.

3. Run-time integration via iframe

iframes make it easy to build a page out of independent sub-pages. They also offer a good degree of isolation in terms of styling and global variables not interfering with each other

4. Run-time integration via JavaScript

Each micro frontend is included onto the page using a <script> tag, and upon load exposes a global function as its entry-point. The container application then determines which micro frontend should be mounted, and calls the relevant function to tell a micro frontend when and where to render itself.

5. Run-time Integration Web Components

Web components are set of web platform APIs that allow developers to create reusable UI components using web standards.

  • Team Product decides which functionality is included and where it is positioned in the layout
  • Team Checkout (blue) is now responsible for everything regarding the purchasing process – namely the buy button and mini basket. 
  • Team Inspire (green) manages the product recommendations on this page. The page itself is owned by Team Product (red).

Different Types of  Micro frontend

  • Vertical micro frontend: Allows one micro-frontend per business domain.
  •  Horizontal micro frontend: Allows multiple micro-frontends per page.
  • Hybrid micro frontend: Combines both vertical and horizontal.
  • Shell micro frontend: Loads and initializes micro frontend as needed
  • Widget micro frontend: Each widget has its own HTML,CSS, JS code, make it easy to  develop and deploy independently.


  • Operational complexity: Team needs to manage multiple code bases, dependencies and deployment processes.
  • Coordination: To ensure individual teams are compatible with each other
  • Increase page load time
  • Testing: Can be time consuming
  • High initial investment


  • Consider using light weight protocols like REST or GraphQL to reduce complexity and performance overhead.
  • To optimize cost consider using cloud based solutions like AWS, Google cloud or Azure
  • To simplify integration challenges, standardize the technologies
  • To reduce development time and overhead use DevOps practices like continuous integration and continuous deployment.

Brands using micro frontend

It is quite popular in e-commerce sector

  • IKEA
  • Upwork
  • Spotify
  • Amazon 


The micro frontend architecture is particularly favourable for large-scale web development projects based on microservices. It enables different components to be developed by separate, autonomous teams of programmers. As a result, it delivers several benefits, including a faster rollout of new features, simpler testing of individual components, and smoother updates.


Written By
Athira Vinod


Notify of