BestHub
Sign in
Tagged articles
113 articles
Page 1 of 2
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
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 2, 2025 · Frontend Development

How to Achieve Real‑Time Version Updates in Micro‑Frontend Apps with Pure Frontend Polling

This article details a zero‑intrusion solution for synchronizing version numbers across multiple micro‑frontend environments using a lightweight frontend poller, static version files, Nginx cache control, and Ant Design Vue modals, enabling testers to see updates within 30 seconds without backend changes.

Ant Design VueNginxVersioning
0 likes · 12 min read
How to Achieve Real‑Time Version Updates in Micro‑Frontend Apps with Pure Frontend Polling
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
Apr 26, 2025 · Frontend Development

Decentralized Micro‑Frontend Architecture with Vite Module Federation in Vue 3

This article explains how to build a decentralized micro‑frontend system for Vue 3 using the Vite‑based @originjs/vite-plugin-federation, covering architecture concepts, configuration, dynamic module loading, shared routing, state management with Pinia, and deployment strategies, complete with code examples.

Dynamic LoadingModule FederationVite
0 likes · 15 min read
Decentralized Micro‑Frontend Architecture with Vite Module Federation in Vue 3
JD Tech Talk
JD Tech Talk
Feb 19, 2025 · Frontend Development

From Monolith to Micro‑Frontend: The Evolution and Refactoring of the Xingyun Frontend Platform

This article recounts the architectural challenges of the Xingyun 2.0 frontend platform, explains why its monolithic codebase and build process became unsustainable, and details the step‑by‑step migration to a modular monorepo with micro‑frontend, Nx, pnpm, and Tailwind to improve scalability, maintainability, and developer productivity.

MonorepoNxTailwind
0 likes · 17 min read
From Monolith to Micro‑Frontend: The Evolution and Refactoring of the Xingyun Frontend Platform
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 4, 2025 · Frontend Development

Vite Port Detection Issue Caused by Host Configuration in Micro‑Frontend Projects

During development of a micro‑frontend project using wujie, the child app required port 5173 for communication, but newly created Vite React‑TS projects failed to auto‑increment the port, revealing that Vite’s port‑detection logic also depends on the host setting, not just the port number.

Host ConfigurationPort DetectionReact
0 likes · 4 min read
Vite Port Detection Issue Caused by Host Configuration in Micro‑Frontend Projects
DaTaobao Tech
DaTaobao Tech
Sep 27, 2024 · Frontend Development

Scalable Front-End Architecture for Marketing Tools: Component Reuse and Micro‑Frontend Design

To meet soaring marketing‑tool demand with limited front‑end staff, the team built a three‑layer, micro‑frontend architecture—page container, scenario template, and business customization—augmented by a plugin‑style micro‑kernel, enabling over 50 % faster development, consistent UI, and configurable blocks, while acknowledging added complexity and performance trade‑offs.

ScalabilityWeb Developmentarchitecture
0 likes · 18 min read
Scalable Front-End Architecture for Marketing Tools: Component Reuse and Micro‑Frontend Design
Beijing SF i-TECH City Technology Team
Beijing SF i-TECH City Technology Team
May 30, 2024 · Frontend Development

Micro‑Frontend Architecture for a Supply‑Chain System Using Single‑SPA

The article describes how a monolithic supply‑chain front‑end was refactored into a micro‑frontend architecture based on Single‑SPA, detailing the background problems, requirements, technical selection, system design, service discovery, module loading, message bus, data sharing, build and deployment, and the resulting performance improvements.

Frontend ArchitectureReduxmicro-frontend
0 likes · 13 min read
Micro‑Frontend Architecture for a Supply‑Chain System Using Single‑SPA
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 25, 2024 · Frontend Development

Frontend Development Trends and Recommendations for 2024

2024 brings rapid AI advances and evolving front‑end technologies, urging developers to adopt TypeScript, master micro‑frontend architectures, embrace server‑side rendering with Next.js, reconsider low‑code and Flutter, and explore full‑stack frameworks, while providing curated resources and insights for staying competitive.

JavaScriptfrontendfull-stack
0 likes · 14 min read
Frontend Development Trends and Recommendations for 2024
JD Tech
JD Tech
Jan 29, 2024 · Frontend Development

Micro Frontend Architecture with MicroApp: Concepts, Benefits, and Implementation Guide

This article explains the micro‑frontend pattern, introduces the MicroApp framework, outlines when to adopt micro‑frontends, compares existing solutions, and provides a step‑by‑step guide for building a React‑based micro‑frontend base with code examples, cross‑origin handling, proxy configuration, and data communication.

Frontend ArchitectureMicroAppReact
0 likes · 14 min read
Micro Frontend Architecture with MicroApp: Concepts, Benefits, and Implementation Guide
Tongcheng Travel Technology Center
Tongcheng Travel Technology Center
Dec 14, 2023 · Frontend Development

Micro‑Frontend Implementation and Monorepo Management for Large‑Scale Frontend Projects

This article describes how a legacy data‑platform was refactored using a micro‑frontend architecture with Micro‑App, detailed design of main and sub applications, permission handling, routing, build tooling, and a Turborepo‑based monorepo strategy to improve development efficiency and deployment speed.

Build OptimizationFrontend ArchitectureMonorepo
0 likes · 17 min read
Micro‑Frontend Implementation and Monorepo Management for Large‑Scale Frontend Projects
DeWu Technology
DeWu Technology
Nov 22, 2023 · Frontend Development

