BestHub
Sign in
Tagged articles
157 articles
Page 2 of 2
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
GrowingIO Tech Team
GrowingIO Tech Team
Sep 16, 2020 · Frontend Development

How GrowingIO Leveraged Micro‑Frontends for Scalable On‑Premise Deployments

GrowingIO’s frontend team transformed its monolithic SaaS product into a micro‑frontend architecture to support on‑premise deployments, detailing the motivations, design principles, code adaptations, integration strategies, and challenges such as dependency conflicts, global variables, and style isolation.

Frontend Architectureglobal variablesmicro-frontend
0 likes · 11 min read
How GrowingIO Leveraged Micro‑Frontends for Scalable On‑Premise Deployments
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
Alibaba Terminal Technology
Alibaba Terminal Technology
Aug 26, 2020 · Frontend Development

How icestark Solves Micro‑Frontend Challenges for Workbench and Large‑Scale Apps

This article examines the micro‑frontend architecture of icestark, analyzing workbench and large monolithic application scenarios, comparing technical options such as SPA/MPA, iframe and shared components, and detailing core concepts, routing, isolation, communication, and micro‑module capabilities to guide practical implementation.

Frontend ArchitectureSPAicestark
0 likes · 17 min read
How icestark Solves Micro‑Frontend Challenges for Workbench and Large‑Scale Apps
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
JD.com Experience Design Center
JD.com Experience Design Center
Jul 31, 2020 · Frontend Development

Scaling JD’s 福礼 Platform: Frontend Architecture, Component Library & Cross‑Platform Lessons

This article chronicles the rapid evolution of JD’s 福礼 employee‑benefits platform, detailing its Vue‑based frontend architecture, custom build tools, NutUI component library adoption, data‑collection strategies, multi‑device integration, development‑efficiency hacks, and collaborative processes that together drove a 265% YoY active‑user growth.

Component LibraryCross‑Platform IntegrationFrontend Architecture
0 likes · 24 min read
Scaling JD’s 福礼 Platform: Frontend Architecture, Component Library & Cross‑Platform Lessons
Architects Research Society
Architects Research Society
Jul 28, 2020 · Frontend Development

Implementing Micro Frontends with Angular: A Practical Guide (Part 2)

This article explains how Outbrain built a micro‑frontend architecture using Angular lazy‑loaded modules, a custom share‑loader for cross‑app module sharing, DOM encapsulation, independent testing, and per‑app deployment via Node services, providing a concrete, framework‑agnostic solution.

AngularFrontend ArchitectureMicro Frontends
0 likes · 8 min read
Implementing Micro Frontends with Angular: A Practical Guide (Part 2)
Alibaba Terminal Technology
Alibaba Terminal Technology
Jul 22, 2020 · Frontend Development

How Yuque Built Its Own Online Spreadsheet: Architecture, Challenges, and Lessons

This article details Yuque's year‑long journey of designing and implementing a self‑developed online spreadsheet, covering the product’s background, why a custom solution was needed, the technical stack and architecture choices, collaborative editing mechanisms, performance limits, and key takeaways for developers.

Frontend ArchitectureOnline SpreadsheetProduct Development
0 likes · 17 min read
How Yuque Built Its Own Online Spreadsheet: Architecture, Challenges, and Lessons
vivo Internet Technology
vivo Internet Technology
Jul 15, 2020 · Frontend Development

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

The article explains micro‑frontend concepts, why large apps are split into independent modules, critiques iframe drawbacks, details single‑spa’s resource loader and configuration approach with code examples, outlines its limitations, and shows how qiankun builds on single‑spa to automate resource discovery, sandboxing, and style isolation, concluding that micro‑frontends are a valuable strategy for large‑scale front‑end projects.

Frontend ArchitectureMicro FrontendsVue.js
0 likes · 14 min read
Micro Frontends: Concepts, Scenarios, and Implementation with single-spa and qiankun
Taobao Frontend Technology
Taobao Frontend Technology
Jul 15, 2020 · Frontend Development

