BestHub
Sign in
Tagged articles
157 articles
Page 1 of 2
Shuge Unlimited
Shuge Unlimited
May 17, 2026 · Frontend Development

Adding Tab Navigation to a Long List: OpenSpec Layout Refactor (Part 4)

In this fourth OpenSpec case study, the author refactors the home page layout by introducing a category‑based tab navigation skeleton that replaces a scrolling long list, detailing the exploration of four design options, the chosen implementation using React, TypeScript and Tailwind, and the full TDD‑driven development, testing, verification and archiving workflow.

Frontend ArchitectureOpenSpecReact
0 likes · 26 min read
Adding Tab Navigation to a Long List: OpenSpec Layout Refactor (Part 4)
Sohu Tech Products
Sohu Tech Products
Feb 25, 2026 · Frontend Development

How Open WebUI Builds a Production‑Grade AI Chat UI with Svelte

This article dissects the open‑source Open WebUI project, explaining its three‑layer architecture, key Svelte components, streaming rendering pipeline, message‑tree data model, state management, RAG integration, and plugin system, while offering practical optimization tips for building a performant production‑level AI chat interface.

AI chat UIFrontend ArchitectureOpen WebUI
0 likes · 18 min read
How Open WebUI Builds a Production‑Grade AI Chat UI with Svelte
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
Eric Tech Circle
Eric Tech Circle
Dec 6, 2025 · Frontend Development

Master Enterprise-Scale AI Code Generation: The Complete Cursor Rules Blueprint

This article shares a comprehensive, open‑source set of Cursor Rules for enterprise full‑stack development, detailing a three‑layer architecture, four guiding principles, and concrete configurations for Next.js, React, Shadcn/ui, Tailwind, and related tools, with practical examples and a GitHub repository.

AI code generationCursor RulesFrontend Architecture
0 likes · 4 min read
Master Enterprise-Scale AI Code Generation: The Complete Cursor Rules Blueprint
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 5, 2025 · Frontend Development

Building a High‑Performance Multi‑Dimensional Table with Konva.js

This article explains how to create a high‑performance, multi‑dimensional table system using Konva.js, covering project overview, feature list, core architecture, module design, key mechanisms such as group rendering, virtual scrolling and batch drawing, implementation details, performance optimizations, and future extensions.

Frontend ArchitectureKonva.jsmulti-dimensional table
0 likes · 25 min read
Building a High‑Performance Multi‑Dimensional Table with Konva.js
SQB Blog
SQB Blog
Sep 4, 2025 · Frontend Development

Building a Scalable, Cross‑Platform Icon System for Modern Frontend Projects

This article explains how a unified, maintainable vector icon library was designed, built, and deployed across multiple platforms—including web, mini‑programs, and native apps—using SVG, font formats, Iconify, and automated CI/CD pipelines to boost design‑development collaboration and product consistency.

Frontend Architecturecross‑platformdesign system
0 likes · 10 min read
Building a Scalable, Cross‑Platform Icon System for Modern Frontend Projects
ByteDance Web Infra
ByteDance Web Infra
Aug 1, 2025 · Frontend Development

Why Module Federation 2.0 Is Revolutionizing Frontend Architecture

This article explores the evolution from Module Federation 1.0 to 2.0, detailing its architecture, pain points, new features, supported build tools, performance improvements, and how developers can adopt it across web and native platforms.

Frontend ArchitectureMicro FrontendsModule Federation
0 likes · 9 min read
Why Module Federation 2.0 Is Revolutionizing Frontend Architecture
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 1, 2025 · Frontend Development

How We Rebuilt a Fault‑Tolerant Vue Permission System After Three Failed Attempts

After three successive permission‑system failures caused mismatched UI, fragmented checks, and tightly coupled logic, we rebuilt the Vue.js permission architecture using a unified API, a TypeScript‑typed hook, and an optional v‑permission directive, achieving maintainable, debuggable, and easily extensible access control across pages, buttons, and fields.

Frontend ArchitectureTypeScriptVue.js
0 likes · 7 min read
How We Rebuilt a Fault‑Tolerant Vue Permission System After Three Failed Attempts
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
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
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%.

