micro frontends

Rare Earth Juejin Tech Community

Jun 27, 2024 · Frontend Development

Understanding Micro Frontends: Concepts, Scenarios, and Solution Comparisons

This article explains what micro frontends are, the problems they address, suitable application scenarios, key technical concerns such as communication, state management, sandboxing, routing, and pre‑loading, and compares popular implementations like nginx forwarding, pure iframe, qiankun, micro‑app, Module Federation, and wujie.

Web Componentsfrontend architectureiframe

0 likes · 26 min read

Understanding Micro Frontends: Concepts, Scenarios, and Solution Comparisons

ByteDance Web Infra

Apr 28, 2024 · Frontend Development

Announcing Module Federation 2.0: New Features, Documentation, and Future Roadmap

Module Federation 2.0, released by ByteDance Web Infra and the original author, introduces best‑practice documentation, runtime‑tool decoupling, TypeScript type safety, a devtool, manifest protocol, and cross‑tool support to make micro‑frontend module sharing more flexible and developer‑friendly.

Type SafetyWebpackdevtool

0 likes · 8 min read

Announcing Module Federation 2.0: New Features, Documentation, and Future Roadmap

Architecture & Thinking

Feb 9, 2023 · Frontend Development

Unlock Micro‑Frontend Power: How Module Federation Simplifies Shared Modules

This article introduces the concept and motivation behind Webpack's Module Federation, explains host and remote roles, outlines practical use cases such as micro‑frontend architecture and resource sharing, and provides a step‑by‑step code walkthrough—including configuration, shared dependencies, and runtime loading—to help developers quickly adopt this decentralized module‑sharing technique.

Frontend DevelopmentWebpackmicro frontends

0 likes · 8 min read

Unlock Micro‑Frontend Power: How Module Federation Simplifies Shared Modules

ByteDance Terminal Technology

Jan 19, 2023 · Frontend Development

2023 Front‑End Engineering Outlook: Cloud‑Native, Serverless, and Emerging Trends

In this comprehensive interview, ByteDance senior front‑end engineer Huang Jian shares the 2023 outlook for front‑end developers, covering cloud‑native integration, serverless adoption, micro‑frontends, AI influence, WebAssembly, career growth, and the evolving skill set required to stay competitive.

AICloud NativeWebAssembly

0 likes · 33 min read

2023 Front‑End Engineering Outlook: Cloud‑Native, Serverless, and Emerging Trends

ByteFE

Dec 28, 2022 · Frontend Development

Understanding Web Components: Features, Lifecycle, and Integration with Modern Frameworks

This article explains what Web Components are, details their core features such as Custom Elements, Shadow DOM, and HTML templates, demonstrates practical usage with React, Vue, and micro‑frontend scenarios, compares them to traditional frameworks, and discusses advantages, limitations, and related tools like Lit and Omi.

Custom ElementsJavaScriptWeb Components

0 likes · 57 min read

Understanding Web Components: Features, Lifecycle, and Integration with Modern Frameworks

ByteFE

Nov 7, 2022 · Frontend Development

Micro Frontends: Concepts, Implementation Strategies, and Technical Details

Micro frontends decompose large monolithic front‑end applications into independent, technology‑agnostic sub‑apps, detailing their background, advantages, suitable scenarios, and various implementation approaches—including MPA, server‑side composition, build‑time and runtime composition with module federation, iframe, JS sandbox, CSS isolation, and routing techniques.

JS Sandboxcss isolationfrontend architecture

0 likes · 22 min read

Micro Frontends: Concepts, Implementation Strategies, and Technical Details

Rare Earth Juejin Tech Community

Oct 12, 2022 · Frontend Development

Implementing a CSS Sandbox for Qiankun: Shadow DOM and Scoped CSS Isolation

This article explains how to build a CSS sandbox for Qiankun micro‑frontends by using Shadow DOM for strict style isolation and a Scoped CSS approach for experimental isolation, providing step‑by‑step code examples, underlying principles, and a final Web Component implementation.