How to Build a Fully Customizable IDE Layout System with React Components

This article explains how KAITIAN redesigns its IDE layout system using React, introducing a three‑layer abstraction of LayoutComponent, LayoutConfig, and SlotRenderer, and details core components such as BoxPanel, SplitPanel, Accordion, TabBar, and TabPanel that enable fully customizable and extensible IDE interfaces.

Component DesignFrontend ArchitectureIDE layout
0 likes · 14 min read
How to Build a Fully Customizable IDE Layout System with React Components
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
Taobao Frontend Technology
Taobao Frontend Technology
Jun 4, 2020 · Frontend Development

How Alibaba Scaled Live Streaming Across Apps with an Open Platform Architecture

This article explains how Alibaba's Taobao Live team built an open ALive platform that unifies SDK, Weex, and mini‑program integrations to broadcast a single live event across multiple apps, achieving millions of viewers and massive sales while outlining the architecture, open design, mini‑program workflow, results, and future roadmap.

ALiveAlibabaFrontend Architecture
0 likes · 13 min read
How Alibaba Scaled Live Streaming Across Apps with an Open Platform Architecture
Didi Tech
Didi Tech
May 27, 2020 · Frontend Development

Micro Frontends: Evolution, Architecture, and Implementation in Car Service Platform

The article traces the rise of micro‑frontends from a solution to monolithic admin panels, explains their architectural benefits and various implementation options, and details Xiaoju Car Service’s Midway platform built on single‑spa with lifecycle hooks, sandboxing, idle‑time preloading, IndexedDB caching, and a unified login system.

Frontend ArchitectureJS SandboxMicro Frontends
0 likes · 17 min read
Micro Frontends: Evolution, Architecture, and Implementation in Car Service Platform
Alibaba Terminal Technology
Alibaba Terminal Technology
May 19, 2020 · Frontend Development

How to Build a JavaScript Sandbox for Micro‑Frontend Applications

This article explains why sandboxing is essential in micro‑frontend systems, compares single‑instance and multi‑instance scenarios, and provides step‑by‑step implementations of JavaScript and CSS isolation using iframe‑based proxies, PostCSS namespace wrapping, and reusable APIs from the open‑source ConsoleOS project.

Frontend Architecturecss isolationiframe proxy
0 likes · 12 min read
How to Build a JavaScript Sandbox for Micro‑Frontend Applications
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
Youzan Coder
Youzan Coder
May 15, 2020 · Frontend Development

MicroFrontend Implementation in Business Context

The article outlines ZanSpa, a progressive micro‑frontend framework built for Youzan’s backend redesign, detailing its core RouteMonitor and PageLoader modules that handle navigation and resource assembly, and explains why runtime composition was chosen over build‑time integration after evaluating solutions such as qiankun.

Frontend ArchitectureZanSpamicrofrontend
0 likes · 17 min read
MicroFrontend Implementation in Business Context
Alibaba Terminal Technology
Alibaba Terminal Technology
Apr 27, 2020 · Frontend Development

Designing a Scalable Frontend AB Testing Framework: From Config to Runtime

This article outlines a comprehensive, standardized front‑end AB testing architecture that separates experiment configuration and data chains, introduces a JSSDK with Core and Coupler packages, and explains traffic‑splitting models, data back‑flow, and extensibility across multiple front‑end DSLs.

AB testingFrontend ArchitectureJSSDK
0 likes · 16 min read
Designing a Scalable Frontend AB Testing Framework: From Config to Runtime
Alibaba Terminal Technology
Alibaba Terminal Technology
Apr 24, 2020 · Frontend Development

How icestark Solves Large‑Scale Frontend Challenges with a Micro‑Frontend Architecture

This article explains how the ICE team created the AppLoader solution for Alibaba's Creator Platform, evolved it into the open‑source icestark framework, and details its architecture, loading strategies, sandbox isolation, and real‑world business value for large, multi‑team front‑end systems.

