Micro Frontend Architecture and Garfish Solution Overview

Micro frontends are an architectural style similar to micro‑services, allowing large web applications to be composed of independently developed, tested, and deployed front‑end apps while presenting a unified product to users.

The approach emerged due to increasing complexity of web apps, larger team sizes, higher performance demands, and the need to maintain both developer experience (DX) and user experience (UX).

Traditional monolithic SPA or MPA architectures each have advantages and drawbacks: SPA offers better performance and seamless navigation but leads to long build times, deployment bottlenecks, and difficulty isolating failures; MPA reduces build size and isolates teams but sacrifices the smooth user experience of SPA.

Garfish, an open‑source micro‑frontend solution from ByteDance, addresses these issues by providing a three‑layer architecture: a deployment platform, a runtime framework, and debugging tools, all built on SPA principles.

The deployment platform handles service discovery, registration, version control, shared dependency analysis, and coordinated gray releases for sub‑applications.

The runtime supplies four core capabilities:

Loader – parses HTML/JS entry points, registers applications, preloads resources, and extracts side‑effects.

Sandbox – isolates and collects side‑effects (global variables, events, timers, network requests, localStorage, styles, DOM) and can restore the environment on unmount.

Router – synchronises sub‑application routes with the host, supports basename isolation, and drives view updates.

Store – provides a communication bridge and shared state between host and micro‑apps.

Two sandbox implementations are described: a snapshot‑based sandbox that saves and restores the global state, and a VM‑based sandbox that creates an isolated execution context using JavaScript lexical scoping. The snapshot approach works for linear execution but fails with multiple concurrent instances; the VM approach overcomes this limitation.

Routing strategies are examined, showing how Garfish can combine host and child basenames to avoid route collisions, support nested apps, and trigger view updates by listening to or dispatching popstate events.

Best practices for integrating micro‑frontends with modern web frameworks (e.g., Modern.js) are presented, covering development workflows, incremental upgrades, SSR support, and debugging tools.

Advantages of micro‑frontends include scalability for large enterprise applications, faster development cycles, independent releases, and balanced DX/UX. Drawbacks involve added infrastructure complexity, stability and security concerns, and a learning curve requiring supporting tools such as monitoring, debugging, and deployment platforms.

Micro‑frontends are recommended when building large‑scale, cross‑team web products, when long‑term benefits outweigh short‑term costs, when heterogeneous technology stacks are needed, or when parts of a monolithic product require independent deployment and gray‑release capabilities.

The article concludes that micro‑frontends are a natural evolution of front‑end engineering, but they shift complexity from code to infrastructure, demanding a robust ecosystem. The Garfish repository ( https://github.com/modern-js-dev/garfish ) provides the implementation details.

References: design articles on micro‑frontend routing, sandbox techniques, micro‑service patterns, and the single‑spa project.