BilibiliFrontend Architecturelow-code
0 likes · 31 min read
Design and Evolution of Bilibili's Activity Platform Low‑Code System
Sohu Tech Products
Sohu Tech Products
Dec 25, 2024 · Frontend Development

Mastering Vue 3 Project Structure: From Basics to Scalable Architecture

This guide walks you through organizing a Vue 3 application, starting with the default Vue CLI layout and progressively adding optimized folders such as assets, components, views, router, store, composables, services, and types, while offering practical tips for naming, lazy loading, and modularization to keep projects scalable and maintainable.

File StructureFrontend ArchitectureProject Organization
0 likes · 8 min read
Mastering Vue 3 Project Structure: From Basics to Scalable Architecture
IT Architects Alliance
IT Architects Alliance
Oct 14, 2024 · Frontend Development

Jamstack Explained: Key Benefits, Challenges, and Best Practices

This article explores the Jamstack architecture—its core concepts of JavaScript, APIs, and markup, the essential tooling like static site generators and headless CMS, and examines its performance, security, scalability benefits alongside challenges such as dynamic content handling, build times, and SEO, offering practical best‑practice recommendations.

Frontend ArchitectureJamstackStatic Site Generators
0 likes · 10 min read
Jamstack Explained: Key Benefits, Challenges, and Best Practices
Ctrip Technology
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 FunctionsFrontend Architecture
0 likes · 19 min read
Ctrip Hotel BFF Architecture Migration and Efficiency Boost with NestJS and Cloud Functions
KooFE Frontend Team
KooFE Frontend Team
Aug 29, 2024 · Frontend Development

Applying the Interface Segregation Principle to Cleaner React Components

This article explains the Interface Segregation Principle, illustrates its original intent with simple code examples, and demonstrates how applying ISP in React—by narrowing component props, avoiding prop drilling, and using context or composition—leads to cleaner, more maintainable front‑end code.

Frontend ArchitectureReactSOLID
0 likes · 7 min read
Applying the Interface Segregation Principle to Cleaner React Components
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
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
ByteDance Web Infra
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.

Frontend ArchitectureMicro FrontendsModule Federation
0 likes · 8 min read
Announcing Module Federation 2.0: New Features, Documentation, and Future Roadmap
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
Goodme Frontend Team
Goodme Frontend Team
Dec 11, 2023 · Frontend Development

How We Built a Self‑Service Form Builder for Non‑Developers Using Formily

Facing frequent interruptions from operations requesting custom forms, we created a self‑service form‑building platform that lets non‑technical staff configure forms visually, using a decoupled iframe editor, postMessage communication, automatic JSON schema generation from TypeScript definitions, and both SchemaReactions and Effects for dynamic logic.

FormilyFrontend ArchitectureVisual Editor
0 likes · 18 min read
How We Built a Self‑Service Form Builder for Non‑Developers Using Formily
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
Alibaba Cloud Developer
Alibaba Cloud Developer
Sep 11, 2023 · Frontend Development

How Domain-Driven Design Transforms Front-End Development

This article explains how applying Domain-Driven Design principles to front‑end projects clarifies business boundaries, improves code organization, reduces maintenance costs, and enables better collaboration across product, front‑end, and back‑end teams.

Bounded ContextFrontend Architecturecode organization
0 likes · 14 min read
How Domain-Driven Design Transforms Front-End Development
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
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Aug 18, 2023 · Frontend Development

Must‑Know JavaScript Tricks, Async useEffect Guide, and Front‑End Architecture Overview

This article compiles essential JavaScript coding tricks, explains how to correctly use async functions within React’s useEffect, outlines the full spectrum of front‑end infrastructure technologies, and shares a practical jsPDF PDF‑export tutorial along with an interview about Evan You’s life beyond code.

Coding TipsEvan YouFrontend Architecture
0 likes · 3 min read
Must‑Know JavaScript Tricks, Async useEffect Guide, and Front‑End Architecture Overview
Ctrip Technology
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.

