BestHub
Sign in
Tagged articles
32 articles
Page 1 of 1
Sohu Tech Products
Sohu Tech Products
Feb 4, 2026 · Frontend Development

How to Seamlessly Integrate Legacy Backends with Vue and Qiankun Micro‑Frontend

This article presents a comprehensive case study on unifying multiple legacy backend systems by building a modern Vue‑based front‑end, combining native iframe integration with the qiankun micro‑frontend framework to achieve a single entry point, smooth migration, reduced costs, and an evolvable architecture for enterprise applications.

Frontend ArchitectureIframe IntegrationPerformance Monitoring
0 likes · 18 min read
How to Seamlessly Integrate Legacy Backends with Vue and Qiankun Micro‑Frontend
360 Zhihui Cloud Developer
360 Zhihui Cloud Developer
Jun 9, 2025 · Frontend Development

Choosing the Right Micro‑Frontend Strategy: Qiankun vs Umi Micro vs Iframe

This article compares two micro‑frontend frameworks (Qiankun and Umi Micro) and an iframe‑based solution, detailing their principles, feature comparisons, pros and cons, integration costs, typical scenarios, common pitfalls, and improvement plans to help developers select the most suitable approach for multi‑platform product integration.

Frontend Architectureiframemicro-frontend
0 likes · 15 min read
Choosing the Right Micro‑Frontend Strategy: Qiankun vs Umi Micro vs Iframe
Rare Earth Juejin Tech Community
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.

Frontend ArchitectureMicro FrontendsModule Federation
0 likes · 26 min read
Understanding Micro Frontends: Concepts, Scenarios, and Solution Comparisons
360 Tech Engineering
360 Tech Engineering
Aug 23, 2023 · Frontend Development

Micro‑Frontend Architecture with MonoRepo and Qiankun: Design, Technology Selection, and Implementation Practices

This article describes how a team consolidated six PC and H5 projects by adopting a micro‑frontend architecture based on MonoRepo and Qiankun, evaluates popular micro‑frontend solutions, explains the chosen technology stack, outlines step‑by‑step implementation details, and shares the problems encountered and their resolutions.

Frontend ArchitectureJavaScriptMonorepo
0 likes · 8 min read
Micro‑Frontend Architecture with MonoRepo and Qiankun: Design, Technology Selection, and Implementation Practices
JD Tech
JD Tech
Jun 21, 2023 · Frontend Development

Micro Frontend: Research, Introduction, Capabilities, Core Concepts, Platform Selection, Implementation, and Summary

This article explains the concept of micro frontends, outlines a four‑step adoption process, compares architectural options, describes core capabilities and platforms such as single‑spa, qiankun and micro‑app, and shares practical implementation tips and common pitfalls for large‑scale projects.

Code SplittingFrontend Architecturemicro-app
0 likes · 15 min read
Micro Frontend: Research, Introduction, Capabilities, Core Concepts, Platform Selection, Implementation, and Summary
JD Retail Technology
JD Retail Technology
May 5, 2023 · Frontend Development

Micro Frontend Architecture: Research, Design, and Implementation Guide

This article explains the concept of micro frontends, outlines a systematic research and design process, compares architectural options, and provides detailed implementation steps with code examples using frameworks like single-spa, qiankun, and micro‑app to build scalable, maintainable large‑scale projects.

Code SplittingFrontend Architecturemicro-app
0 likes · 12 min read
Micro Frontend Architecture: Research, Design, and Implementation Guide
政采云技术
政采云技术
Mar 14, 2023 · Frontend Development

Analysis of Qiankun Micro‑frontend Framework Sandbox Implementations

This article examines the sandbox mechanisms employed by the micro‑frontend framework Qiankun, detailing three implementations—SnapshotSandbox, LegacySandbox, and ProxySandbox—explaining their principles, code structures, advantages, and drawbacks, and illustrating how they isolate JavaScript global state across micro‑applications.

IsolationJS SandboxProxy
0 likes · 15 min read
Analysis of Qiankun Micro‑frontend Framework Sandbox Implementations
NetEase Media Technology Team
NetEase Media Technology Team
Mar 13, 2023 · Frontend Development

Progressive Upgrade Practice Based on Qiankun Micro-frontend Framework

The article details how a legacy Gulp‑AngularJS project with over 70 modules was progressively upgraded by introducing a new Angular 11 main application and using the qiankun micro‑frontend framework to host the old AngularJS code as a sub‑app, enabling route‑based mounting, menu sharing, CSS isolation, and low‑risk incremental migration.

AngularJs migrationFrontend Architecturemicro-frontend
0 likes · 10 min read
Progressive Upgrade Practice Based on Qiankun Micro-frontend Framework
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 24, 2023 · Frontend Development

Integrating Sentry into a qiankun Micro‑Frontend Project