Chrome Proxy Plugin for Efficient Micro‑Frontend Development

A Chrome proxy plugin was built to intercept micro‑frontend requests and map online URLs to local development servers, eliminating the need to launch both parent and child apps, restoring hot‑module replacement speed, offering one‑click rule configuration, and achieving full coverage and faster development for DeWu’s team.

Chrome ExtensionProxydevelopment efficiency
0 likes · 16 min read
Chrome Proxy Plugin for Efficient Micro‑Frontend Development
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Nov 20, 2023 · Frontend Development

Low-Code Practices in NetEase Cloud Music's Mid-Platform Frontend Team

NetEase Cloud Music’s mid‑platform frontend team tackled fragmented product lines and low throughput by standardizing metadata, revamping cross‑team workflows, introducing bi‑weekly reviews, adopting a hybrid micro‑frontend architecture, and building reusable low‑code components and backend code‑generation tools, which doubled demand throughput while highlighting template benefits and remaining asset gaps.

NetEase Cloud Musicfrontendmicro-frontend
0 likes · 10 min read
Low-Code Practices in NetEase Cloud Music's Mid-Platform Frontend Team
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 17, 2023 · Frontend Development

Front‑End Technical Infrastructure: Building a Solid Foundation for Development Teams

This article explains why front‑end teams should invest in technical infrastructure—covering fundamentals such as documentation, standards, scaffolding, component libraries, tooling, CI/CD, data monitoring, and micro‑frontend approaches—to improve efficiency, reduce blockers, and support future business growth.

Toolingci/cdmicro-frontend
0 likes · 16 min read
Front‑End Technical Infrastructure: Building a Solid Foundation for Development Teams
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 19, 2023 · Frontend Development

Integrating Monorepo with Micro‑Frontend Using pnpm and Micro‑App: Architecture, Implementation, and Deployment

This article explains how to combine Monorepo and micro‑frontend architectures using pnpm and Micro‑App, covering the concepts, technical selections, step‑by‑step setup of base and child applications, shared modules, configuration, code standards, mock services, Docker/Nginx deployment, and best practices for frontend development.

MonorepoVitefrontend
0 likes · 35 min read
Integrating Monorepo with Micro‑Frontend Using pnpm and Micro‑App: Architecture, Implementation, and Deployment
JD Retail Technology
JD Retail Technology
Oct 16, 2023 · Frontend Development

MicroApp 1.0: Faster Sandbox and Virtual Routing for Micro‑Frontend Development

MicroApp 1.0 introduces a streamlined micro‑frontend framework with a simplified integration method, a high‑performance sandbox using variable pre‑placement and async debounce, a virtual routing system that isolates sub‑app navigation, upgraded CSS isolation, Vite compatibility, and a Chrome DevTools extension for enhanced debugging.

DevToolsVitefrontend framework
0 likes · 10 min read
MicroApp 1.0: Faster Sandbox and Virtual Routing for Micro‑Frontend Development
JD Retail Technology
JD Retail Technology
Oct 7, 2023 · Frontend Development

Micro Frontend Architecture: Concepts, Usage Scenarios, and Step‑by‑Step Guide to Building a React Base Application

This article explains the micro‑frontend concept, outlines when it is appropriate to adopt, compares popular frameworks, and provides a detailed tutorial—including code snippets—for creating a React‑based micro‑frontend base (host) application using the micro‑app library.

Frontend ArchitectureWeb Developmentmicro-app
0 likes · 13 min read
Micro Frontend Architecture: Concepts, Usage Scenarios, and Step‑by‑Step Guide to Building a React Base Application
Goodme Frontend Team
Goodme Frontend Team
Aug 29, 2023 · Frontend Development

How Guming Built a Zero‑Config Micro‑Frontend Architecture for Its Backend Systems

This article explains how Guming's frontend team unified development across multiple backend subsystems by abandoning qiankun, defining strict routing and deployment conventions, automating enforcement through a custom build tool, and providing SDKs, sandboxing, and local development support to boost efficiency and user experience.

Build Automationarchitecturefrontend
0 likes · 19 min read
How Guming Built a Zero‑Config Micro‑Frontend Architecture for Its Backend Systems
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
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 18, 2023 · Frontend Development

Why We Need Mini Programs, Micro‑Frontends, and Module Loading: A Technical Reflection

The article explores the motivations behind mini programs, micro‑frontends, and module loading, comparing their technical advantages, business implications, and ecosystem challenges while questioning whether these solutions truly address core problems or merely serve as market‑driven silver bullets.

Mini Programfrontendmicro-frontend
0 likes · 19 min read
Why We Need Mini Programs, Micro‑Frontends, and Module Loading: A Technical Reflection
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 15, 2023 · Frontend Development

Understanding Browser Caching: Strong vs. Conditional Cache, Disk & Memory, and Nginx Configuration

This article explains the complete browser caching workflow for Google Chrome, covering strong and conditional caching mechanisms, the differences between disk and memory caches, relevant HTTP response headers, how to clear or bypass caches, and practical Nginx configuration tips for front‑end developers.

Cache-ControlNginxbrowser caching
0 likes · 16 min read
Understanding Browser Caching: Strong vs. Conditional Cache, Disk & Memory, and Nginx Configuration
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 13, 2023 · Frontend Development

Browser Cache Optimization Strategies for Micro‑Frontend Architecture

