Component Design

Rare Earth Juejin Tech Community

Jun 17, 2025 · Frontend Development

Why Vue Component Design Becomes a Nightmare and How to Fix It

After three years of building Vue apps, the author reveals how naive component extraction leads to sprawling directories, tangled props and events, and mounting technical debt, then offers concrete strategies—clear responsibilities, minimal APIs, slots, and abstraction skills—to design maintainable, reusable components.

Component DesignTechnical DebtVue

0 likes · 9 min read

Why Vue Component Design Becomes a Nightmare and How to Fix It

Rare Earth Juejin Tech Community

Jan 21, 2025 · Frontend Development

Tencent IM Overview and Component Design for Instant Messaging Applications

This article provides a comprehensive technical guide on Tencent Cloud's instant messaging (IM) service, comparing UI‑integrated and non‑UI integration approaches, detailing the core chat and input components, their Vue/TypeScript implementations, rendering logic, event handling, and auxiliary features such as file upload simulation, scroll management, and voice/video calling.

Component DesignInstant MessagingTypeScript

0 likes · 33 min read

Tencent IM Overview and Component Design for Instant Messaging Applications

JD Tech

Nov 20, 2024 · Product Management

Designing Efficient B2B User Experiences: Digital Keypad, Task Tip Cards, Floating Cards, and Data Visualization Components

This article shares a series of B‑side experience design case studies—including a digital keypad for streamlined data entry, task tip cards for instant guidance, floating cards to reduce navigation, and innovative data‑visualization components—illustrating how thoughtful interaction design can boost efficiency, reduce user friction, and foster a seamless product‑user rapport.

B2BComponent DesignUX design

0 likes · 17 min read

Designing Efficient B2B User Experiences: Digital Keypad, Task Tip Cards, Floating Cards, and Data Visualization Components

DaTaobao Tech

Sep 4, 2024 · Frontend Development

Best Practices for Component Design and Encapsulation in React

The article outlines React component design best practices by distinguishing generic UI components from business‑specific ones, separating UI and domain state, extracting reusable base components, applying patterns such as state lifting, context, memoization, and type‑safe props, and providing a checklist for clean encapsulation.

Component DesignDDDEncapsulation

0 likes · 10 min read

Best Practices for Component Design and Encapsulation in React

Rare Earth Juejin Tech Community

Jul 26, 2024 · Frontend Development

Design and Implementation of a Configurable Dynamic Form in Vue

This article walks through the design and implementation of a configurable dynamic form in Vue, covering user‑side API design, type definitions, enhanced next‑function logic, recursive component rendering, and a complete example with code snippets to illustrate building and using the form component.

Component DesignDynamic FormRecursive Component

0 likes · 11 min read

Design and Implementation of a Configurable Dynamic Form in Vue

Rare Earth Juejin Tech Community

Mar 15, 2024 · Frontend Development

Refactoring Fantastic‑admin: Making a Vue‑Based Admin Framework UI‑Agnostic

The article chronicles the author’s three‑year journey of transforming the Vue‑based Fantastic‑admin backend framework from a tightly coupled Element Plus implementation into a UI‑agnostic, component‑driven system by analyzing pain points, evaluating multiple redesign strategies, and detailing the step‑by‑step implementation and validation across several UI libraries.

Admin FrameworkComponent DesignOpen-source

0 likes · 14 min read

Refactoring Fantastic‑admin: Making a Vue‑Based Admin Framework UI‑Agnostic

Sohu Tech Products

Jan 24, 2024 · Frontend Development

Five React Component Design Patterns: Compound, Controlled, Custom Hooks, Props Getters, and State Reducer

The article reviews five React component design patterns—Compound, Controlled, Custom Hooks, Props Getters, and State Reducer—explaining how each improves reusability, API simplicity, and state management while weighing their advantages, disadvantages, and ideal use‑cases for scalable, maintainable UI development.

Component DesignHooksJavaScript

0 likes · 18 min read

Five React Component Design Patterns: Compound, Controlled, Custom Hooks, Props Getters, and State Reducer

政采云技术

Jan 9, 2024 · Frontend Development

Five React Component Design Patterns with Advantages, Disadvantages, and Use Cases

This article introduces five reusable React component design patterns—Compound Component, Controlled Component, Custom Hook, Props Getters, and State Reducer—explaining their implementations, pros and cons, and suitable scenarios to help developers balance flexibility, complexity, and control in UI development.

Component DesignJavaScriptReact

0 likes · 17 min read

Five React Component Design Patterns with Advantages, Disadvantages, and Use Cases

vivo Internet Technology

Nov 15, 2023 · Frontend Development

Design and Implementation of a BI Filter Component Library (bi-filters)

The article details how the BI platform’s bulky, tightly‑coupled filter was refactored into a standalone, generic ‘bi‑filters’ library managed with Lerna and Vue‑CLI, enabling on‑demand imports, independent packaging, and a three‑layer design that improves extensibility, universality, robustness, reduces code size, and simplifies maintenance.

BIComponent DesignFilter

0 likes · 13 min read

Design and Implementation of a BI Filter Component Library (bi-filters)

Zhuanzhuan Tech

Nov 16, 2022 · Backend Development

Design and Implementation of HunterConsumer and HunterProducer Components for RocketMQ Integration

This article explains the background of RocketMQ clusters, demonstrates typical Java consumer and producer usage, and introduces the AOP‑based HunterConsumer and HunterProducer components that simplify lifecycle management, configuration, and code reuse for backend developers working with messaging systems.