CSS sandboxScoped CSSWeb Component

0 likes · 11 min read

Implementing a CSS Sandbox for Qiankun: Shadow DOM and Scoped CSS Isolation

Rare Earth Juejin Tech Community

Oct 12, 2022 · Frontend Development

Implementing a Simplified Qiankun JavaScript Sandbox: Snapshot, Singular Proxy, and Multiple Proxy Sandboxes

This article walks through building a lightweight Qiankun JS sandbox by first explaining sandbox principles, then creating a snapshot sandbox, a singular proxy sandbox that records changes via ES6 Proxy, and finally a multiple‑proxy sandbox that isolates each micro‑frontend with its own fake window, complete with test cases and setup instructions.

JavaScriptJestSandbox

0 likes · 16 min read

Implementing a Simplified Qiankun JavaScript Sandbox: Snapshot, Singular Proxy, and Multiple Proxy Sandboxes

vivo Internet Technology

Sep 7, 2022 · Frontend Development

Design and Implementation of the Qingtian Micro‑Frontend Framework

The Qingtian framework redesigns VAPD’s monolithic front‑end by employing full‑screen iframes with shared component libraries, asynchronous loading, and synchronized routing and state engines, delivering instant sub‑app switching, complete isolation, and fast page loads while preserving micro‑frontend scalability.

frontend architectureiframe isolationmicro frontends

0 likes · 12 min read

Design and Implementation of the Qingtian Micro‑Frontend Framework

JD Tech

Mar 16, 2022 · Frontend Development

An Overview of Micro Frontends: Concepts, Characteristics, Implementation Options, and Use Cases

This article provides a comprehensive introduction to micro frontends, explaining their definition, benefits such as independence and scalability, detailing various implementation approaches like iframe, Module Federation, EMP, single‑spa, qiankun, icestark, garfish, Fronts and Web Components, and outlining the essential framework functions and suitable scenarios.

Web Componentsfrontend architectureiframe

0 likes · 11 min read

An Overview of Micro Frontends: Concepts, Characteristics, Implementation Options, and Use Cases

Rare Earth Juejin Tech Community

Mar 1, 2022 · Frontend Development

Micro Frontend Architecture and Implementation with Qiankun: Principles, Practices, and Advanced Topics

This comprehensive guide explains micro‑frontend concepts, the core principles of independent development, deployment and runtime, compares various implementation options, and provides detailed step‑by‑step instructions for using Qiankun—including registration, lifecycle hooks, routing strategies, sandbox isolation, CSS scoping, resource sharing, inter‑app communication, memory management, and deployment workflows—targeted at modern frontend engineers.

RoutingVuecss isolation

0 likes · 56 min read

Micro Frontend Architecture and Implementation with Qiankun: Principles, Practices, and Advanced Topics

Baidu Geek Talk

Dec 1, 2021 · Frontend Development

When to Adopt Micro Frontends: System Requirements, Design Guidelines, and Performance Tips

Adopt micro frontends when large, parallel development teams need independent releases, cross‑technology migration, or high‑frequency updates, and design them with a central app shell loading shared dependencies, choosing between iframe, web component, or lifecycle‑hook bundles, managing single‑ or multi‑instance routing, shared state or event‑bus communication, and optimizing performance through lazy rendering and shared library bundling.

Performance Optimizationcode-splittingfrontend architecture

0 likes · 15 min read

When to Adopt Micro Frontends: System Requirements, Design Guidelines, and Performance Tips

ByteDance Web Infra

Oct 28, 2021 · Frontend Development

Modern.js: A Modern Front‑End Framework for Integrated Web Development

The article presents Modern.js, an open‑source framework from ByteDance that illustrates the shift from traditional front‑end stacks to a modern, integrated, server‑less, client‑centric web development paradigm, detailing its six core elements, best‑practice guidelines, and the broader ecosystem of low‑code and platform‑based tooling.