This article analyzes the challenges of browser caching in micro‑frontend projects, presents a systematic optimization plan—including resource versioning, server‑side URL proxying, nginx cache‑control configuration, and CDN integration—and demonstrates a 48.5% reduction in page‑load time with detailed implementation steps and performance data.

Browser CacheETagNginx
0 likes · 27 min read
Browser Cache Optimization Strategies for Micro‑Frontend Architecture
HelloTech
HelloTech
Aug 3, 2023 · Frontend Development

Dora: An Open‑Source Taro Mini‑Program Micro‑Frontend Framework

Dora is an open‑source micro‑frontend framework for Taro mini‑programs that lets developers split multi‑page business logic into independent sub‑applications managed via a simple config.json, communicate through a context bridge and event system, and synchronize versions with Git tags, streamlining multi‑team collaboration and reducing overall complexity.

frontendmicro-frontendmini-program
0 likes · 7 min read
Dora: An Open‑Source Taro Mini‑Program Micro‑Frontend Framework
Weimob Technology Center
Weimob Technology Center
Jul 28, 2023 · Frontend Development

JavaScript Sandboxes for Secure Micro‑Frontend Apps: Techniques & Examples

This article explains the concept of sandbox security mechanisms, explores their use cases in iPaaS API orchestration and micro‑frontend applications, compares eval, Function, with + proxy techniques, presents JavaScript, iframe and Node vm sandbox implementations, and details practical deployments within the Kraken framework and a centralized approval service.

JavaScriptNode.jsSecurity
0 likes · 18 min read
JavaScript Sandboxes for Secure Micro‑Frontend Apps: Techniques & Examples
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Jul 14, 2023 · Frontend Development

Exploring Modern Frontend Techniques: Micro‑Frontends, Pixi.js, Import Maps & More

This article curates a series of frontend engineering insights, covering request‑optimization strategies, an introduction to micro‑frontends with qiankun, building a custom animated chart as an alternative to ECharts, quick Pixi.js basics, the new JavaScript Import Maps feature, and a brief overview of the Cloud Academy frontend team.

Import MapsJavaScriptfrontend
0 likes · 3 min read
Exploring Modern Frontend Techniques: Micro‑Frontends, Pixi.js, Import Maps & More
Bilibili Tech
Bilibili Tech
Jul 4, 2023 · Frontend Development

Micro‑Frontend Integration and Platformization at Bilibili: Design, Implementation, and Lessons Learned

Bilibili consolidated over thirty fragmented internal back‑ends into a unified micro‑frontend platform called Source Universe Workbench by selecting the micro‑app framework, implementing centralized routing, cross‑domain XHR interception, shared services, and observability, which streamlined user experience, eliminated duplicated infrastructure, and provided actionable insights for legacy system management.

architecturecross-domainmicro-frontend
0 likes · 15 min read
Micro‑Frontend Integration and Platformization at Bilibili: Design, Implementation, and Lessons Learned
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
Programmer DD
Programmer DD
Jun 9, 2023 · Frontend Development

Explore Tencent’s Open‑Source Front‑End Frameworks: wujie and Omi

This article introduces Tencent’s two open‑source front‑end frameworks—wujie, a micro‑frontend solution built on Web Components and iframes, and Omi, a cross‑framework, cross‑platform library—detailing their core concepts, key features, and where to find their source code.

OmiTencentfrontend
0 likes · 6 min read
Explore Tencent’s Open‑Source Front‑End Frameworks: wujie and Omi
Alibaba Cloud Developer
Alibaba Cloud Developer
May 31, 2023 · Frontend Development

Build a Micro‑Frontend Framework from Scratch with Vue3, React15/16 and TypeScript

This article walks through creating a full‑featured micro‑frontend framework using TypeScript, covering sub‑application registration, router interception, sandbox isolation, CSS scoping, inter‑app communication, global state management, caching, and prefetching, all demonstrated with Vue3 as the host and Vue2, React15, and React16 as child apps.

Vue3global-statemicro-frontend
0 likes · 27 min read
Build a Micro‑Frontend Framework from Scratch with Vue3, React15/16 and TypeScript
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
IT Services Circle
IT Services Circle
Mar 29, 2023 · Frontend Development

Top 10 Popular Frontend Open‑Source Projects from Tencent

This article surveys Tencent's ten most popular frontend open‑source projects, describing each library or framework, its key features, typical use cases, and providing GitHub links with star counts to help developers discover valuable tools for web, mobile, and mini‑program development.

Mini ProgramTencentmicro-frontend
0 likes · 8 min read
Top 10 Popular Frontend Open‑Source Projects from Tencent
政采云技术
政采云技术
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
JD Retail Technology
JD Retail Technology
Feb 9, 2023 · Frontend Development

MicroApp V1.0.0‑rc Release: Core Architecture, High‑Performance Sandbox, New Configurations, and Real‑World Use Cases

The MicroApp V1.0.0‑rc release introduces a component‑based micro‑frontend solution with a custom WebComponent‑like architecture, a virtual routing system, a high‑performance sandbox that leverages caching and decoupling, extensive performance benchmarks, new configuration options, lifecycle listeners, and a practical JD marketing‑center case study.

JavaScriptfrontend developmentmicro-frontend
0 likes · 11 min read
MicroApp V1.0.0‑rc Release: Core Architecture, High‑Performance Sandbox, New Configurations, and Real‑World Use Cases
Sohu Tech Products
Sohu Tech Products
Jan 25, 2023 · Frontend Development

Micro‑Frontend Architecture with Webpack Module Federation – Part 1