BFFFrontend ArchitectureMicroservices
0 likes · 41 min read
Design and Practice of RPC‑Based Backend‑for‑Frontend (BFF)
DaTaobao Tech
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 %.

Frontend ArchitectureStore FrameworkTaobao
0 likes · 12 min read
Taobao Store Framework: Architecture Evolution, Challenges, and Performance Optimizations
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
Alibaba Cloud Developer
Alibaba Cloud Developer
May 23, 2023 · Frontend Development

How to Refactor Complex React Pages with Component‑Based Design

This article explains how to tackle hard‑to‑maintain React pages by applying design patterns, splitting horizontal business logic into basic and block components, and using component composition to dramatically reduce code size while improving readability and maintainability.

Component RefactoringDesign PatternsFrontend Architecture
0 likes · 10 min read
How to Refactor Complex React Pages with Component‑Based Design
Alipay Experience Technology
Alipay Experience Technology
May 19, 2023 · Frontend Development

What Makes VSCode’s Architecture So Powerful? Inside Dependency Injection, Registry, and LSP

This article explores VSCode’s sophisticated architecture, detailing how its dependency injection system, event lifecycle management, registry‑based extension points, cross‑platform service injection, and Language Server Protocol enable a modular, high‑performance editor that can be extended safely across web, desktop, and mobile environments.

Event SystemFrontend ArchitectureLSP
0 likes · 52 min read
What Makes VSCode’s Architecture So Powerful? Inside Dependency Injection, Registry, and LSP
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
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
政采云技术
政采云技术
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
Baidu Geek Talk
Baidu Geek Talk
Feb 6, 2023 · Frontend Development

Mastering Module Federation: A Hands‑On Guide to Micro‑Frontend Architecture

This article explains the concept, motivation, and application scenarios of Webpack 5 Module Federation, walks through a concrete project structure and configuration, demonstrates runtime code integration, analyzes the generated bundles, and provides resources for further learning, offering a practical entry point into micro‑frontend development.

Code SplittingFrontend ArchitectureMicro Frontends
0 likes · 8 min read
Mastering Module Federation: A Hands‑On Guide to Micro‑Frontend Architecture
phodal
phodal
Jan 30, 2023 · Frontend Development

Exploring the Evolving Landscape of Micro‑Frontend Patterns in 2023

This article reflects on the delayed 2023 release, outlines four evolving micro‑frontend patterns, examines modern toolchains like Rust, Go and Zig, discusses low‑code platform challenges, low‑latency WebAssembly front‑ends, browser AI, internal dev experience, server‑driven UI, Islands architecture, and edge JavaScript.

Edge ComputingFrontend ArchitectureMicro Frontends
0 likes · 9 min read
Exploring the Evolving Landscape of Micro‑Frontend Patterns in 2023
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
ELab Team
ELab Team
Nov 11, 2022 · Frontend Development

How No‑Code Platforms Transform Frontend Development: Architecture, Canvas & Drag‑Drop Techniques

This article explores the rise of no‑code/low‑code builder platforms, detailing their core concepts, architecture, UIDL specifications, sandboxing, drag‑and‑drop mechanics, smart snapping, component insertion, and event handling, offering practical insights for frontend engineers building modern visual editors.

CanvasDrag-and-DropFrontend Architecture
0 likes · 42 min read
How No‑Code Platforms Transform Frontend Development: Architecture, Canvas & Drag‑Drop Techniques
Watermelon Frontend Tech Team
Watermelon Frontend Tech Team
Nov 10, 2022 · Frontend Development

Unlocking No‑Code Platform Power: Inside the Frontend Canvas Architecture

This article explores how No‑Code & Low‑Code (NCLC) platforms transform frontend development by introducing a canvas‑editor and generator architecture, UIDL communication, IOC modular design, layered rendering, event systems, drag‑and‑drop mechanics, smart snapping, and component insertion techniques.

Drag-and-DropFrontend ArchitectureNo-code
0 likes · 37 min read
Unlocking No‑Code Platform Power: Inside the Frontend Canvas Architecture
ByteFE
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.