Frontend FrameworkModern.jsWeb Development

0 likes · 32 min read

Modern.js: A Modern Front‑End Framework for Integrated Web Development

ByteDance Terminal Technology

Oct 27, 2021 · Frontend Development

Modern.js: Modern Web Development Framework

Modern.js, launched at the 2023 ByteDance Developer Conference, aims to promote modern web development by providing a unified framework that supports various deployment modes and enhances developer efficiency.

ByteDanceFrontend FrameworkMWA

0 likes · 6 min read

Modern.js: Modern Web Development Framework

ByteFE

Oct 12, 2021 · Frontend Development

Micro Frontend Architecture and Garfish Solution Overview

This article explains the background, challenges, and design of micro‑frontend architecture, introduces the Garfish open‑source solution with its three‑layer structure, and details core runtime components such as loader, sandbox, router, and store, while discussing advantages, drawbacks, and best‑practice integration with modern web frameworks.

RouterSandboxdeployment platform

0 likes · 32 min read

Micro Frontend Architecture and Garfish Solution Overview

ByteDance Terminal Technology

Sep 30, 2021 · Frontend Development

Micro-Frontends: Background and Solutions

This article discusses the background and significance of micro-frontends, a modern architecture for large-scale web applications, and introduces Garfish as a widely adopted solution in the industry.

ByteDanceWeb Developmentfrontend architecture

0 likes · 30 min read

Micro-Frontends: Background and Solutions

Architects Research Society

Jul 10, 2021 · Fundamentals

Key Software Architecture Trends for 2020: Micro Frontends, AsyncAPI, Data Mesh, Policy as Code, Serverless, Low‑Code, GraphQL and Ethics

The article surveys the most significant software‑architecture trends of 2020—including micro frontends, AsyncAPI, data mesh, policy‑as‑code, serverless, low‑code platforms, GraphQL, and ethical considerations—highlighting their adoption status, challenges, and the viewpoints of leading industry experts.

Data MeshGraphQLasyncapi

0 likes · 16 min read

Key Software Architecture Trends for 2020: Micro Frontends, AsyncAPI, Data Mesh, Policy as Code, Serverless, Low‑Code, GraphQL and Ethics

ByteDance Web Infra

Jul 7, 2021 · Frontend Development

ByteDance's Serverless‑Based Frontend Development Model Upgrade

This talk by Wang Lei from ByteDance Web Infra outlines the evolution of front‑end responsibilities, challenges of traditional CSR + BFF development, and how a Serverless‑based platform redesign—including unified deployment, AB testing, monitoring, CI/CD, and micro‑frontend support—reduces cost, simplifies operations, and enables progressive development across CSR, SSR, BFF and micro‑frontend.

CI/CDDeploymentarchitecture

0 likes · 16 min read

ByteDance's Serverless‑Based Frontend Development Model Upgrade

JD Retail Technology

Feb 22, 2021 · Frontend Development

Micro Frontends: Concepts, Implementation, and Lessons from the Shangling Project

This article explains the concept of micro frontends, why they are needed, their core principles such as technology‑agnostic integration, centralized routing, isolation, communication, version management and performance, and details a real‑world implementation using the qiankun framework in the Shangling project, including code snippets and future challenges.

IntegrationPerformance Optimizationfrontend architecture

0 likes · 22 min read

Micro Frontends: Concepts, Implementation, and Lessons from the Shangling Project

NetEase Cloud Music Tech Team

Oct 22, 2020 · Frontend Development

Implementation of Micro-Frontends with Qiankun in Live Streaming Platform

The LOOK live‑streaming admin console, a 250‑page monolith built on Regularjs, was refactored into independent React micro‑frontends using the qiankun framework, allowing separate deployment of sub‑apps while preserving the original URL, and introducing shared dependency management across the legacy and new stacks.

ImplementationLive Streamingfrontend-development

0 likes · 20 min read

Implementation of Micro-Frontends with Qiankun in Live Streaming Platform