This article explains how a growing React‑based admin panel was split into independent micro‑frontends using Webpack Module Federation, covering the background, reasons for choosing federation, three integration patterns, step‑by‑step setup, routing, shared state, hot‑reload, deployment considerations and practical code examples.

Frontend ArchitectureModule Federationmicro-frontend
0 likes · 13 min read
Micro‑Frontend Architecture with Webpack Module Federation – Part 1
Alibaba Terminal Technology
Alibaba Terminal Technology
Nov 22, 2022 · Frontend Development

When Iframe Beats Micro‑Frontend: A Practical Guide to Seamless System Integration

This article examines the advantages and drawbacks of using iframes for embedding one system into another, outlines suitable scenarios, and provides a step‑by‑step implementation—including URL synchronization, navigation handling, and loading management—using React and plain JavaScript to achieve a smooth, micro‑frontend‑free integration.

System Integrationfrontendiframe
0 likes · 20 min read
When Iframe Beats Micro‑Frontend: A Practical Guide to Seamless System Integration
Ctrip Technology
Ctrip Technology
Oct 27, 2022 · Frontend Development

Lingjie Page-Level Micro‑Frontend Framework: Principles, Types, and Practical Usage

This article introduces the Lingjie page‑level micro‑frontend solution, explains the concept and types of micro‑frontends, describes its design principles and iframe‑based architecture, outlines core features, and provides step‑by‑step guidance for integrating and optimizing applications with Lingjie.

Frontend ArchitecturePerformance Optimizationiframe
0 likes · 15 min read
Lingjie Page-Level Micro‑Frontend Framework: Principles, Types, and Practical Usage
ELab Team
ELab Team
Oct 21, 2022 · Frontend Development

Mastering Code Sharing in Micro‑Frontends with Webpack 5 Module Federation

This article explores various strategies for sharing code across micro‑frontend applications—including NPM packages, monorepos, Webpack DLLPlugin, Externals, and the powerful Webpack 5 Module Federation—detailing their configurations, performance trade‑offs, and practical implementation steps to achieve efficient, dynamic module sharing.

Module Federationcode sharingmicro-frontend
0 likes · 19 min read
Mastering Code Sharing in Micro‑Frontends with Webpack 5 Module Federation
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
JD Retail Technology
JD Retail Technology
Oct 14, 2022 · Industry Insights

Key Front‑End Innovations from JD’s 2022 Tech Salon: AR/VR, Low‑Code & More

The 2022 JD Front‑End Technology Salon gathered experts from leading companies to share practical insights on virtual digital humans, Node.js monitoring, lightweight cross‑platform rendering, low‑code platforms, micro‑frontend solutions, and other cutting‑edge front‑end technologies driving business growth.

AR/VRTech Conferencefrontend
0 likes · 13 min read
Key Front‑End Innovations from JD’s 2022 Tech Salon: AR/VR, Low‑Code & More
JD Retail Technology
JD Retail Technology
Oct 12, 2022 · Frontend Development

Micro‑Frontend Architecture for H5 E‑Commerce: Design, Implementation, and Progressive Upgrade

This article presents a comprehensive micro‑frontend solution for H5 e‑commerce sites, covering background analysis, problem identification, architectural design with BFF layer, code examples for registration, routing, and progressive migration, and concludes with the benefits of modular, SEO‑friendly front‑end development.

BFFFrontend ArchitectureReact
0 likes · 20 min read
Micro‑Frontend Architecture for H5 E‑Commerce: Design, Implementation, and Progressive Upgrade
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 12, 2022 · Frontend Development

Implementing a Simple Micro‑Application Loader with Qiankun: Code Walkthrough and Sandbox Isolation

This tutorial demonstrates how to build a lightweight function that loads a micro‑application by fetching its HTML, converting external CSS links to inline styles, applying scoped CSS isolation, executing JavaScript within a snapshot sandbox, and discusses entry‑point handling, isolation limitations, and routing integration.

JavaScriptcss isolationfrontend development
0 likes · 13 min read
Implementing a Simple Micro‑Application Loader with Qiankun: Code Walkthrough and Sandbox Isolation
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
ByteDance Web Infra
ByteDance Web Infra
Jun 29, 2022 · Frontend Development

Starry Platform: Code‑In & Code‑Out Low‑Code Solution for Frontend Development and Micro‑Frontend Integration

The article explains how ByteDance’s Starry low‑code platform uses a Code‑In/Code‑Out model to enable flexible component development, break R&D bottlenecks, generate full React projects, and integrate with micro‑frontend architectures like Garfish to support SSR for large‑scale web applications.

DSLReactfrontend
0 likes · 14 min read
Starry Platform: Code‑In & Code‑Out Low‑Code Solution for Frontend Development and Micro‑Frontend Integration
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
JD Retail Technology
JD Retail Technology
Jun 7, 2022 · Frontend Development

Building a New Product CMS with the Waterdrop Low‑Code Platform: A Best‑Practice Guide

This article details how the Waterdrop low‑code platform was used to rapidly create a new product material‑review CMS embedded in a marketing center, covering requirement analysis, custom component development, visual page building, event orchestration, API integration, permission control, and zero‑ops cloud deployment within a six‑day timeline.

CMSDeploymentDrag-and-Drop
0 likes · 12 min read
Building a New Product CMS with the Waterdrop Low‑Code Platform: A Best‑Practice Guide
政采云技术
政采云技术
May 24, 2022 · Frontend Development

An Overview of Module Federation