Frontend ArchitectureReacticestark
0 likes · 15 min read
How icestark Solves Large‑Scale Frontend Challenges with a Micro‑Frontend Architecture
Alibaba Terminal Technology
Alibaba Terminal Technology
Apr 14, 2020 · Frontend Development

How Fliggy Built a Scalable Micro‑Frontend Operations Platform in 3 Months

After three months of development, Fliggy’s integrated operations console combines micro‑frontend and SDK techniques to unify over ten platforms across four scenarios, streamlining configuration, visual consistency, performance, and user feedback, while sharing lessons on architecture, backend gateway, widget integration, and collaborative open‑source contributions.

Frontend Architecturemicro-frontendoperations platform
0 likes · 11 min read
How Fliggy Built a Scalable Micro‑Frontend Operations Platform in 3 Months
Alibaba Cloud Developer
Alibaba Cloud Developer
Apr 2, 2020 · Frontend Development

How Micro Frontends Transform Large‑Scale Frontend Architecture

This article explains why micro frontends are needed, outlines their engineering and product benefits, describes key architectural requirements, shares practical decisions such as stack‑independent bootstrapping, routing, isolation, resource loading, and communication, and presents real‑world results from Ant Financial’s OneX platform.

Ant FinancialFrontend ArchitectureJavaScript
0 likes · 16 min read
How Micro Frontends Transform Large‑Scale Frontend Architecture
360 Tech Engineering
360 Tech Engineering
Mar 16, 2020 · Frontend Development

Optimizing Vuex API Calls: Separation of Concerns, Olive‑Shaped Interfaces, and Response Normalization

This article walks through three progressive refactoring stages for Vuex‑based API calls—first separating concerns for maintainable code, then introducing a concise “olive‑shaped” interface with dynamic generation or proxy interception, and finally adding response normalization and three‑level error handling to produce robust, low‑maintenance frontend logic.

API RefactoringError HandlingFrontend Architecture
0 likes · 14 min read
Optimizing Vuex API Calls: Separation of Concerns, Olive‑Shaped Interfaces, and Response Normalization
vivo Internet Technology
vivo Internet Technology
Mar 4, 2020 · Frontend Development

Wukong Activity Middle Platform: Micro-Frontend Architecture and Implementation for Marketing Activities

Vivo’s Wukong Activity Middle Platform employs a micro‑frontend RSC architecture to streamline marketing H5 development by providing reusable components, template and task marketplaces, real‑time cloud configuration, asset libraries, and PaaS developer tools—including a VSCode plugin—reducing release cycles, resource waste, data silos, and security risks across 30+ business units.

Frontend ArchitectureRSCVue.js
0 likes · 18 min read
Wukong Activity Middle Platform: Micro-Frontend Architecture and Implementation for Marketing Activities
iQIYI Technical Product Team
iQIYI Technical Product Team
Feb 28, 2020 · Frontend Development

Technical Architecture and Implementation of iQIYI Cloud Video Editing Platform

The iQIYI Cloud Video Editing Platform leverages HTML5 and Vue.js to deliver a browser‑based, multi‑track editing suite that offloads transcoding to a four‑layer architecture—web client, Node middle layer, creation platform, and cloud services—while using real‑time preview, caching, and modular code to ensure smooth interaction and future WebAssembly‑powered AI enhancements.

Frontend ArchitectureVuecloud video editing
0 likes · 11 min read
Technical Architecture and Implementation of iQIYI Cloud Video Editing Platform
Qunar Tech Salon
Qunar Tech Salon
Feb 28, 2020 · Frontend Development

Bifrost: Meituan’s Vue‑Based Micro‑Frontend Framework for Scalable Enterprise Front‑End Development

The article introduces Bifrost, Meituan’s Vue‑based micro‑frontend framework, detailing its background, design goals, architecture, implementation code, development practices, deployment workflow, and the benefits and challenges of adopting micro‑frontend architecture in large‑scale enterprise front‑end projects.

