frontend architecture

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

May 8, 2025 · Frontend Development

Elegant Dialog Invocation in Vue: A Scalable Architecture for Configurable Pop‑ups

This article presents a scalable Vue architecture that separates generic dialog logic from component‑specific configuration panels, using dynamic creation with createApp and Element‑Plus dialogs to achieve high cohesion, low coupling, and easy maintenance for numerous low‑code components.

DialogDynamic ComponentElement-Plus

0 likes · 16 min read

Elegant Dialog Invocation in Vue: A Scalable Architecture for Configurable Pop‑ups

Bilibili Tech

Jan 10, 2025 · Frontend Development

Design and Evolution of Bilibili's Activity Platform Low‑Code System

Bilibili’s Activity Platform low‑code system was completely redesigned over two years, introducing a modular, decoupled architecture with an iframe‑based canvas, unified renderer, and Eva‑CLI tools that cut activity build time from three days to 0.48 days, boosted coverage to 77% of activities, and reduced first‑contentful‑paint by 35%.

Bilibiliactivity platformfrontend architecture

0 likes · 31 min read

Design and Evolution of Bilibili's Activity Platform Low‑Code System

Ctrip Technology

Sep 10, 2024 · Backend Development

Ctrip Hotel BFF Architecture Migration and Efficiency Boost with NestJS and Cloud Functions

The article outlines Ctrip Hotel's transition from a monolithic BFF model to a multi‑endpoint "one‑code‑many‑ends" architecture using NestJS, introduces a cloud‑function platform for improved performance and operational efficiency, and describes a dynamic gateway layer that further enhances front‑end flexibility across multiple client types.

BFFCloud FunctionsNestJS

0 likes · 19 min read

Ctrip Hotel BFF Architecture Migration and Efficiency Boost with NestJS and Cloud Functions

Rare Earth Juejin Tech Community

Jun 27, 2024 · Frontend Development

Understanding Micro Frontends: Concepts, Scenarios, and Solution Comparisons

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

Web Componentsfrontend architectureiframe

0 likes · 26 min read

Understanding Micro Frontends: Concepts, Scenarios, and Solution Comparisons

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.

Reduxfrontend architecturemicro-frontend

0 likes · 13 min read

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

ByteDance Web Infra

Apr 28, 2024 · Frontend Development

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

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

Type SafetyWebpackdevtool

0 likes · 8 min read

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

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.

MicroAppReactUmi

0 likes · 14 min read

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

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.

MonorepoTurborepobuild optimization

0 likes · 17 min read

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

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.

JavaScriptReactTypeScript

0 likes · 13 min read

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

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.

JavaScriptMonorepofrontend architecture

0 likes · 8 min read

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

Ctrip Technology

Aug 10, 2023 · Frontend Development

Design and Practice of RPC‑Based Backend‑for‑Frontend (BFF)

This article explains the motivation behind Backend‑for‑Frontend, compares naive and decoupled BFF implementation patterns, evaluates RESTful, GraphQL and RPC options, and presents a TypeScript‑centric RPC‑BFF solution with schema‑driven validation, type inference, introspection, code generation and advanced optimizations such as merge, batch, streaming, caching and deduplication.

BFFRPCTypeScript

0 likes · 41 min read

Design and Practice of RPC‑Based Backend‑for‑Frontend (BFF)

DaTaobao Tech

Jun 26, 2023 · Frontend Development

Taobao Store Framework: Architecture Evolution, Challenges, and Performance Optimizations

The fifth “Long‑termism Starts from Small Things” article details how Taobao’s mobile store framework evolved from a simple Weex page to a hybrid mini‑program architecture, consolidating serial requests into a unified entry, adding a native container and WebView co‑location, which cut start‑up latency by over 50 % on low‑end devices and boosted overall performance by roughly 20 %.

Cross-PlatformStore Frameworkfrontend architecture

0 likes · 12 min read

Taobao Store Framework: Architecture Evolution, Challenges, and Performance Optimizations

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.

JavaScriptcode-splittingfrontend architecture

0 likes · 15 min read

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

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

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

政采云技术

Feb 14, 2023 · Frontend Development

Analysis of Remesh: A Frontend DDD Framework

This article provides an in-depth analysis of Remesh, a frontend framework implementing Domain-Driven Design (DDD) principles, exploring its core concepts, advantages, and practical implementation.

CQRSDDDDomain-Driven Design

0 likes · 13 min read

Analysis of Remesh: A Frontend DDD Framework

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.

DevOpsReactWebpack

0 likes · 13 min read

Micro‑Frontend Architecture with Webpack Module Federation – Part 1

ByteFE

Nov 7, 2022 · Frontend Development

Micro Frontends: Concepts, Implementation Strategies, and Technical Details

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

JS Sandboxcss isolationfrontend architecture

0 likes · 22 min read

Micro Frontends: Concepts, Implementation Strategies, and Technical Details

DaTaobao Tech

Nov 2, 2022 · Frontend Development

Insights on Front‑End Architecture and the Role of a Front‑End Architect

The senior Taobao front‑end engineer describes how building internal tools like AppDevTools and mtop.js shaped his view of front‑end architecture, outlining the architect’s role in linking product, design, and engineering, creating clear, flexible solutions, guiding teams through systematic problem‑solving, and fostering continuous learning and communication.

SSRbest practicesfrontend architecture

0 likes · 9 min read

Insights on Front‑End Architecture and the Role of a Front‑End Architect