This article introduces Webpack 5's Module Federation feature, explains its business scenarios, configuration, underlying plugin architecture, and runtime mechanics, provides a practical Vue 3 demo with code snippets, and discusses usage patterns and benefits for micro‑frontend development.

JavaScriptModule FederationVue3
0 likes · 13 min read
An Overview of Module Federation
DeWu Technology
DeWu Technology
May 23, 2022 · Frontend Development

Micro‑Frontend Architecture with Qiankun and Module Federation: Design, Implementation, and Performance

The team replaced a heavy SPA‑plus‑iframe workbench with a micro‑frontend architecture using Qiankun and Webpack 5 Module Federation, enabling independent development, caching, sandboxed isolation, and remote component integration, which cut load time, improved stability, and accelerated releases while highlighting migration challenges.

Module Federationfrontendmicro-frontend
0 likes · 19 min read
Micro‑Frontend Architecture with Qiankun and Module Federation: Design, Implementation, and Performance
Alibaba Terminal Technology
Alibaba Terminal Technology
May 10, 2022 · Frontend Development

Unlock Seamless Code Sharing with Webpack 5 Module Federation

This article explains how Webpack 5's Module Federation feature enables dynamic code sharing and dependency sharing across micro‑frontend applications, walks through its core concepts, shows practical configuration and code examples, and discusses its advantages, drawbacks, and typical use cases.

Dependency SharingModule Federationcode sharing
0 likes · 32 min read
Unlock Seamless Code Sharing with Webpack 5 Module Federation
Baidu Geek Talk
Baidu Geek Talk
Apr 29, 2022 · Frontend Development

Building a Scalable Micro‑Frontend Architecture with Tangram‑SDK

This article details how the iFanFan team transformed a monolithic Vue front‑end into a micro‑frontend system using a unified CLI tool, covering routing, packaging, independent development, version management, isolation, communication, CI/CD integration, multi‑product support, and performance optimizations.

CLI toolFrontend ArchitecturePerformance Optimization
0 likes · 12 min read
Building a Scalable Micro‑Frontend Architecture with Tangram‑SDK
Dada Group Technology
Dada Group Technology
Apr 29, 2022 · Frontend Development

Micro‑Frontend Architecture for Dada Express Operation System: Challenges and Solution

The Dada Express operation system, originally a monolithic front‑end composed of rapidly growing sub‑systems, suffered from queued deployments, inability to roll back, and slow builds, leading to a micro‑frontend redesign using single‑spa, import‑maps, and SystemJS to isolate, version, and accelerate development without sacrificing user experience.

Frontend ArchitectureImport MapsIsolation
0 likes · 16 min read
Micro‑Frontend Architecture for Dada Express Operation System: Challenges and Solution
SQB Blog
SQB Blog
Apr 26, 2022 · Frontend Development

How Micro‑Frontend Architecture Transformed a Massive Ops Management Platform

This article explains how a large, monolithic internal operations management system was refactored into a micro‑frontend architecture, detailing the container framework, SSO integration, resource‑permission system, communication mechanisms, and the resulting benefits for independent team development and performance.

Frontend ArchitectureSSOcontainer framework
0 likes · 11 min read
How Micro‑Frontend Architecture Transformed a Massive Ops Management Platform
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
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
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Feb 10, 2022 · Frontend Development

What Front‑End Trends Shaped 2021 and What to Expect in 2022?

The 2021 front‑end landscape saw steady growth in TypeScript, continued innovation in React, the rise of Svelte, expanding desktop frameworks, Rust’s increasing role in tooling, a surge in low‑code platforms, D2C intelligence experiments, DevOps focus on efficiency, and evolving micro‑frontend solutions, all pointing to a dynamic 2022.

RustSveltefrontend
0 likes · 38 min read
What Front‑End Trends Shaped 2021 and What to Expect in 2022?
HelloTech
HelloTech
Jan 25, 2022 · Frontend Development

Introduction and Practice of Web Components and Shadow DOM

The article explains Web Components and their three core technologies—Template, Shadow DOM for CSS isolation, and Custom Elements—demonstrates building a dynamic HTML5 video component with lifecycle callbacks, and discusses use cases such as component libraries, cross‑platform development, micro‑frontends, and the feature‑rich Quark library.

Component ArchitectureFront-endShadow DOM
0 likes · 5 min read
Introduction and Practice of Web Components and Shadow DOM
Kuaishou Tech
Kuaishou Tech
Dec 31, 2021 · Frontend Development

Design Considerations and Challenges in Micro‑Frontend Architecture

This article examines the practical design choices, sandbox limitations, preloading strategies, release handling, nested applications, cross‑app navigation, keep‑alive usage, shared dependencies, conflict detection, joint development, and progressive evolution of micro‑frontend solutions, offering insights and future directions.

Keep-Aliveconflict detectionmicro-frontend
0 likes · 20 min read
Design Considerations and Challenges in Micro‑Frontend Architecture
Kuaishou Tech
Kuaishou Tech
Dec 30, 2021 · Frontend Development

Micro‑Frontend Design and Loading Strategies: From Monolithic Workbench to Single‑spa

This article analyzes the challenges of monolithic admin workbenches, explains how micro‑frontend architecture—especially the single‑spa library—addresses routing, state‑machine coordination, resource loading, and lifecycle management, and compares practical loader implementations using Ajax and tag‑based approaches for production environments.

