This article explains how Figma's variable system, nesting, and variant capabilities enable more efficient, accessible, and maintainable component design compared to Sketch, covering color models, component hierarchy, and a practical case study of modal construction.
Discover ten practical Vue3 techniques—including shallowRef, shallowReactive, toRef/toRefs, watchPostEffect, v‑for keys, custom hooks, v‑model modifiers, keep‑alive, and Web Workers—that boost performance, simplify data handling, and enhance component development for modern frontend projects.
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.
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.
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.
This article examines how thoughtful interaction patterns—such as numeric keyboards, task prompt cards, floating layer cards, and visual data components—can streamline complex B2B workflows, reduce user learning costs, and create a smoother, more satisfying experience for both new and seasoned users.
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.
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.
This guide walks through the complete workflow of creating an AI‑native 24‑point game using Baidu Cloud's AppBuilder, covering the three‑step methodology, Agent architecture, component design, custom workflow implementation, and practical tips for optimal model selection.
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.
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.
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.
This comprehensive guide explains navigation design fundamentals, system classifications, and component choices, helping designers build clear, user‑friendly interfaces that guide users efficiently through digital products while avoiding common pitfalls.
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.
This article walks through a real‑world micro‑refactor of a React page, detailing the analysis of component dependencies, the step‑by‑step extraction of a tangled UI block into a reusable component, and the testing strategy that ensures the new code works without breaking existing functionality.
This article explains why front‑end component design matters and provides practical guidance on improving component usability, choosing between slots and props, writing standardized APIs, and achieving high extensibility through techniques like DOM hand‑off and headless UI patterns.
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.
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.
This article explains how 58 Home Service builds and iterates a practical design system that balances consistency with creativity, aligns lead and business designers, defines measurable quality dimensions, and streamlines collaboration to deliver a unified user experience across multiple product lines.
This article explains the design and implementation of a reusable feeds component that supports multiple layout modes, renders different data types, and uses virtual scrolling to keep DOM size low and maintain smooth performance during infinite scrolling.
This article explains how Baidu AI Cloud's low‑code platform AI‑SuDa builds a flexible component system, covering the transition from UI libraries to declarative low‑code components, detailed React examples, visual editor configuration, component registration, data binding, and event‑action mechanisms for efficient application development.
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.
This roundup highlights a Microsoft browser team interview on the web’s past and future, the practical use of HTTP 103 status code, advice against over‑abstracting components, Combine programming practices, live‑stream performance tuning, applying cognitive psychology to UX design, and insights on building effective frontend teams.
This article explains the design and implementation of NutUI’s Collapse component, covering its basic interaction, animation techniques using height and transform, flexible header customization, slot-based extensions, SCSS variable usage, and Vue3 provide/inject communication, all illustrated with practical code examples.
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.
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.
This article details the background, design process, style selection, component theory, color definition, workflow, and enterprise-wide application of a modular illustration system that enhanced visual appeal, streamlined collaboration, and empowered product development across multiple platforms.
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.
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.
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.
This article reviews practical techniques for writing cleaner React components, covering anti‑patterns like prop spreading, using object parameters, curried event handlers, preferring map over if/else, leveraging custom hooks, and splitting components with wrappers, separation of concerns, and dedicated files to improve readability and scalability.
This curated collection presents concise overviews of recent front‑end advancements, covering micro‑frontend architecture in Xiaomi CRM, G6 4.0 visual analytics, code‑quality best practices, 2020's hottest technologies, CDN fundamentals, CSS trends, component design, TypeScript popularity, VSCode inspection tools, watermark techniques, GPU.js acceleration, React DOM manipulation, and the top JS13K 2020 games.
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.
This article details how Alibaba's front‑end team tackled fragmented industry UI development by standardizing components, introducing a DomKey theming mechanism, building a visual theme generator, and leveraging Rax for cross‑platform solutions, ultimately improving reuse and developer efficiency.
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.
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.
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.
This article details the technical process of creating a 3D visualization component for city management systems, covering HTML structure, CSS animations, and mathematical calculations for distributing elements on a circular path.
This article explains how permission control is re‑designed for front‑end/back‑end separated applications, defining resources and permissions, outlining the distinct responsibilities of front‑end routing and component rendering versus back‑end API validation, and providing practical implementation examples in React and Java.
This article explains how the front‑end team built an internal visual dashboard framework called “Big” to replace manual coding and costly third‑party services, detailing its architecture, component design, editing workflow, code snippets, challenges, and future improvements.
This article explains how to abstract and reuse React component logic for inserting advertisements into content lists by comparing several design patterns—including composition, inheritance, container‑presentational, render props, and higher‑order components—and then demonstrates a modern solution using React Hooks to simplify data fetching and event tracking.
This article distills the core concepts of the book “Clean Architecture,” outlining software system value, architecture goals, programming paradigms, design principles such as OCP, SRP, DIP, and practical guidelines for component splitting, dependency handling, and boundary design to build maintainable systems.
Fish Redux is a lightweight, configuration‑driven Flutter framework that extends Redux principles with a three‑layer View‑Effect‑Reducer architecture, automatic reducer composition, component‑level state decomposition, and high‑performance adapters, enabling centralized, observable data management, easier maintenance, team collaboration, and scalability for medium‑to‑large applications.
This article explores how coupling and cohesion influence React component design, compares several prop‑passing techniques—from static components to object, selective, map/array, and child‑object approaches—and offers guidance on selecting the most suitable pattern based on project context and maintainability.
This article shares practical strategies for designing, dividing, and managing React components in a large‑scale CRM system, covering component hierarchy, state and props handling, data communication, common pitfalls, and best practices to improve maintainability and performance.
This article explores the benefits, challenges, and practical methods of applying component‑based design to question banks and exam assembly modules in online education, offering insights on reuse, consistency, requirement analysis, and solution strategies for scalable, flexible UI development.
This article outlines a comprehensive enterprise SOA strategy, detailing the design of an ESB with core functions, component architecture, and a product development platform that enables modular, reusable business components across systems.
After a year of developing with React Native, this guide shares eleven frequent pitfalls—from misguided project planning and layout handling to Redux store design, component structuring, inline styling, and gesture handling—offering practical advice to help developers build more robust mobile applications.
This tutorial explains the Sandal CSS foundation library and the Sheral UI component suite, detailing their structure, usage, and design philosophy for building efficient, customizable mobile interfaces while balancing code size and flexibility.
