Micro Frontend Architecture: Research, Design, and Implementation Guide

Micro frontends, introduced by ThoughtWorks in 2016, split a large front‑end application into independent small applications that can be developed, deployed, and run separately, improving decoupling, maintainability, and scalability.

The author proposes a four‑step process for adopting new technologies: research and produce documentation, create a technical demo, trial the technology in a project (acknowledging pitfalls), and finally promote it to production.

For a large project with two similar front‑ends, two architectural options are considered: sharing a single codebase with conditional logic or maintaining two separate codebases. Both have drawbacks, leading to the selection of a micro‑frontend approach.

The article introduces three popular micro‑frontend frameworks—single‑spa, qiankun (a wrapper around single‑spa), and micro‑app (based on WebComponents). It argues that micro‑app offers the lowest integration cost due to its custom element and Shadow DOM isolation, avoiding extensive configuration.

Implementation steps include setting up two base applications for authentication and shared logic, extracting common UI into a component library, and using micro‑app to mount sub‑applications. Key code snippets are provided:

// Project entry: import microApp from '@micro-zoe/micro-app';
microApp.start();

microApp.router.push({
  name: 'pop',
  path: `${config.pop}${item.url}`
});

<micro-app name="pop" url={config?.pop} />

import React from 'react';
import config from '@/config';
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event';
export default ():React.ReactElement => {
  const onDispathChild = (e:any) => {
    const { isBackHome } = e.detail.data;
    if (isBackHome) window.location.href = '/';
  };
  return (
    <>
);
};

// Child app triggers parent navigation reset
const onBackHome = () => {
  window.microApp?.dispatch({ isBackHome: true });
};

Additional considerations include routing handling, breadcrumb placement, and bundling strategies to avoid sandbox issues when using Umi for both host and sub‑applications.

The article concludes with a summary of micro‑frontend benefits and practical advice on splitting granularity, boundaries, communication, data management, style isolation, and integration methods to achieve a decoupled, maintainable front‑end architecture.