Frontend ArchitectureJS SandboxModule Federation
0 likes · 22 min read
Micro Frontends: Concepts, Implementation Strategies, and Technical Details
DaTaobao Tech
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.

Frontend ArchitectureSSRbest practices
0 likes · 9 min read
Insights on Front‑End Architecture and the Role of a Front‑End Architect
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 Architectureiframemicro-frontend
0 likes · 15 min read
Lingjie Page-Level Micro‑Frontend Framework: Principles, Types, and Practical Usage
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 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
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
phodal
phodal
Aug 28, 2022 · Frontend Development

How to Build a Multi‑Format Graph Drawing Engine with DSL, Layout, and Two‑Stage Rendering

This article walks through the design and implementation of a flexible graph‑drawing tool, analyzing existing solutions, defining core components such as a graph model, DSL parser, layout engine, and rendering pipeline, and detailing a step‑by‑step proof‑of‑concept built with React, Konva, and TypeScript.

DSL parsingFrontend ArchitectureReact Konva
0 likes · 13 min read
How to Build a Multi‑Format Graph Drawing Engine with DSL, Layout, and Two‑Stage Rendering
HelloTech
HelloTech
Aug 18, 2022 · Mobile Development

Containerization Architecture in Mobile Applications

The article outlines a mobile‑app containerization architecture that builds on existing component frameworks, emphasizing standardized, isolated virtualized containers, dynamic module rendering via Flexbox‑based configuration trees, a multi‑layer logical and protocol stack for layout, data, lifecycle and events, and a streamlined development‑to‑deployment workflow.

Frontend ArchitectureTechnical Solutioncontainerization
0 likes · 13 min read
Containerization Architecture in Mobile Applications
Taobao Frontend Technology
Taobao Frontend Technology
Jul 5, 2022 · Frontend Development

How Tubes Uses a Reactive Data System to Optimize Multi‑Screen Rendering

The article explains how Tubes employs a reactive data system to handle multi‑screen rendering, compares loop‑based and reactive approaches, details classic and hash‑table implementations, and demonstrates significant performance gains, offering valuable insights for frontend developers seeking efficient rendering architectures.

Frontend Architecturedependency trackingperformance optimization
0 likes · 21 min read
How Tubes Uses a Reactive Data System to Optimize Multi‑Screen Rendering
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
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 ArchitectureVue
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
Taobao Frontend Technology
Taobao Frontend Technology
Apr 20, 2022 · Frontend Development

How a Low‑Code Pop‑Up Editor Transformed Taobao’s User‑Growth Platform

The author recounts a year‑plus journey improving the PopLayer pop‑up platform—identifying scalability, usability, data, and stability challenges, redesigning a JSON‑based DSL, building a low‑code editor (xEditor) with modular architecture, adding mock data, conditional logic, animation, and native rendering, and quantifying the resulting efficiency gains and business impact.

DSL designFrontend Architecturelow-code editor
0 likes · 40 min read
How a Low‑Code Pop‑Up Editor Transformed Taobao’s User‑Growth Platform
JD Tech
JD Tech
Mar 16, 2022 · Frontend Development

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

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

Frontend ArchitectureMicro FrontendsModule Federation
0 likes · 11 min read
An Overview of Micro Frontends: Concepts, Characteristics, Implementation Options, and Use Cases
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
Alibaba Terminal Technology
Alibaba Terminal Technology
Feb 21, 2022 · Frontend Development

How a Frontend Architect Became a ‘Chef’ to Serve Teams and Tame Technical Debt

This article follows a front‑end architect who treats architecture like cooking, writes massive amounts of code, builds a Node‑based framework to bridge front‑end and back‑end, tackles legacy system debt, and shares a philosophy that blends technical rigor with service‑oriented mindset.

Developer ExperienceFrontend ArchitectureTechnical Debt
0 likes · 9 min read
How a Frontend Architect Became a ‘Chef’ to Serve Teams and Tame Technical Debt
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
Sohu Tech Products
Sohu Tech Products
Dec 22, 2021 · Frontend Development