AOPComponent DesignJava

0 likes · 15 min read

Design and Implementation of HunterConsumer and HunterProducer Components for RocketMQ Integration

Rare Earth Juejin Tech Community

Nov 15, 2022 · Frontend Development

Building a Seamless Infinite Scroll Component with Vue 3

This article explains why infinite scrolling is essential for large‑screen dashboards, analyses three implementation strategies, and provides a complete Vue 3 component—including BEM‑styled markup, GSAP‑driven animation, slot‑based content insertion, and optional hover‑pause behavior—to achieve a smooth, endless scrolling list.

BEMComponent DesignGSAP

0 likes · 14 min read

Building a Seamless Infinite Scroll Component with Vue 3

JD Retail Technology

Jul 11, 2022 · Frontend Development

Design and Implementation of the NutUI Collapse Panel Component

This article explains the design principles, implementation details, and advanced features of NutUI’s Collapse panel component, covering basic interaction, height‑based animation, flexible title bar with icons, configuration upgrades, slot usage, CSS variable styling, and Vue 3 provide/inject communication, supplemented with code examples.

CSS animationCollapseComponent Design

0 likes · 12 min read

Design and Implementation of the NutUI Collapse Panel Component

JD Retail Technology

May 24, 2022 · Frontend Development

Design and Implementation of the NutUI Calendar Component with Vertical Switching

This article explains the design choices, data processing, virtual‑list optimization, scroll handling, and extensible slot/prop architecture used to build a high‑performance vertical‑switching calendar component in the NutUI front‑end library.

Component DesignDate PickerNutUI

0 likes · 13 min read

Design and Implementation of the NutUI Calendar Component with Vertical Switching

Dada Group Technology

May 6, 2022 · Frontend Development

Improving Usability and Efficiency of the Cashier System: Front‑End Architecture Redesign and Component Refactoring

This article analyzes the usability and efficiency issues of the JD.com to‑home cash register H5 and RN versions, proposes a front‑end architectural redesign with component reuse, layering, and design principles, and demonstrates the resulting performance gains, reduced code entropy, and future improvement plans.

Component DesignEfficiencyPayment System

0 likes · 15 min read

Improving Usability and Efficiency of the Cashier System: Front‑End Architecture Redesign and Component Refactoring

IEG Growth Platform Technology Team

Nov 22, 2021 · Backend Development

Design Principles and Decoupled Deployment for Backend Systems

This article summarizes SOLID and component design principles, explains how to evaluate and balance component stability, coupling, and abstraction, and describes source‑code, library, and service‑level decoupled deployment strategies for building maintainable backend architectures.

Component DesignDecoupled DeploymentSOLID

0 likes · 25 min read

Design Principles and Decoupled Deployment for Backend Systems

Youku Technology

Nov 10, 2021 · Frontend Development

Design and Implementation of a No‑Code Logic Orchestration Platform (YOHO)

YOHO is a no‑code, graphically‑driven logic orchestration platform built on the G6 engine that lets non‑technical users compose business workflows by dragging components onto a canvas, exporting a DSL, and executing it at runtime, thereby separating UI from logic, enabling rapid parallel development, component reuse, and significant cost and time savings.

Component DesignDSLFront-End Development

0 likes · 17 min read

Design and Implementation of a No‑Code Logic Orchestration Platform (YOHO)

Baidu App Technology

May 14, 2021 · Frontend Development

Deep Dive into Vue 3 Composition API: Design, Analysis, and Practical Implementation

The article thoroughly examines Vue 3’s Composition API, explaining its motivation over the Options API, detailing its function‑based design and TypeScript advantages, addressing concerns about complexity, and offering practical guidance on when and how to adopt it for cleaner, more maintainable component logic.

Component DesignComposition APILogic Reuse

0 likes · 12 min read

Deep Dive into Vue 3 Composition API: Design, Analysis, and Practical Implementation

政采云技术

Dec 1, 2020 · Frontend Development

Writing High-Quality Maintainable Code: Component Abstraction and Granularity

This article explains how to write high-quality, maintainable frontend code by exploring component abstraction, granularity, design principles, and classification—from atomic to page-level components—illustrated with React and Vue examples, code snippets, and practical guidelines for balancing reuse and complexity.

Component DesignGranularityReact

0 likes · 15 min read

Writing High-Quality Maintainable Code: Component Abstraction and Granularity

Top Architect

Aug 20, 2020 · Information Security

Understanding Permission Control in Frontend‑Backend Separation Architecture

The article explains how permission control in a front‑back separation architecture defines resources and permissions, outlines the distinct responsibilities of frontend and backend in enforcing access, and provides practical implementation examples with component tags and Java interceptor code.

Component DesignJava interceptoraccess control

0 likes · 6 min read

Understanding Permission Control in Frontend‑Backend Separation Architecture

NetEase Cloud Music Tech Team

Aug 20, 2020 · Frontend Development

JSON-Based Form Solution for Complex B-end Scenarios in NetEase Cloud Music

NetEase Cloud Music’s frontend team created a JSON‑based form framework that extends Ant Design, offering async validation with error and warning states, reverse‑listener field linking, four exclusive form modes, flexible option loading, and performance‑optimized core‑render separation for complex B‑end applications.

Ant DesignB-end ApplicationComponent Design

0 likes · 12 min read

JSON-Based Form Solution for Complex B-end Scenarios in NetEase Cloud Music