This article introduces the micro‑frontend concept, outlines its characteristics and suitable scenarios, and provides a detailed Vue‑based implementation covering runtime, deployment, development modes, code snippets, reuse layers, and best‑practice recommendations for large‑scale front‑end projects.
This article explains why rapid business growth and rising development costs push teams toward a micro‑frontend architecture, compares monolithic and micro‑frontend approaches, outlines four implementation patterns, presents the chosen Vue‑based tech stack, and shares code snippets for communication, scrolling, and build‑time optimizations.
GrowingIO’s frontend team transformed its monolithic SaaS product into a micro‑frontend architecture to support on‑premise deployments, detailing the motivations, design principles, code adaptations, integration strategies, and challenges such as dependency conflicts, global variables, and style isolation.
Vivo Mall transformed its Java‑centric frontend into a layered Vue‑Node architecture, separating frontend and backend, unifying multiple platforms with BFF and SSR, building a shared UI library, adopting extreme modularization, and enforcing coding standards and quality tools to double development efficiency and improve scalability.
This article examines the micro‑frontend architecture of icestark, analyzing workbench and large monolithic application scenarios, comparing technical options such as SPA/MPA, iframe and shared components, and detailing core concepts, routing, isolation, communication, and micro‑module capabilities to guide practical implementation.
This article examines why micro‑frontend architecture is needed for large monolithic front‑end apps and workbench scenarios, compares SPA/MPA, iframe and shared component approaches, and details icestark’s core concepts, routing, communication, isolation techniques and micro‑module integration.
This article chronicles the rapid evolution of JD’s 福礼 employee‑benefits platform, detailing its Vue‑based frontend architecture, custom build tools, NutUI component library adoption, data‑collection strategies, multi‑device integration, development‑efficiency hacks, and collaborative processes that together drove a 265% YoY active‑user growth.
This article explains how Outbrain built a micro‑frontend architecture using Angular lazy‑loaded modules, a custom share‑loader for cross‑app module sharing, DOM encapsulation, independent testing, and per‑app deployment via Node services, providing a concrete, framework‑agnostic solution.
This article details Yuque's year‑long journey of designing and implementing a self‑developed online spreadsheet, covering the product’s background, why a custom solution was needed, the technical stack and architecture choices, collaborative editing mechanisms, performance limits, and key takeaways for developers.
The article explains micro‑frontend concepts, why large apps are split into independent modules, critiques iframe drawbacks, details single‑spa’s resource loader and configuration approach with code examples, outlines its limitations, and shows how qiankun builds on single‑spa to automate resource discovery, sandboxing, and style isolation, concluding that micro‑frontends are a valuable strategy for large‑scale front‑end projects.
This article explains how KAITIAN redesigns its IDE layout system using React, introducing a three‑layer abstraction of LayoutComponent, LayoutConfig, and SlotRenderer, and details core components such as BoxPanel, SplitPanel, Accordion, TabBar, and TabPanel that enable fully customizable and extensible IDE interfaces.
This article presents a comprehensive technical study on adopting micro‑frontend architecture to solve version‑dependency, resource‑size, and navigation‑performance issues in a large internal system suite, detailing background analysis, solution research, layered architecture design, key technical challenges, custom webpack plugins, build workflow, and remaining open problems.
This article explains how Alibaba's Taobao Live team built an open ALive platform that unifies SDK, Weex, and mini‑program integrations to broadcast a single live event across multiple apps, achieving millions of viewers and massive sales while outlining the architecture, open design, mini‑program workflow, results, and future roadmap.
The article traces the rise of micro‑frontends from a solution to monolithic admin panels, explains their architectural benefits and various implementation options, and details Xiaoju Car Service’s Midway platform built on single‑spa with lifecycle hooks, sandboxing, idle‑time preloading, IndexedDB caching, and a unified login system.
This article explains why sandboxing is essential in micro‑frontend systems, compares single‑instance and multi‑instance scenarios, and provides step‑by‑step implementations of JavaScript and CSS isolation using iframe‑based proxies, PostCSS namespace wrapping, and reusable APIs from the open‑source ConsoleOS project.
This article examines the technical evolution of Alibaba's DataWorks platform, detailing the pain points of a monolithic IDE, the transition through componentization, and the adoption of micro‑frontend and plugin architectures to achieve flexible, scalable, and maintainable big‑data development tooling.
The article outlines ZanSpa, a progressive micro‑frontend framework built for Youzan’s backend redesign, detailing its core RouteMonitor and PageLoader modules that handle navigation and resource assembly, and explains why runtime composition was chosen over build‑time integration after evaluating solutions such as qiankun.
This article outlines a comprehensive, standardized front‑end AB testing architecture that separates experiment configuration and data chains, introduces a JSSDK with Core and Coupler packages, and explains traffic‑splitting models, data back‑flow, and extensibility across multiple front‑end DSLs.
This article explains how the ICE team created the AppLoader solution for Alibaba's Creator Platform, evolved it into the open‑source icestark framework, and details its architecture, loading strategies, sandbox isolation, and real‑world business value for large, multi‑team front‑end systems.
After three months of development, Fliggy’s integrated operations console combines micro‑frontend and SDK techniques to unify over ten platforms across four scenarios, streamlining configuration, visual consistency, performance, and user feedback, while sharing lessons on architecture, backend gateway, widget integration, and collaborative open‑source contributions.
This article explains why micro frontends are needed, outlines their engineering and product benefits, describes key architectural requirements, shares practical decisions such as stack‑independent bootstrapping, routing, isolation, resource loading, and communication, and presents real‑world results from Ant Financial’s OneX platform.
This article walks through three progressive refactoring stages for Vuex‑based API calls—first separating concerns for maintainable code, then introducing a concise “olive‑shaped” interface with dynamic generation or proxy interception, and finally adding response normalization and three‑level error handling to produce robust, low‑maintenance frontend logic.
Vivo’s Wukong Activity Middle Platform employs a micro‑frontend RSC architecture to streamline marketing H5 development by providing reusable components, template and task marketplaces, real‑time cloud configuration, asset libraries, and PaaS developer tools—including a VSCode plugin—reducing release cycles, resource waste, data silos, and security risks across 30+ business units.
The iQIYI Cloud Video Editing Platform leverages HTML5 and Vue.js to deliver a browser‑based, multi‑track editing suite that offloads transcoding to a four‑layer architecture—web client, Node middle layer, creation platform, and cloud services—while using real‑time preview, caching, and modular code to ensure smooth interaction and future WebAssembly‑powered AI enhancements.
The article introduces Bifrost, Meituan’s Vue‑based micro‑frontend framework, detailing its background, design goals, architecture, implementation code, development practices, deployment workflow, and the benefits and challenges of adopting micro‑frontend architecture in large‑scale enterprise front‑end projects.
Meituan Waimai’s advertising team tackled duplicated business logic and slow builds across PC, H5, and KA by merging code into a monorepo and adopting a React‑based central‑router micro‑frontend architecture, where a host app dynamically loads sub‑apps with independent routing, stores, CSS, and hot‑module replacement, achieving modularization, faster builds, and isolated deployment.
This article explains the background, core concepts, advantages, and various implementation approaches of micro frontends, and provides a step‑by‑step guide—including project setup, configuration, communication, and optimization—using Vue, single‑spa, and related tools.
The iQIYI front‑end team built a Vue‑based micro‑frontend framework where a lightweight container supplies shared Vue, router and store globals, dynamically loads each module’s manifest‑listed scripts, merges their routes, and renders them via global functions, yielding a decoupled, maintainable, and extensible application architecture.
This article details how a Vue‑based supply‑chain platform adopted micro‑frontend architecture with Single‑Spa, SystemJS, and webpack externals to consolidate dozens of independent B2B applications into a single, fast, reload‑free interface, outlining the technical steps, benefits, and trade‑offs.
This article explains Ant Financial's practical adoption of a standard micro‑frontend architecture, covering the motivations, definition, key technical decisions, implementation details, performance optimizations, and the resulting business and engineering benefits across their cloud platforms.
This article explains how NetEase Yanxuan tackled the high maintenance cost and visual inconsistency of multiple front‑end stacks by designing a cross‑framework component architecture based on Web Components, detailing the technical selection, layered design, implementation challenges, and the resulting efficiency and isolation benefits.
This article explains how micro‑frontend architecture tackles the maintainability challenges of monolithic front‑ends, outlines its three core business values, details ten technical problems it must solve, and shows the essential infrastructure, configuration, and observability components needed for cloud‑era web development.
Meituan's R&D built Bifrost, a micro‑frontend framework that splits a monolithic Vue SPA into independent sub‑systems, letting remote teams develop, deploy, and integrate modules while preserving a seamless SPA experience; the host manages lifecycle, routing, shared state, CDN delivery, gray releases, and monitoring, greatly improving scalability and maintainability.
The article explains how micro‑frontend architecture breaks monolithic front‑ends into independent, composable units, outlines its three core values, details the ten technical challenges it must address, and describes the evolving cloud‑centric development model that reshapes front‑end engineering.
Alibaba’s ALive platform evolved from a small‑scale live‑streaming team to an open, high‑performance front‑end solution, introducing a flexible live‑container, dynamic component loading, and a comprehensive engineering suite that boosts performance, development efficiency, and enables diverse live‑stream experiences across Alibaba’s ecosystem.
NGW (Node Gateway) is a Node.js‑based frontend access layer that sits between a unified gateway and business services, providing dynamic request routing, Redis‑driven configuration, a Tapable plugin system, and containerized CI/CD to enable serverless BFF/SFF architectures with rapid builds, high reliability, and dramatically reduced deployment effort across multiple Tencent Cloud projects.
This article explains the benefits of micro‑frontend architecture for large‑scale backend applications, compares MPA and SPA approaches, discusses routing, entry formats, module loading, style and JavaScript isolation techniques, and presents a production‑ready solution built with single‑spa and the open‑source qiankun framework.
This article explains how Alibaba’s Mobile Taobao homepage handles massive traffic and diverse user groups by using multi‑version isolation, component‑based architecture, dynamic layout updates, and a systematic flow‑operation loop, ultimately improving development efficiency and system stability for large‑scale e‑commerce.
The article describes how Ctrip's front‑end team refactored a complex React Native flight‑search list page using Clean Architecture, detailing the layered module design, TypeScript implementation, data flow, and why alternatives such as Redux, React components, and Hooks were rejected.
The article explains the concept of static/dynamic separation, compares deployment methods such as Nginx and CDN, discusses domain strategies, outlines its benefits and drawbacks, and presents an architecture suitable for high‑traffic static content delivery.
The article describes how Meituan applied the micro‑frontend concept to transform its HR system into a class‑single‑page application, detailing the shortcomings of iframe integration, the design of a portal project, application registration, routing, CSS scoping, JavaScript library version control, and the build‑and‑deployment workflow.
Meituan’s HR platform adopts a micro‑frontend architecture where a central Portal container registers isolated sub‑projects via a global route array, namespaces CSS, unifies shared libraries through a custom require system, and deploys static assets with PM2, delivering a single‑page experience, independent releases, and minimal bundle overhead.
The article explains the background, core concepts, components, and workflow of the Hawaii framework—a Node.js based server‑side rendering solution that uses RDS files to simplify model‑layer data handling, supports front‑end/back‑end code reuse, and compares its approach with popular frameworks like React, Vue, and GraphQL.
This article walks through creating a React application without scaffolding tools, detailing the project directory layout, chosen tech stack—including React, Redux, Immutable.js, redux‑saga, and axios—along with development utilities like redux‑devtools and Reactotron, component organization, routing strategies, state persistence, and asynchronous task management.
An in‑depth case study of the Interest Tribe project reveals how adopting isomorphic server‑side rendering, combined with offline packages, VM sandboxing, and smart caching, dramatically reduced first‑paint latency on Android devices, cut slow‑user share, and improved stability and scalability for a billion‑scale web service.
This article explains how to design and implement a Vue.js‑based website builder that lets users create multi‑page sites by dragging modules, covering requirement analysis, JSON data modeling, dynamic component rendering, state management with Vuex, and drag‑and‑drop integration.
This article explains how to design scalable web modules by defining their composition, encapsulating HTML/CSS/JS, managing dependencies with uniform identifiers, flattening hierarchical relationships, and applying scheduling strategies for module display, switching, and messaging in single‑page applications.
This article describes the business background, pain points, and a component‑based solution for rapidly building and iterating promotional activity pages, covering system design, front‑end architecture, component library, visual editor, back‑end services, fast iteration practices, and future development plans.
This article details the transformation of the HULK private‑cloud platform's front‑end from a PHP‑based MVC system to a modern React SPA using webpack, Redux, SASS and code‑splitting, highlighting the motivations, architectural decisions, and performance benefits of the 3.0 overhaul.
This article shares lessons learned from releasing React Boilerplate 3.0, covering the importance of front‑end scalability, the distinction between container and presentational components, feature‑based code organization, CSS Modules and PostCSS Auto Reset for style isolation, and using redux‑saga for readable, testable asynchronous flows.
The article examines the inefficiencies of an outdated internal iconfont platform, explores the drawbacks of separate front‑end and back‑end rendering, and presents a React‑based isomorphic solution that unifies package management and module loading, resulting in dramatically faster first‑page loads and easier maintenance.
BigPipe splits a web page into independent pagelets and pipelines their generation so that the server and browser work in parallel, dramatically cutting perceived latency and making Facebook’s homepage load up to twice as fast.
This article explains a dynamic, template‑driven rendering architecture for e‑commerce single‑page applications, covering CMS configuration, multi‑version data storage in Redis, front‑end rendering flow, version rollback, gray‑release handling, and exception management.
This article explains how single‑page web applications shift client logic to the browser, covering their definition, key frameworks, componentization, code isolation, routing, caching, server communication, memory management, styling strategies, deployment models, and inherent drawbacks.
This article discusses practical approaches to organizing a React project, comparing single‑file setups with modular multi‑file structures, component directories, testing strategies, data handling, and view integration, emphasizing pragmatic, maintainable architecture over rigid conventions.
This article presents a detailed case study of a mobile‑first single‑page web application built with React.js, Redux, React‑router, and a custom Node.js framework, describing the technology selection, development workflow, encountered challenges, and the advantages and drawbacks of the chosen stack.
This article examines the five major obstacles when building massive single‑page applications—componentization, decentralized routing, domain‑wide data stores, hybrid app integration, and performance tuning—and offers practical architectural patterns to address each.
Netflix’s UI team re‑engineered their web stack by shrinking server‑generated HTML, adopting a universal JavaScript approach with Node.js and React, and cutting JavaScript payloads, resulting in faster page starts, lower TTI, and a more flexible rendering pipeline.