General Architecture Plan for a Vue‑based Backend Management System

This article presents a comprehensive guide to building a generic backend management system with Vue, covering project initialization using Vite or Vue‑CLI, code standards, CSS architecture (ITCSS, BEM, ACSS), JWT authentication, dynamic menu and route generation, RBAC, caching, and component templating.

Frontend ArchitectureJWTRBAC
0 likes · 28 min read
General Architecture Plan for a Vue‑based Backend Management System
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
Baidu Geek Talk
Baidu Geek Talk
Dec 1, 2021 · Frontend Development

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

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

Code SplittingFrontend ArchitectureMicro Frontends
0 likes · 15 min read
When to Adopt Micro Frontends: System Requirements, Design Guidelines, and Performance Tips
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
Oct 27, 2021 · Frontend Development

How ABF’s Low‑Code Building Center Boosts Mid‑Backend UI Development

This article examines the ABF platform’s Building Center—a low‑code solution that combines visual page composition, material management, and a hybrid Pro‑Code/Low‑Code renderer—to improve efficiency, maintainability, and collaboration in mid‑backend frontend development, illustrated with real‑world Youku case studies.

ABF platformFrontend ArchitectureYouku case study
0 likes · 13 min read
How ABF’s Low‑Code Building Center Boosts Mid‑Backend UI Development
Youku Technology
Youku Technology
Oct 26, 2021 · Frontend Development

ABF Platform Configuration Center: Building a Configuration-Driven Middle-Office Development System

The ABF Platform Configuration Center serves as a factory‑style, configuration‑driven middle‑office development system that unifies application, page, permission, layout, and custom extensions, allowing nearly 100 % reuse of rendering functions and rapid, standardized creation of internal business applications.

ABF platformConfiguration CenterFrontend Architecture
0 likes · 9 min read
ABF Platform Configuration Center: Building a Configuration-Driven Middle-Office Development System
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
21CTO
21CTO
Oct 19, 2021 · Frontend Development

Why Micro‑Frontends Matter: Benefits, Core Concepts, and When to Use Them

This article explains micro‑frontend architecture, its roots in micro‑services, core principles such as technical independence and team isolation, and outlines the advantages—including scalability, independent deployment, and easier testing—while advising when the approach is appropriate for a project.

Frontend ArchitectureMicro FrontendsMicroservices
0 likes · 6 min read
Why Micro‑Frontends Matter: Benefits, Core Concepts, and When to Use Them
ByteFE
ByteFE
Oct 12, 2021 · Frontend Development

Micro Frontend Architecture and Garfish Solution Overview

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

Frontend ArchitectureGarfishRouter
0 likes · 32 min read
Micro Frontend Architecture and Garfish Solution Overview
ByteDance Terminal Technology
ByteDance Terminal Technology
Sep 30, 2021 · Frontend Development

Micro-Frontends: Background and Solutions

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

Frontend ArchitectureGarfish
0 likes · 30 min read
Micro-Frontends: Background and Solutions
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
Taobao Frontend Technology
Taobao Frontend Technology
Sep 10, 2021 · Frontend Development

Mastering Multi‑Platform Front‑End with the Strategy Pattern

This article walks through a real‑world multi‑app scenario, breaks down the core challenges, compares several implementation approaches—including naive if‑else, SDK abstraction, and the Strategy design pattern—and reflects on engineering trade‑offs to help front‑end engineers write cleaner, more maintainable code.

Design PatternsFrontend ArchitectureStrategy Pattern
0 likes · 11 min read
Mastering Multi‑Platform Front‑End with the Strategy Pattern
JD Retail Technology
JD Retail Technology
Sep 6, 2021 · Frontend Development

Flexible Template Solution for Tongtian Tower: Architecture and Implementation across CMS, H5, and Native Clients

The article introduces the flexible template solution for the Tongtian Tower marketing system, detailing its background, design principles, CMS architecture, flexible canvas implementation, H5 rendering strategy, native client SDK, technical choices, and the achieved efficiency gains across multiple business scenarios.