BifrostFrontend ArchitectureModule Federation
0 likes · 20 min read
Bifrost: Meituan’s Vue‑Based Micro‑Frontend Framework for Scalable Enterprise Front‑End Development
Meituan Technology Team
Meituan Technology Team
Feb 27, 2020 · Frontend Development

Micro‑Frontend Implementation in Meituan Waimai Advertising Platform

Meituan Waimai’s advertising team tackled duplicated business logic and slow builds across PC, H5, and KA by merging code into a monorepo and adopting a React‑based central‑router micro‑frontend architecture, where a host app dynamically loads sub‑apps with independent routing, stores, CSS, and hot‑module replacement, achieving modularization, faster builds, and isolated deployment.

DeploymentFrontend ArchitectureReact
0 likes · 24 min read
Micro‑Frontend Implementation in Meituan Waimai Advertising Platform
iQIYI Technical Product Team
iQIYI Technical Product Team
Feb 14, 2020 · Frontend Development

Micro‑Frontend Architecture and Implementation Practices Based on Vue

The iQIYI front‑end team built a Vue‑based micro‑frontend framework where a lightweight container supplies shared Vue, router and store globals, dynamically loads each module’s manifest‑listed scripts, merges their routes, and renders them via global functions, yielding a decoupled, maintainable, and extensible application architecture.

Frontend ArchitectureModule Federationcontainer application
0 likes · 13 min read
Micro‑Frontend Architecture and Implementation Practices Based on Vue
Miss Fresh Tech Team
Miss Fresh Tech Team
Feb 11, 2020 · Frontend Development

How We Scaled a Vue-Based Supply Chain Platform with Micro‑Frontends and Single‑Spa

This article details how a Vue‑based supply‑chain platform adopted micro‑frontend architecture with Single‑Spa, SystemJS, and webpack externals to consolidate dozens of independent B2B applications into a single, fast, reload‑free interface, outlining the technical steps, benefits, and trade‑offs.

Frontend ArchitectureMicro Frontendssingle-spa
0 likes · 15 min read
How We Scaled a Vue-Based Supply Chain Platform with Micro‑Frontends and Single‑Spa
Alibaba Terminal Technology
Alibaba Terminal Technology
Jan 14, 2020 · Frontend Development

How Ant Financial Implements a Standard Micro‑Frontend Architecture at Scale

This article explains Ant Financial's practical adoption of a standard micro‑frontend architecture, covering the motivations, definition, key technical decisions, implementation details, performance optimizations, and the resulting business and engineering benefits across their cloud platforms.

Ant FinancialFrontend Architecturemicro-frontend
0 likes · 13 min read
How Ant Financial Implements a Standard Micro‑Frontend Architecture at Scale
Yanxuan Tech Team
Yanxuan Tech Team
Jan 6, 2020 · Frontend Development

How NetEase Yanxuan Built a Cross‑Framework Component System with Web Components

This article explains how NetEase Yanxuan tackled the high maintenance cost and visual inconsistency of multiple front‑end stacks by designing a cross‑framework component architecture based on Web Components, detailing the technical selection, layered design, implementation challenges, and the resulting efficiency and isolation benefits.

Component IsolationFrontend Architecturecross‑framework
0 likes · 14 min read
How NetEase Yanxuan Built a Cross‑Framework Component System with Web Components
Alibaba Cloud Developer
Alibaba Cloud Developer
Dec 30, 2019 · Frontend Development

Why Micro‑Frontends Are the Future of Scalable Web Apps

This article explains how micro‑frontend architecture tackles the maintainability challenges of monolithic front‑ends, outlines its three core business values, details ten technical problems it must solve, and shows the essential infrastructure, configuration, and observability components needed for cloud‑era web development.