This article provides a step‑by‑step guide on integrating Sentry monitoring into a qiankun micro‑frontend architecture, detailing two implementation schemes, handling source maps, error event routing, sandbox behavior, and code examples for Vue and React sub‑applications.

Sentryerror trackingmicro-frontend
0 likes · 31 min read
Integrating Sentry into a qiankun Micro‑Frontend Project
DeWu Technology
DeWu Technology
Oct 14, 2022 · Frontend Development

Micro‑Frontend Architecture with Qiankun: Practical Implementation and Migration Strategies

The article outlines how an enterprise back‑office monolith can be progressively migrated to a Qiankun‑based micro‑frontend architecture—allowing independent Vue, React, Angular or legacy apps, shared SDKs, route isolation, keep‑alive state, and sandboxed styling—resulting in over 90 % legacy integration, a unified React stack for new features, and significantly improved development efficiency and ROI.

Frontend ArchitectureReactUmi
0 likes · 15 min read
Micro‑Frontend Architecture with Qiankun: Practical Implementation and Migration Strategies
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 28, 2022 · Frontend Development

Understanding Qiankun Sandbox Mechanisms and JavaScript Isolation

This article explains the three sandbox types used by Qiankun—SnapshotSandbox, LegacySandbox, and ProxySandbox—detailing how they isolate global variables, the underlying code transformation that enables this isolation, common pitfalls with implicit global declarations, and a practical fix using MicroApp's plugin system.

javascript isolationqiankun
0 likes · 8 min read
Understanding Qiankun Sandbox Mechanisms and JavaScript Isolation
vivo Internet Technology
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 ArchitectureMicro FrontendsWeb Performance
0 likes · 12 min read
Design and Implementation of the Qingtian Micro‑Frontend Framework
vivo Internet Technology
vivo Internet Technology
Jul 27, 2022 · Frontend Development

Multi-Tab Caching Strategies for Micro‑Frontend Applications Using qiankun

The Vivo Internet Front‑End team explains how to implement multi‑tab functionality and efficient caching in a qiankun‑based micro‑frontend architecture, comparing CSS hide/show and component‑level keep‑alive approaches, then presenting two strategies—simultaneous mounting versus app‑level vnode caching—choosing the latter for reduced memory usage and detailing its Vue‑specific implementation, communication handling, and future Vue 3 migration.

Vuecachingfrontend
0 likes · 17 min read
Multi-Tab Caching Strategies for Micro‑Frontend Applications Using qiankun
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jun 27, 2022 · Frontend Development

Mastering Micro‑Frontends with Qiankun: From Basics to APAAS Integration

This article explores the concept of micro‑frontends, introduces the Qiankun framework, demonstrates its rendering workflow with practical code examples, and details an APAAS‑based architecture for integrating and managing micro‑applications, covering client‑side SDK, server proxies, routing, sandboxing, CSS isolation, and third‑party SDK challenges.

Frontend ArchitectureaPaaScss isolation
0 likes · 20 min read
Mastering Micro‑Frontends with Qiankun: From Basics to APAAS Integration
Alipay Experience Technology
Alipay Experience Technology
Apr 7, 2022 · Frontend Development

When and How to Adopt Micro‑Frontend Architecture: Insights from Ant Group’s Liu Kui

In this interview, Ant Group frontend engineer Liu Kui shares when micro‑frontend is appropriate, how to split large applications, challenges faced, future trends, and upcoming features of the qiankun framework, offering practical guidance for teams considering micro‑frontend adoption.

Software EngineeringWeb Developmentmicro-frontend
0 likes · 13 min read
When and How to Adopt Micro‑Frontend Architecture: Insights from Ant Group’s Liu Kui
vivo Internet Technology
vivo Internet Technology
Mar 23, 2022 · Frontend Development

Product Middle Platform Front-end Practice: Micro-frontend Architecture and Visualization Technology Implementation

The article details how an e‑commerce product middle platform’s front‑end employs visualization technology, a uni‑render approach that shares a Vuex store between an iframe and its parent via a sandboxed Vue instance, and a qiankun‑based micro‑frontend architecture, while addressing cross‑domain and editor integration challenges.

Vuexe‑commercefrontend-architecture
0 likes · 13 min read
Product Middle Platform Front-end Practice: Micro-frontend Architecture and Visualization Technology Implementation
Rare Earth Juejin Tech Community
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.

Frontend ArchitectureMicro FrontendsModule Federation
0 likes · 56 min read
Micro Frontend Architecture and Implementation with Qiankun: Principles, Practices, and Advanced Topics
Tencent Cloud Developer
Tencent Cloud Developer
Feb 23, 2022 · Frontend Development

Micro-Frontend Architecture: Theory, Implementation, and Practice