Frontend Architectureloader designmicro-frontend
0 likes · 17 min read
Micro‑Frontend Design and Loading Strategies: From Monolithic Workbench to Single‑spa
21CTO
21CTO
Dec 5, 2021 · Frontend Development

Unlocking Scalable Web Apps: How Micro‑Frontends Transform Frontend Architecture

This article explains the fundamentals of micro‑services architecture, then shows how its principles extend to the front‑end as micro‑frontends, detailing core concepts such as technical independence, isolated code, naming conventions, native browser communication, resilient design, and the many advantages they bring to modern web development.

Frontend ArchitectureMicroservicesScalable Design
0 likes · 6 min read
Unlocking Scalable Web Apps: How Micro‑Frontends Transform Frontend Architecture
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
Taobao Frontend Technology
Taobao Frontend Technology
Nov 9, 2021 · Frontend Development

Why IceJS 2.0 Is Revolutionizing Frontend Development with Vite and Webpack

IceJS, a progressive React‑based framework from Alibaba's ICE team, has evolved to version 2.0, adding Vite support, Webpack 5 upgrades, SWC compilation, Module Federation pre‑bundling, SSG capabilities, and tighter micro‑frontend integration, dramatically improving developer experience and build performance.

frontend frameworkicejsmicro-frontend
0 likes · 15 min read
Why IceJS 2.0 Is Revolutionizing Frontend Development with Vite and Webpack
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
ELab Team
ELab Team
Oct 20, 2021 · Frontend Development

Deep Dive into Garfish Micro‑Frontend Architecture: Resource Loading, Sandbox, and Script Execution

This article examines Garfish's micro‑frontend implementation by dissecting resource loading, HTML parsing, sandbox environment construction, and script execution, providing detailed code analysis and comparisons with Qiankun to reveal the core mechanics behind modern micro‑frontend solutions.

Frontend Architecturemicro-frontendresource-loading
0 likes · 12 min read
Deep Dive into Garfish Micro‑Frontend Architecture: Resource Loading, Sandbox, and Script Execution
Baidu Intelligent Testing
Baidu Intelligent Testing
Oct 14, 2021 · Frontend Development

Lowcode, Micro‑Frontend, and the Future of Front‑End Frameworks

This article analyses the rise of lowcode and micro‑frontend approaches, examines their current challenges and use‑cases, and proposes a next‑generation, highly engineered front‑end framework that leverages JSON‑driven configuration to balance developer productivity with platform flexibility.

ComponentizationFront-end frameworksJSON configuration
0 likes · 11 min read
Lowcode, Micro‑Frontend, and the Future of Front‑End Frameworks
ByteDance Web Infra
ByteDance Web Infra
Sep 30, 2021 · Frontend Development

Micro‑Frontend Architecture and Garfish Solution Overview

This article explains the background, significance, and challenges of large‑scale web applications, introduces micro‑frontend concepts, compares SPA and MPA approaches, and details the Garfish three‑layer architecture, sandbox designs, routing strategies, deployment platform, and best practices for building enterprise‑grade micro‑frontend systems.

Frontend ArchitectureGarfishRouter
0 likes · 35 min read
Micro‑Frontend Architecture and Garfish Solution Overview
21CTO
21CTO
Aug 29, 2021 · Frontend Development

Lowcode & Micro‑Frontend: Shaping the Next‑Gen Front‑End Framework

This article examines the rise of lowcode and micro‑frontend architectures, discusses their benefits and limitations, and presents a data‑driven, JSON‑based front‑end framework that aims to unify component development, page configuration, and engineering practices for the next generation of web applications.

Component ArchitectureLowCodefrontend engineering
0 likes · 12 min read
Lowcode & Micro‑Frontend: Shaping the Next‑Gen Front‑End Framework
Baidu Geek Talk
Baidu Geek Talk
Aug 23, 2021 · Frontend Development

Exploring Lowcode and Micro‑Frontend: Towards the Next Generation Front‑End Framework

The article surveys the evolution of front‑end development, explains the surge of low‑code platforms and micro‑frontend architectures, and proposes a next‑generation, JSON‑driven framework that separates component creation from page configuration to combine rapid low‑code productivity with the flexibility of traditional code.

FrameworkLowCodeSoftware Architecture
0 likes · 10 min read
Exploring Lowcode and Micro‑Frontend: Towards the Next Generation Front‑End Framework
ELab Team
ELab Team
Aug 9, 2021 · Frontend Development

How to Share Components Across Tech Stacks with Micro‑Frontend and Module Federation

This article explores engineering solutions for sharing UI components across different front‑end frameworks and repositories, detailing micro‑frontend approaches with Garfish, component‑level embedding, data synchronization, and alternative strategies like Webpack Module Federation and Bit, while comparing their advantages, limitations, and practical implementation steps.

BitFrontend ArchitectureModule Federation
0 likes · 29 min read
How to Share Components Across Tech Stacks with Micro‑Frontend and Module Federation
Taobao Frontend Technology
Taobao Frontend Technology
Jul 15, 2021 · Frontend Development

Cutting Shop Page Load Time in Half: Micro‑Frontend Performance Optimization Strategies

This article details how a large‑scale e‑commerce shop improved first‑screen load speed by over 50% through micro‑frontend architecture, full‑chain performance tracing, interface caching, parallel rendering, and template‑based snapshot rendering, providing a repeatable optimization framework for complex web applications.

Frontend ArchitecturePerformance OptimizationWeb Performance
0 likes · 15 min read
Cutting Shop Page Load Time in Half: Micro‑Frontend Performance Optimization Strategies
Taobao Frontend Technology
Taobao Frontend Technology
Jul 13, 2021 · Frontend Development