Frontend ArchitectureWeb Developmentcloud computing
0 likes · 8 min read
Why Micro‑Frontends Are the Future of Scalable Web Apps
Meituan Technology Team
Meituan Technology Team
Dec 26, 2019 · Frontend Development

Bifrost: Meituan's Micro‑Frontend Framework for Scalable Front‑End Development

Meituan's R&D built Bifrost, a micro‑frontend framework that splits a monolithic Vue SPA into independent sub‑systems, letting remote teams develop, deploy, and integrate modules while preserving a seamless SPA experience; the host manages lifecycle, routing, shared state, CDN delivery, gray releases, and monitoring, greatly improving scalability and maintainability.

BifrostFrontend ArchitectureVue
0 likes · 20 min read
Bifrost: Meituan's Micro‑Frontend Framework for Scalable Front‑End Development
Alibaba Terminal Technology
Alibaba Terminal Technology
Nov 29, 2019 · Frontend Development

Why Micro‑Frontend Architecture Is the Key to Scalable Front‑End Systems

The article explains how micro‑frontend architecture breaks monolithic front‑ends into independent, composable units, outlines its three core values, details the ten technical challenges it must address, and describes the evolving cloud‑centric development model that reshapes front‑end engineering.

Frontend ArchitectureScalabilitycloud integration
0 likes · 10 min read
Why Micro‑Frontend Architecture Is the Key to Scalable Front‑End Systems
Taobao Frontend Technology
Taobao Frontend Technology
Nov 28, 2019 · Frontend Development

How Alibaba’s ALive Transformed Live‑Streaming Front‑End Performance

Alibaba’s ALive platform evolved from a small‑scale live‑streaming team to an open, high‑performance front‑end solution, introducing a flexible live‑container, dynamic component loading, and a comprehensive engineering suite that boosts performance, development efficiency, and enables diverse live‑stream experiences across Alibaba’s ecosystem.

ALiveFrontend ArchitectureRax
0 likes · 16 min read
How Alibaba’s ALive Transformed Live‑Streaming Front‑End Performance
Tencent Cloud Developer
Tencent Cloud Developer
Oct 28, 2019 · Frontend Development

NGW: Node Gateway Architecture for Serverless Frontend Services

NGW (Node Gateway) is a Node.js‑based frontend access layer that sits between a unified gateway and business services, providing dynamic request routing, Redis‑driven configuration, a Tapable plugin system, and containerized CI/CD to enable serverless BFF/SFF architectures with rapid builds, high reliability, and dramatically reduced deployment effort across multiple Tencent Cloud projects.

BFFDevOpsFrontend Architecture
0 likes · 10 min read
NGW: Node Gateway Architecture for Serverless Frontend Services
AntTech
AntTech
Aug 26, 2019 · Frontend Development

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

This article explains the benefits of micro‑frontend architecture for large‑scale backend applications, compares MPA and SPA approaches, discusses routing, entry formats, module loading, style and JavaScript isolation techniques, and presents a production‑ready solution built with single‑spa and the open‑source qiankun framework.

Frontend ArchitectureMicro Frontendsjavascript sandbox
0 likes · 15 min read
Micro Frontends: Value, Architecture, and Practical Implementation with Single‑spa and Qiankun
Alibaba Cloud Developer
Alibaba Cloud Developer
Aug 13, 2019 · Mobile Development

How Alibaba Scales Mobile Taobao’s Homepage with Multi‑Version, Dynamic Components

This article explains how Alibaba’s Mobile Taobao homepage handles massive traffic and diverse user groups by using multi‑version isolation, component‑based architecture, dynamic layout updates, and a systematic flow‑operation loop, ultimately improving development efficiency and system stability for large‑scale e‑commerce.

ComponentizationFrontend ArchitectureMobile Development
0 likes · 15 min read
How Alibaba Scales Mobile Taobao’s Homepage with Multi‑Version, Dynamic Components
Qunar Tech Salon
Qunar Tech Salon
Sep 13, 2018 · Frontend Development