CMSFrontend ArchitectureH5
0 likes · 13 min read
Flexible Template Solution for Tongtian Tower: Architecture and Implementation across CMS, H5, and Native Clients
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 ArchitectureWeb Performancemicro-frontend
0 likes · 15 min read
Cutting Shop Page Load Time in Half: Micro‑Frontend Performance Optimization Strategies
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Jul 14, 2021 · Frontend Development

Mastering Module Federation: From NPM Sharing to Advanced Remote Loading

This article explains how to share UI modules via NPM packages and Module Federation, compares traditional iframe approaches, dives into low‑level and high‑level concepts, demonstrates practical webpack configurations, version‑selection strategies, and runtime loading mechanisms with detailed code examples.

Frontend ArchitectureJavaScriptMicro Frontends
0 likes · 20 min read
Mastering Module Federation: From NPM Sharing to Advanced Remote Loading
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jul 8, 2021 · Frontend Development

Reinventing Low‑Code: How Vision’s New Gems Engine Reduces Complexity and Boosts Flexibility

This article explores the evolution of the Vision low‑code platform, introduces the Gems visual‑building engine, and explains how a modular architecture of renderer, editor, and material libraries addresses both business and technical challenges while controlling software complexity.

Frontend Architectureengine designlow-code
0 likes · 17 min read
Reinventing Low‑Code: How Vision’s New Gems Engine Reduces Complexity and Boosts Flexibility
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
ELab Team
ELab Team
Jun 23, 2021 · Frontend Development

Why Micro Frontends Are Changing Large-Scale Frontend Architecture

This article explains how micro frontends, inspired by micro‑service principles, break down monolithic front‑end applications into independent sub‑applications, covering design motivations, practical implementation steps, sandbox isolation techniques, and code examples to improve maintainability and performance.

Code SplittingFrontend ArchitectureModule Federation
0 likes · 14 min read
Why Micro Frontends Are Changing Large-Scale Frontend Architecture
Meituan Technology Team
Meituan Technology Team
Jun 10, 2021 · Mobile Development

Cross‑Platform Reuse Framework in Meituan Homestay: Design, Implementation, and Practice

Meituan Homestay built a custom cross‑platform reuse framework converting React Native code to mini‑programs, achieving up to 90% code reuse, reducing bundle size, improving performance, and establishing strict processes for quality, thus cutting development effort and enhancing productivity across iOS, Android, and mini‑programs.

Frontend ArchitectureReact Nativecode-reuse
0 likes · 35 min read
Cross‑Platform Reuse Framework in Meituan Homestay: Design, Implementation, and Practice
58 Tech
58 Tech
Apr 26, 2021 · Frontend Development

CarNext: A Customized Server‑Side Rendering Framework Based on Next.js for 58.com Automotive Business

This article explores the evolution of front‑end performance optimization, compares SPA and SSR architectures, introduces a Node‑based middle‑layer design, and details the CarNext framework built on Next.js that improves rendering speed, SEO friendliness, and development efficiency for 58.com’s automotive services.

Frontend ArchitectureNext.jsNode.js
0 likes · 13 min read
CarNext: A Customized Server‑Side Rendering Framework Based on Next.js for 58.com Automotive Business
HaoDF Tech Team
HaoDF Tech Team
Apr 21, 2021 · Frontend Development

How Vue‑SSR Solved SEO and Performance Challenges at Haodafu Online

This article analyzes the adoption of Vue Server‑Side Rendering at Haodafu Online, detailing its advantages for SEO and fast content delivery, the architectural integration with an existing Express/Node stack, performance testing results, degradation strategies, remaining issues, and future improvement plans.

Frontend ArchitectureNode.jsSSR
0 likes · 13 min read
How Vue‑SSR Solved SEO and Performance Challenges at Haodafu Online
IT Architects Alliance
IT Architects Alliance
Apr 3, 2021 · Frontend Development

How Baidu Re‑engineered Its Mobile Search Front‑End Architecture for Scale