How to Optimize Shop Frontend Performance with Micro‑Frontend Architecture

This article details how a micro‑frontend architecture and a series of performance‑focused techniques—including full‑link tracing, interface caching, parallel rendering, and template‑based snapshot rendering—were applied to dramatically improve shop page load times across devices.

frontend performancemicro-frontendparallel rendering
0 likes · 14 min read
How to Optimize Shop Frontend Performance with Micro‑Frontend Architecture
ByteFE
ByteFE
Jul 6, 2021 · Frontend Development

Micro‑Frontend Architecture Overview, Practices, and Sandbox Isolation

This article provides a comprehensive overview of micro‑frontend concepts, typical system components, governance and development tooling, runtime container responsibilities, various sandbox isolation techniques (including snapshot, Proxy, iframe, Realms, and Shadow DOM), and practical considerations such as technical debt and migration strategies.

Frontend ArchitectureModule Federationcss isolation
0 likes · 26 min read
Micro‑Frontend Architecture Overview, Practices, and Sandbox Isolation
LOFTER Tech Team
LOFTER Tech Team
Jul 6, 2021 · Frontend Development

Micro‑Frontend Architecture: Browser Sandbox, Shadow DOM, and Proxy Techniques

This article explains the concept of micro‑frontend, compares common implementation approaches such as dynamic module loading and browser sandboxing, details the use of Shadow DOM and Proxy for isolation, introduces frameworks like qiankun and hot‑chocolate, and describes an application platform that streamlines build, upload, and release workflows for complex front‑end projects.

Frontend ArchitectureProxybrowser sandbox
0 likes · 17 min read
Micro‑Frontend Architecture: Browser Sandbox, Shadow DOM, and Proxy Techniques
Baidu Geek Talk
Baidu Geek Talk
Jun 28, 2021 · Frontend Development

How EMP Simplifies Micro‑Frontend Architecture for Large Web Projects

This article introduces EMP, a micro‑frontend solution that helps developers build production‑ready micro‑frontend architectures more easily and efficiently by addressing large bundle sizes, team collaboration, and module sharing, and provides detailed usage scenarios, ecosystem support, configuration examples, upgrade guides, and performance comparisons.

EMPFrontend ArchitectureModule Federation
0 likes · 9 min read
How EMP Simplifies Micro‑Frontend Architecture for Large Web Projects
JD Retail Technology
JD Retail Technology
Jun 7, 2021 · Frontend Development

Micro App: A Lightweight Micro‑Frontend Framework by JD iPaaS Team

Micro App is a JD iPaaS‑developed micro‑frontend framework that simplifies integration by using a custom element with HTML entry, element isolation, js sandbox, plugin system, pre‑loading, and resource address completion, offering lower entry cost and higher efficiency than existing solutions.

JS SandboxPlugin SystemResource Isolation
0 likes · 14 min read
Micro App: A Lightweight Micro‑Frontend Framework by JD iPaaS Team
ITPUB
ITPUB
May 8, 2021 · Frontend Development

From Static Pages to Server‑Side Rendering: A 30‑Year Journey of Web Technology

This article traces the evolution of web technologies from Tim Berners‑Lee's first static page in 1991 through the rise of HTML, CSS, JavaScript, dynamic server‑side solutions like PHP and AJAX, the emergence of SPAs, and modern innovations such as SSR, React Server Components, and Web Components, highlighting key milestones, challenges, and future directions.

CSSHTMLJavaScript
0 likes · 17 min read
From Static Pages to Server‑Side Rendering: A 30‑Year Journey of Web Technology
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
Taobao Frontend Technology
Taobao Frontend Technology
Feb 25, 2021 · Frontend Development

How a Micro‑Frontend Workbench Boosts E‑Commerce Operations Efficiency

An Operations Workbench built on a micro‑frontend architecture unifies fragmented e‑commerce tools into standardized Process Units and SOPs, boosting operational efficiency, reducing technical duplication, and providing data‑driven, consistent experiences for thousands of operators across hundreds of business scenarios.

OperationsSOParchitecture
0 likes · 23 min read
How a Micro‑Frontend Workbench Boosts E‑Commerce Operations Efficiency
Product Technology Team
Product Technology Team
Jan 28, 2021 · Frontend Development

Zhenkunxing’s Frontend Overhaul 2020‑2021: Visual Editors, UI Libraries & Low‑Code

From 2020 to 2021, Zhenkunxing built a visual‑editing service, a unified UI component library, standardized development, compilation and deployment pipelines, a front‑end portal, an online‑form system, an OKR tool, and a micro‑frontend BOSS platform, while planning a low‑code platform to boost efficiency and scalability.

Component LibraryDevOpsVisual Editor
0 likes · 14 min read
Zhenkunxing’s Frontend Overhaul 2020‑2021: Visual Editors, UI Libraries & Low‑Code
phodal
phodal
Jan 25, 2021 · Frontend Development

What’s Shaping Front‑End Development in 2022? Architecture, Micro‑Frontends, Low‑Code & Beyond

The article reviews current front‑end trends, covering architecture governance, the rise of micro‑frontends, the resurgence of low‑code platforms, cross‑language innovations, and serverless options, while offering practical advice on tooling, standards, and strategic choices for teams of any size.