Micro‑Frontend Architecture for Building a Class‑Single‑Page HR Application at Meituan

The article describes how Meituan applied the micro‑frontend concept to transform its HR system into a class‑single‑page application, detailing the shortcomings of iframe integration, the design of a portal project, application registration, routing, CSS scoping, JavaScript library version control, and the build‑and‑deployment workflow.

Frontend ArchitectureHR systemmicro-frontend
0 likes · 14 min read
Micro‑Frontend Architecture for Building a Class‑Single‑Page HR Application at Meituan
Meituan Technology Team
Meituan Technology Team
Sep 6, 2018 · Frontend Development

Micro‑Frontend Architecture for Meituan HR System

Meituan’s HR platform adopts a micro‑frontend architecture where a central Portal container registers isolated sub‑projects via a global route array, namespaces CSS, unifies shared libraries through a custom require system, and deploys static assets with PM2, delivering a single‑page experience, independent releases, and minimal bundle overhead.

DeploymentFrontend ArchitectureHR system
0 likes · 15 min read
Micro‑Frontend Architecture for Meituan HR System
JD Tech
JD Tech
Mar 22, 2018 · Frontend Development

Design and Architecture of the Hawaii Server-Side Rendering Framework

The article explains the background, core concepts, components, and workflow of the Hawaii framework—a Node.js based server‑side rendering solution that uses RDS files to simplify model‑layer data handling, supports front‑end/back‑end code reuse, and compares its approach with popular frameworks like React, Vue, and GraphQL.

Frontend ArchitectureHawaii FrameworkNode.js
0 likes · 9 min read
Design and Architecture of the Hawaii Server-Side Rendering Framework
21CTO
21CTO
Jan 11, 2018 · Frontend Development

How to Build a React Project from Scratch: Architecture, Tools, and Best Practices

This article walks through creating a React application without scaffolding tools, detailing the project directory layout, chosen tech stack—including React, Redux, Immutable.js, redux‑saga, and axios—along with development utilities like redux‑devtools and Reactotron, component organization, routing strategies, state persistence, and asynchronous task management.

Debugging ToolsFrontend ArchitectureImmutable.js
0 likes · 33 min read
How to Build a React Project from Scratch: Architecture, Tools, and Best Practices
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Dec 19, 2017 · Frontend Development

How Isomorphic Server‑Side Rendering Cut First‑Paint Time by 50% for Millions

An in‑depth case study of the Interest Tribe project reveals how adopting isomorphic server‑side rendering, combined with offline packages, VM sandboxing, and smart caching, dramatically reduced first‑paint latency on Android devices, cut slow‑user share, and improved stability and scalability for a billion‑scale web service.

Frontend ArchitectureReactServer-side Rendering
0 likes · 12 min read
How Isomorphic Server‑Side Rendering Cut First‑Paint Time by 50% for Millions
Baixing.com Technical Team
Baixing.com Technical Team
Oct 19, 2017 · Frontend Development

How to Build a Drag‑Drop Site Builder with Vue.js: From Data Model to Rendering

This article explains how to design and implement a Vue.js‑based website builder that lets users create multi‑page sites by dragging modules, covering requirement analysis, JSON data modeling, dynamic component rendering, state management with Vuex, and drag‑and‑drop integration.

Drag-and-DropFrontend ArchitectureJSON data model
0 likes · 14 min read
How to Build a Drag‑Drop Site Builder with Vue.js: From Data Model to Rendering
ITFLY8 Architecture Home
ITFLY8 Architecture Home
Sep 5, 2017 · Frontend Development

How to Build Scalable Web Modules: Architecture, Encapsulation, and Dependency Management

This article explains how to design scalable web modules by defining their composition, encapsulating HTML/CSS/JS, managing dependencies with uniform identifiers, flattening hierarchical relationships, and applying scheduling strategies for module display, switching, and messaging in single‑page applications.