This article analyzes Baidu's mobile search front‑end architecture evolution, identifying scalability and maintainability challenges, outlining a three‑layer redesign strategy, and detailing concrete modularization, componentization, and SSR techniques that other large‑scale web teams can apply.

BaiduComponentizationFrontend Architecture
0 likes · 14 min read
How Baidu Re‑engineered Its Mobile Search Front‑End Architecture for Scale
ITFLY8 Architecture Home
ITFLY8 Architecture Home
Apr 3, 2021 · Frontend Development

How Baidu Redesigned Its Mobile Search Front‑End Architecture for Scale and Performance

This article examines Baidu's mobile search front‑end architecture, identifies scalability and maintainability challenges such as massive codebases, unclear responsibilities, tight coupling and outdated tech stacks, and explains the three‑layer solution—foundation, modular middle layer, and componentization—along with implementation details, dependency injection, SSR adoption, and performance optimizations.

BaiduComponentizationFrontend Architecture
0 likes · 14 min read
How Baidu Redesigned Its Mobile Search Front‑End Architecture for Scale and Performance
21CTO
21CTO
Mar 25, 2021 · Frontend Development

How Baidu Revamped Its Mobile Search Front‑End Architecture for Scale and Performance

This article examines Baidu's mobile search front‑end architecture evolution, detailing the challenges of massive codebases, unclear responsibilities, and outdated tech stacks, and explains how a three‑layer modular design, dependency‑injection container, componentization with San, and optimized server‑side rendering were employed to improve scalability, maintainability, and page performance.

BaiduComponentizationFrontend Architecture
0 likes · 14 min read
How Baidu Revamped Its Mobile Search Front‑End Architecture for Scale and Performance
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 25, 2021 · Frontend Development

Building an IDC Digital Twin with 3D Web Technology: A Front‑End Blueprint

This article details the technical design and implementation of an IDC digital‑twin platform, covering business requirements, a three‑dimensional interactive framework built on React and ThreeJS, component architecture, user interaction, visual rendering, performance optimizations, and future development plans.

3D webDigital TwinFrontend Architecture
0 likes · 9 min read
Building an IDC Digital Twin with 3D Web Technology: A Front‑End Blueprint
Baidu Geek Talk
Baidu Geek Talk
Mar 1, 2021 · Frontend Development

Frontend Architecture Design: Evolution and Solutions

The article examines the evolution and challenges of frontend architecture through Baidu’s mobile search case, identifies problems such as vague responsibilities, tight coupling, and legacy stacks, and proposes a three‑tier solution—infra, independent modules, and componentization—implemented via server‑client designs, a Molecule interface, DI container, SSR optimization, and cross‑platform strategies to enable flexible upgrades and business agility.

ComponentizationFrontend ArchitectureSSR
0 likes · 12 min read
Frontend Architecture Design: Evolution and Solutions
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
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
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
vivo Internet Technology
vivo Internet Technology
Nov 11, 2020 · Frontend Development

vivo Mall Multi-End Unified Frontend Architecture Practice

The article details vivo Mall’s shift to a multi‑end unified frontend architecture using uni‑app, highlighting how a single technical stack reduces development and maintenance costs, accelerates H5 feature migration to mini‑programs, and introduces innovations such as code conversion tools, conditional compilation, advanced Vuex namespace handling, and component‑page decoupling via @vivo/smartx to meet current and future endpoint demands.

Frontend ArchitectureMini ProgramVuex
0 likes · 12 min read
vivo Mall Multi-End Unified Frontend Architecture Practice
JD Retail Technology
JD Retail Technology
Sep 29, 2020 · Frontend Development

Redesigning JD Order Detail Page with a Flexible Floor‑Based Architecture

The article presents a comprehensive case study of JD's order detail page redesign, detailing the shortcomings of the legacy layout, the goals of flexibility, smoothness, and maintainability, and the floor‑based data and UI architecture that enables rapid, configurable, and low‑cost feature expansion across client and server sides.

Frontend Architectureflexible layoutfloor-based UI
0 likes · 12 min read
Redesigning JD Order Detail Page with a Flexible Floor‑Based Architecture
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