Frontend ArchitectureServerlessWeb Development
0 likes · 9 min read
What’s Shaping Front‑End Development in 2022? Architecture, Micro‑Frontends, Low‑Code & Beyond
Qunar Tech Salon
Qunar Tech Salon
Dec 24, 2020 · Frontend Development

Design and Implementation of a Component Management System for Large‑Scale Marketing Pages at Qunar

This article describes how Qunar built a Component Management System (CMS) that enables reusable, configurable marketing pages across app, H5 and mini‑programs, detailing the business needs, architectural decisions, multi‑end rendering, risk controls, operational workflow, and the resulting cost and experience benefits.

Component ManagementMarketing Automationlow-code
0 likes · 11 min read
Design and Implementation of a Component Management System for Large‑Scale Marketing Pages at Qunar
Sensors Frontend
Sensors Frontend
Dec 14, 2020 · Frontend Development

Top Frontend Techniques: Micro‑Frontends, CSS @apply, Canvas Signatures, SSR & More

Explore a curated collection of cutting‑edge frontend knowledge—including a zero‑cost micro‑frontend framework, reasons to drop CSS @apply, canvas‑based electronic signatures with PDF output, large‑scale SSR strategies, Chrome 87 enhancements, ECMAScript 2021 features, XSS defenses, automated SVG icon delivery, ESLint best practices, JavaScript metaprogramming, node_modules pitfalls, Monorepo management, and Rax mini‑program runtime insights.

DevOpsJavaScriptSecurity
0 likes · 10 min read
Top Frontend Techniques: Micro‑Frontends, CSS @apply, Canvas Signatures, SSR & More
Alibaba Cloud Developer
Alibaba Cloud Developer
Dec 8, 2020 · Frontend Development

How to Seamlessly Integrate Micro‑Frontends into Legacy Sites: A Practical Guide

This article explains the benefits and pain points of micro‑frontends, outlines a systematic integration approach for existing legacy sites, describes essential loaders and plugins, and provides detailed migration steps and implementation nuances to achieve a stable, extensible frontend architecture.

Frontend ArchitecturePlugin Systemloader
0 likes · 11 min read
How to Seamlessly Integrate Micro‑Frontends into Legacy Sites: A Practical Guide
58 Tech
58 Tech
Nov 4, 2020 · Frontend Development

Micro‑Frontend Implementation in a Financial Management System: Architecture, Solutions, and Outcomes

This article presents a detailed case study of how a financial company adopted a micro‑frontend architecture to build a unified, low‑cost, and user‑friendly management platform, covering the motivations, design principles, technical components, deployment workflow, permission handling, and the resulting operational benefits.

DeploymentUI integrationfinancial systems
0 likes · 8 min read
Micro‑Frontend Implementation in a Financial Management System: Architecture, Solutions, and Outcomes
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
58 Tech
58 Tech
Sep 18, 2020 · Frontend Development

Micro‑Frontend Architecture with Vue: Concepts, Scenarios, and Implementation Guide

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.

DeploymentDevOpsFrontend Architecture
0 likes · 16 min read
Micro‑Frontend Architecture with Vue: Concepts, Scenarios, and Implementation Guide
Tongcheng Travel Technology Center
Tongcheng Travel Technology Center
Sep 17, 2020 · Frontend Development

Micro‑Frontend Architecture: Benefits, Implementation Options, and Technical Details

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.

Frontend ArchitectureVueiframe
0 likes · 15 min read
Micro‑Frontend Architecture: Benefits, Implementation Options, and Technical Details
vivo Internet Technology
vivo Internet Technology
Sep 2, 2020 · Frontend Development

vivo Mall Frontend Architecture Upgrade: A Layered Architecture Exploration

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.

BFFComponent LibraryFrontend Architecture
0 likes · 17 min read
vivo Mall Frontend Architecture Upgrade: A Layered Architecture Exploration
Taobao Frontend Technology
Taobao Frontend Technology
Aug 25, 2020 · Frontend Development

Mastering Micro‑Frontend Architecture with icestark: From Scenarios to Isolation

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.

Frontend ArchitectureSPAicestark
0 likes · 20 min read
Mastering Micro‑Frontend Architecture with icestark: From Scenarios to Isolation
Fulu Network R&D Team
Fulu Network R&D Team
Jun 8, 2020 · Frontend Development

Design and Implementation of a Micro‑Frontend Architecture for Internal Systems

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.

Frontend ArchitectureResource Managementmicro-frontend
0 likes · 14 min read
Design and Implementation of a Micro‑Frontend Architecture for Internal Systems
Alibaba Cloud Developer
Alibaba Cloud Developer
May 18, 2020 · Frontend Development

Mastering Micro‑Frontend Sandboxing with Alibaba Cloud’s Browser‑VM

This article explains how Alibaba Cloud’s ConsoleOS implements a JavaScript and CSS sandbox for micro‑frontend applications, covering the underlying principles, code examples, native object simulation via iframes, CSS isolation techniques, and integration tips for other micro‑frontend frameworks.

JavaScriptbrowser vmcss isolation
0 likes · 12 min read
Mastering Micro‑Frontend Sandboxing with Alibaba Cloud’s Browser‑VM
Alibaba Terminal Technology
Alibaba Terminal Technology
May 16, 2020 · Frontend Development

How DataWorks Scaled Its IDE with Micro‑Frontend and Plugin Architecture

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.

Frontend ArchitectureIDEPlugin System
0 likes · 29 min read
How DataWorks Scaled Its IDE with Micro‑Frontend and Plugin Architecture