Frontend ArchitectureSingle Page Applicationmodule encapsulation
0 likes · 11 min read
How to Build Scalable Web Modules: Architecture, Encapsulation, and Dependency Management
Qunar Tech Salon
Qunar Tech Salon
Aug 31, 2017 · Frontend Development

Design and Implementation of a Component‑Based Special Activity Page Platform

This article describes the business background, pain points, and a component‑based solution for rapidly building and iterating promotional activity pages, covering system design, front‑end architecture, component library, visual editor, back‑end services, fast iteration practices, and future development plans.

Frontend ArchitectureVisual Editorcomponent-based
0 likes · 15 min read
Design and Implementation of a Component‑Based Special Activity Page Platform
Hujiang Technology
Hujiang Technology
Jan 10, 2017 · Frontend Development

Scaling React Applications: Containers vs Components, Feature‑Based Code Organization, CSS Modules, PostCSS Auto Reset, and Redux‑Saga

This article shares lessons learned from releasing React Boilerplate 3.0, covering the importance of front‑end scalability, the distinction between container and presentational components, feature‑based code organization, CSS Modules and PostCSS Auto Reset for style isolation, and using redux‑saga for readable, testable asynchronous flows.

CSS ModulesFrontend ArchitectureReact
0 likes · 9 min read
Scaling React Applications: Containers vs Components, Feature‑Based Code Organization, CSS Modules, PostCSS Auto Reset, and Redux‑Saga
Qunar Tech Salon
Qunar Tech Salon
Oct 26, 2016 · Frontend Development

Improving Iconfont Platform Performance with React Isomorphic Rendering

The article examines the inefficiencies of an outdated internal iconfont platform, explores the drawbacks of separate front‑end and back‑end rendering, and presents a React‑based isomorphic solution that unifies package management and module loading, resulting in dramatically faster first‑page loads and easier maintenance.

Frontend ArchitectureReactServer-side Rendering
0 likes · 9 min read
Improving Iconfont Platform Performance with React Isomorphic Rendering
21CTO
21CTO
Feb 11, 2016 · Frontend Development

Why Single‑Page Web Apps Are Changing Frontend Development

This article explains how single‑page web applications shift client logic to the browser, covering their definition, key frameworks, componentization, code isolation, routing, caching, server communication, memory management, styling strategies, deployment models, and inherent drawbacks.

Frontend Architecturecachingjavascript frameworks
0 likes · 13 min read
Why Single‑Page Web Apps Are Changing Frontend Development
Architect
Architect
Dec 7, 2015 · Frontend Development

How to Structure a React Project

This article discusses practical approaches to organizing a React project, comparing single‑file setups with modular multi‑file structures, component directories, testing strategies, data handling, and view integration, emphasizing pragmatic, maintainable architecture over rigid conventions.

Component OrganizationFrontend ArchitectureProject Structure
0 likes · 6 min read
How to Structure a React Project
Architect
Architect
Oct 24, 2015 · Frontend Development

Case Study: React.js, Redux, and Node.js Architecture for Baidu Mami E‑commerce WebApp

This article presents a detailed case study of a mobile‑first single‑page web application built with React.js, Redux, React‑router, and a custom Node.js framework, describing the technology selection, development workflow, encountered challenges, and the advantages and drawbacks of the chosen stack.

Frontend ArchitectureNode.jsReact
0 likes · 10 min read
Case Study: React.js, Redux, and Node.js Architecture for Baidu Mami E‑commerce WebApp
21CTO
21CTO
Oct 23, 2015 · Frontend Development

How to Overcome the Top 5 Challenges of Large‑Scale SPA Development

This article examines the five major obstacles when building massive single‑page applications—componentization, decentralized routing, domain‑wide data stores, hybrid app integration, and performance tuning—and offers practical architectural patterns to address each.

ComponentizationFrontend ArchitectureSPA
0 likes · 10 min read
How to Overcome the Top 5 Challenges of Large‑Scale SPA Development