Micro‑frontend architecture breaks a monolithic web app into independent, stack‑agnostic sub‑applications that can be developed, deployed, and maintained separately, using techniques such as server‑side or runtime integration and tools like single‑spa, qiankun, or Webpack 5 Module Federation, with qiankun favored for production.

Frontend ArchitectureJavaScript frameworkModule Federation
0 likes · 28 min read
Micro-Frontend Architecture: Theory, Implementation, and Practice
Xueersi Online School Tech Team
Xueersi Online School Tech Team
Nov 19, 2021 · Frontend Development

Introduction, Architecture, and Practical Usage of the qiankun Micro‑Frontend Framework

This article provides a comprehensive overview of the qiankun micro‑frontend framework—including its background, core concepts of micro‑frontends, comparison with other solutions, detailed configuration examples for host and child applications, implementation details such as sandbox mechanisms, common pitfalls, and the overall impact on development efficiency and project complexity.

Code SplittingFrontend ArchitectureVue
0 likes · 24 min read
Introduction, Architecture, and Practical Usage of the qiankun Micro‑Frontend Framework
Youku Technology
Youku Technology
Nov 1, 2021 · Frontend Development

How YseraMicroServer Simplifies Micro‑Frontend Integration with Qiankun

This article explains the business background, design principles, and core rendering mechanism of YseraMicroServer—a Qiankun‑based micro‑frontend platform that reduces integration cost, minimizes code intrusion, and introduces UI snapshot and event‑based communication for seamless multi‑platform experiences.

Frontend IntegrationUI snapshotYseraMicroServer
0 likes · 5 min read
How YseraMicroServer Simplifies Micro‑Frontend Integration with Qiankun
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Mar 11, 2021 · Frontend Development

Integrating a React Micro‑Frontend into a Vue‑Based DSP Platform Using qiankun

The Cloud Music DSP team unified its Vue contract platform and React bidding platform by embedding the React app as a qiankun micro‑frontend, replacing iframe and MPA approaches, configuring HTML entry, lifecycle hooks, routing and CSS isolation, and addressing routing, style, and CORS challenges for seamless integration.

IntegrationVuefrontend
0 likes · 17 min read
Integrating a React Micro‑Frontend into a Vue‑Based DSP Platform Using qiankun
JD Retail Technology
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.

Frontend ArchitectureIntegrationMicro Frontends
0 likes · 22 min read
Micro Frontends: Concepts, Implementation, and Lessons from the Shangling Project
NetEase Cloud Music Tech Team
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.

Micro Frontendsfrontend-developmentimplementation
0 likes · 20 min read
Implementation of Micro-Frontends with Qiankun in Live Streaming Platform
Xueersi Online School Tech Team
Xueersi Online School Tech Team
Sep 25, 2020 · Frontend Development

Micro‑Frontend Architecture Selection and Implementation with qiankun

This article explains the business need for consolidating multiple management back‑ends, evaluates common micro‑frontend approaches, and details why the team selected qiankun, describing its features, integration strategy, routing and storage isolation, and future extensibility considerations.

Frontend ArchitectureState Managementmicro-frontend
0 likes · 7 min read
Micro‑Frontend Architecture Selection and Implementation with qiankun
58 Tech
58 Tech
Sep 25, 2020 · Frontend Development

Micro‑Frontend Architecture and Implementation with Qiankun for the Huasheng Data Management Platform

This article presents a comprehensive micro‑frontend solution using Qiankun to migrate legacy jQuery/JSP modules, decouple a monolithic front‑end, enable independent development, deployment and scaling, and details the architecture, lifecycle, integration steps for React, UMI, Vue, Angular sub‑applications, as well as deployment, monitoring and permission strategies.

DeploymentFrontend ArchitectureReact
0 likes · 9 min read
Micro‑Frontend Architecture and Implementation with Qiankun for the Huasheng Data Management Platform
vivo Internet Technology
vivo Internet Technology
Jul 15, 2020 · Frontend Development

Micro Frontends: Concepts, Scenarios, and Implementation with single-spa and qiankun

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.

Frontend ArchitectureMicro FrontendsVue.js
0 likes · 14 min read
Micro Frontends: Concepts, Scenarios, and Implementation with single-spa and qiankun
Alibaba Cloud Developer
Alibaba Cloud Developer
Apr 2, 2020 · Frontend Development

How Micro Frontends Transform Large‑Scale Frontend Architecture

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.

Ant FinancialFrontend ArchitectureJavaScript
0 likes · 16 min read
How Micro Frontends Transform Large‑Scale Frontend Architecture
AntTech
AntTech
Aug 26, 2019 · Frontend Development

Micro Frontends: Value, Architecture, and Practical Implementation with Single‑spa and Qiankun

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.

Frontend ArchitectureMicro Frontendsjavascript sandbox
0 likes · 15 min read
Micro Frontends: Value, Architecture, and Practical Implementation with Single‑spa and Qiankun