Ice.js 3, Alibaba’s Taobao‑originated multi‑terminal framework, extends earlier versions to unify PC, web, and mini‑program development with a React 18‑based runtime, smaller bundles, built‑in plugins, SWC/esbuild toolchains, SSR/SSG data loading, Midway FaaS deployment, and a roadmap toward React Streaming and Server Components.
React 18 introduces Streaming SSR, allowing the server to send HTML in chunks and perform selective hydration, which improves performance by rendering ready sections early and handling asynchronous components via Suspense, with detailed examples of code implementation, error handling, and JS/CSS integration.
This article walks through using the Zustand state‑management library in a complex React component, covering store initialization, actions, selectors, modular file structure, handling controlled vs uncontrolled modes, performance optimizations, and devtools integration, while sharing practical tips and code examples for scalable frontend development.
This article explains frequent misuse patterns of React's useState hook—redundant, duplicate, contradictory, and over‑reliance on useEffect—showing why they hurt readability and maintenance, and provides concise refactor solutions using derived state, IDs, and useReducer.
This article examines the pitfalls of traditional React state management in complex applications, explains why Zustand offers superior state sharing, mutation, derivation, and performance optimization, and provides detailed code examples and best practices for integrating Zustand into large-scale frontend projects.
This article explains React's internal update loop, the render and commit phases, default bailout optimizations, and how developers can accelerate rendering using techniques such as state lifting, content lifting, React.memo, useMemo, and useCallback while avoiding over‑optimization.
This article analyzes the rapid growth of mobile mini‑programs, compares the cross‑platform frameworks uni‑app and taro based on core requirements, ecosystem, and performance, presents a concrete project structure and rendering details, and quantifies the efficiency gains achieved by adopting uni‑app for automotive quotation services.
This article explains the motivation, architecture, technology stack, adaptive layout techniques, component development workflow, drag‑and‑drop enhancements, and real‑time state management used to build a low‑code, front‑end‑focused big‑screen data visualization platform.
Drip Table 2.0 introduces a revamped generator UI, a lightweight React‑based core, editable cells, nested sub‑tables, row‑dragging, fixed rows/columns, a new card layout, and enhanced component support, all built on a performance‑focused architecture and documented with live demos and GitHub references.
React 18 introduces Streaming SSR and Selective Hydration, enabling faster initial page rendering and more efficient hydration by only rendering necessary components.
This tutorial demonstrates how to use a previously built Web Components dropdown inside a React app, covering the creation of an abstraction layer, proper prop handling, event registration, and a reusable custom Hook that formats data and manages listeners.
This curated collection presents technical insights on plugin-based frontend design, high‑concurrency architecture, modern 3D web development, Next.js innovations, React Three Fiber particle effects, functional programming perspectives, a face‑api.js virtual avatar demo, and Base64 encoding fundamentals.
This tutorial walks through creating a lightweight rich‑text editor using ProseMirror's core modules, enhancing it with plugins like history and input rules, and then simplifying development with the Remirror React library to support Markdown formatting and custom extensions.
This guide walks through creating a React app, downloading the React source, building it, linking the packages, configuring webpack aliases, fixing import paths, disabling ESLint, adjusting environment variables, and resolving internal React errors so you can edit and debug the original React source directly in the browser.
This article explains how to synchronize state across distant React components without relying on heavy libraries, using a custom hook and a publish‑subscribe model, and discusses optimizations such as avoiding redundant updates and incorporating a simple reducer for efficient change detection.
This article explains the concepts of binary trees, complete binary trees, and binary heaps, shows how React implements a min‑heap for its task scheduler, and provides detailed JavaScript code examples for push, pop, siftUp, siftDown, and peek operations.
This article introduces NutUI, JD's lightweight mobile component library now supporting JD mini-programs, compares H5 and mini-program development, and provides a step‑by‑step guide using Taro to quickly set up and run a NutUI‑based JD mini‑program project.
This article explains how React simulates requestIdleCallback by combining requestAnimationFrame, postMessage, and MessageChannel to execute work during browser idle periods, detailing the evolution from the early rAF‑postMessage approach in v16 to the message‑loop implementation in v18 and providing simplified source code examples.
This article explains why Ant Design 5 is preferred over MUI, then walks through configuring Vite and tsconfig, creating login and home pages, designing a recursive routing system, implementing lazy loading, menu generation, route listening hooks, tab management with KeepAlive, theme customization, and dynamic routing with React Router 6.4.3 for a full‑featured admin dashboard.
The article presents a comprehensive case study of Ctrip's 2022 PC homepage redesign, detailing the motivations, requirement analysis, island‑style architecture, cross‑team component development, server‑side rendering, public component challenges, and the dynamic data‑configuration platform that together enable fast, maintainable, and scalable web delivery.
This article explains the mechanics behind React re‑rendering, how state and props changes trigger renders, common pitfalls that cause multiple renders in class and function components, and practical strategies—including batching, state merging, useReducer, and refs—to minimize unnecessary updates.
The article shares a developer's practical experience of transitioning from backend to frontend by learning Vue and React, exploring component libraries, tackling layout and styling challenges, and integrating the frontend build into a backend Maven project for a complete gateway console.
This article explains the requestIdleCallback web API, its syntax, execution timing, task‑queue handling, performance characteristics, compatibility issues, and practical integration with React and requestAnimationFrame to off‑load low‑priority work without blocking UI rendering.
This article explains React17's event mechanism changes compared to React16, covering event propagation phases, binding methods like inline HTML, DOM0, and addEventListener, event delegation for efficient handling, and browser event differences.
This article explains the requestAnimationFrame API, demonstrates basic and cancelable animation examples, discusses its execution timing within the browser frame lifecycle, compares its performance to setTimeout, covers compatibility and polyfills, and shows how to wrap it in a React hook for practical use.
OpenSumi is a TypeScript‑based, React‑driven IDE development framework that offers high performance, extensive view customization, and full VS Code plugin compatibility for both web and Electron environments, enabling rapid creation of cloud or local IDE products.
This article explains why a data‑analysis platform needs a plugin architecture for custom charts, compares iframe‑based and Web Components approaches, shows how to implement a lightweight ECharts‑based chart plugin, and provides step‑by‑step code samples and technical selection criteria for frontend developers.
OpenSumi, an open‑source IDE framework from Alibaba, offers a highly customizable, high‑performance solution for building vertical‑domain IDEs on Web and Electron, with full VS Code plugin compatibility, extensive view‑customization, cloud‑native capabilities, and a rich set of real‑world use cases.
The article examines Turbopack's claimed performance advantages over Vite, critiques marketing-driven comparisons in open-source tools, and emphasizes the need for transparent, peer-reviewed evaluations in frontend development.
This comprehensive guide examines the key factors for selecting between React and Vue—including team suitability, compatibility, usage patterns, ecosystem, cross‑platform support, performance benchmarks, mental models, community size, and licensing—to help developers make an informed technology‑stack decision.
React’s newly proposed use hook lets developers consume promises directly in client components and conditionally in loops or blocks, while server components continue to use async/await, offering a unified yet flexible data‑fetching primitive that integrates seamlessly with the JavaScript ecosystem.
This article presents the overall design, technology selection, architecture, and core implementation details—including adaptive layout, component development workflow, drag‑and‑drop handling, and state push mechanisms—of a low‑code, reusable big‑screen data visualization platform built with React and modern front‑end visualization libraries.
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 describes how a one‑code‑multi‑end interactive engine was built by selecting the Taro framework, adapting H5 design, creating a unified data‑management layer, defining a generic development model, handling UI adaptation, animation, and engineering concerns to improve development efficiency across web, mini‑program and app platforms.
This tutorial walks through the practical steps of extending a Slate.js rich‑text editor with toolbar actions, multi‑level list handling, and a robust image‑upload solution, providing code snippets, implementation details, and design considerations for each feature.
Learn how to optimize data fetching in React by understanding initial vs on‑demand requests, avoiding waterfall patterns, leveraging Promise.all, parallel promises, data providers, and browser limits, while applying best practices for useEffect, lifecycle handling, and performance‑focused component design.
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.
This article explains the issue where a Qiankun micro‑frontend main app changes its route but the child app's route does not update, analyzes the underlying cause related to hashchange events, and provides two practical solutions: manually dispatching a hashchange event or replacing Link tags with anchor tags.
The paper presents a low‑code, schema‑driven big‑screen visualization platform built with React, ECharts, D3 and related libraries, detailing its four‑module architecture, adaptive layout techniques, reusable component workflow, drag‑and‑drop enhancements, and WebSocket‑based state management, and outlines future extensions such as a component marketplace and 3D rendering.
The article explains why React is well‑suited for cross‑platform dynamic development, detailing its data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, Taro reconciler adaptations, and independent event system, and shows how React can serve as both a DSL and a full runtime for mobile and web.
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.
The article explains how React’s data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, independent event system, and adaptations such as React Native and Taro enable efficient cross‑platform dynamic applications, and provides code examples and practical guidance for developers.
This article explains how NetEase Qiyu built a high‑cohesion multilingual component using React context and hooks, transformed tree‑structured language data for component libraries, and created a VSCode plugin to automate i18n key replacement, enabling efficient multi‑language support for their customer‑service console.
This article provides a comprehensive guide on unit testing custom React Hooks using Jest, renderHook, act, and the React Testing Library, covering examples such as useCounter, useEventListener, useHover, and useMouse with detailed code snippets and best‑practice recommendations.
The article explains how React’s data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, independent event system, and adaptations in frameworks like React Native and Taro enable efficient cross‑platform dynamic applications, while comparing it with traditional template‑based approaches.
This article provides a comprehensive guide to Recoil, Facebook's React state‑management library, covering its graph‑based architecture, atoms and selectors, family APIs for bulk state, async data handling with Suspense and Loadable, snapshot usage for SSR and time‑travel, external synchronization, and practical tips for reducing mental load.
This article demonstrates how the CodeFun tool can automatically transform UI design drafts into functional front‑end code across multiple frameworks, streamlining repetitive marketing page development by eliminating manual slicing, styling, and basic logic implementation.
This tutorial explains how to create a desktop Markdown editor using Electron with a React UI, Typescript for development, Parcel for bundling, and includes setup of main and renderer processes, preload scripts, environment configuration, and unit testing.
The article explains CSS‑in‑JS fundamentals, examines styled‑components’ source code—including its styled function, createStyledComponent factory, and runtime style injection—compares it with emotion, demonstrates a simple SolidJS MVP implementation, and discusses the technique’s rise, limitations, and possible compile‑time or atomic‑CSS future.
This article explores the inner workings of styled-components, examines its core source code, and demonstrates how to build a lightweight CSS‑in‑JS library for SolidJS, while discussing the benefits and drawbacks of CSS‑in‑JS approaches in modern front‑end development.
This article examines the core challenges that global state‑management libraries must address in modern React applications, reviews the evolution from early solutions like Redux to newer atom‑based and remote‑state tools, and offers guidance on selecting the most suitable library for a given project.
This article explores how PureComponent and shouldComponentUpdate address unnecessary re‑renders in class components, compares them with functional components and hooks, and provides practical techniques—including React.memo, useCallback, setState updater functions, and refs—to optimize rendering performance in modern React applications.
The article explains how the HTML contenteditable attribute enables in‑place editing, why legacy execCommand‑based editors are inconsistent, and how modern frameworks such as Slate.js—built on React and Immutable.js—provide a structured, location‑based data model with Transform and Node APIs for reliable, portable rich‑text editing.
This comprehensive guide explores the fundamentals and advanced techniques of building Chrome extensions using the Plasmo framework, covering plugin concepts, traditional and modern development workflows, code examples, dynamic UI injection, resource handling, and best practices for efficient, scalable extension engineering.
This curated overview highlights six puzzling React phenomena, introduces CSS Grid basics, examines AI‑generated art controversies, discusses COEP’s security benefits, reviews the new Fresh full‑stack framework, and explores how to measure user experience with data‑driven metrics.
The article examines the recurring hype around low‑code, contrasting the programmer’s view of it as a DSL like JSX that abstracts DOM manipulation with the capital‑driven notion of a platform that replaces developers, and discusses the practical challenges of customization, collaboration, testing, and the future of low‑code tools.
This guide walks you through using Docker‑Compose to orchestrate a React front‑end, an Express back‑end, and a MariaDB database, covering environment setup, Dockerfile creation, Nginx configuration, container building, and common pitfalls for seamless full‑stack deployment.
This tutorial walks you through creating a production‑ready front‑end project from an empty directory using Webpack 5, React 18 and TypeScript, covering project structure, dependencies, Babel and TypeScript setup, resource handling, development environment, performance optimizations, and full configuration files.
NodeGui combines Qt5 and Node.js, enabling developers to create desktop applications using familiar web technologies such as CSS and JavaScript, and offers support for popular frameworks like React, Vue, and Svelte seamlessly.
This article explains core principles for designing composable React APIs, demonstrates how to decompose UI into stable, reusable parts, and walks through a complete implementation of a flexible Tabs component with context, render‑props, and testing strategies.
This article explains the inner workings of React DevTools, how it hooks into ReactDOM to access FiberNode structures and component data, and demonstrates a custom useDebugValueAnywhere implementation that bypasses the original hook's limitations for advanced debugging.
This guide walks through using Docker Compose to package and launch a complete full‑stack application—including a React front‑end, an Express back‑end, and a MariaDB database—with a single command, covering prerequisites, Dockerfiles, Nginx configuration, and runtime management.
This article explores typical big-data use cases such as real-time bullet comments and massive server-side data lists, analyzes why rendering thousands of DOM elements can cause page lag, and presents front-end solutions—including dynamic element creation, document fragments, and virtual scrolling libraries—to improve performance.
React’s useReducer hook, introduced in version 16.8, lets a component manage complex state by supplying a reducer function and an initial value, returning [state, dispatch] where dispatch triggers actions; it supports lazy initialization, centralizes updates, works with useContext for shared state, and is preferable to useState for non‑trivial logic but less suited than full Redux for large‑scale state needs.
This comprehensive guide explains what React re‑renders are, distinguishes necessary from unnecessary re‑renders, outlines the four triggers—state, parent re‑render, context, and hooks—and provides practical patterns and anti‑patterns, including memoization, useMemo/useCallback, and key management, to improve component performance.
This article explains how to secure React applications by avoiding dangerous HTML injection methods, using proper sanitization, handling server‑side rendering safely, preventing JSON and URL injection, keeping dependencies up‑to‑date, and applying ESLint security rules.
This guide explains how to configure VSCode and webpack to build React and React‑DOM packages with sourcemaps, set up external module loading, and adjust source‑map paths so that debugging in VSCode can directly step through and locate the original React source files.
This article introduces a lightweight, configuration‑driven approach to building form fields in React using Ant Design, showing how to replace repetitive FormItem code with a declarative schema, handle edit/detail modes, render different component types, and apply common validation rules.
This article introduces Plasmo, a Next.js‑like framework for creating browser extensions using React and TypeScript, covering its key features, system requirements, project scaffolding, development workflow, content‑script integration, environment variables, internationalization, remote code handling, and publishing automation.
This article explains React's Diff algorithm and Fiber architecture, compares it with Vue2 and Vue3's double‑ended diff approaches, and discusses why Vue does not need Fiber or time‑slicing, providing code examples and visual illustrations of the underlying mechanisms.
The June 2022 React Labs post reveals ongoing experiments such as Server Components, asset loading deduplication, static server‑rendering optimizations, a new optimizing compiler with a Playground, the Offscreen API, transition tracing tools, and a revamped documentation site focused on hooks and performance.
This roundup covers the Vue 2.7 beta release, speculative futures for a Chromium‑only web, the architecture of a front‑end monitoring SDK, low‑code rendering standards, JavaScript sandbox evolution, GitHub Copilot’s general availability, WebAssembly trends, functional programming basics, Vue’s double‑ended diff algorithm, JSON.stringify pitfalls, and the latest focus areas of the React team.
VideoX is a versatile front‑end video player built for Taobao’s massive e‑commerce platform, offering multi‑terminal playback, customizable controls, and analytics through a layered architecture that separates core decoding, framework integration, and experience assurance, while supporting modern web technologies and native fallbacks across diverse business scenarios.
The article explains how ByteDance’s Starry low‑code platform uses a Code‑In/Code‑Out model to enable flexible component development, break R&D bottlenecks, generate full React projects, and integrate with micro‑frontend architectures like Garfish to support SSR for large‑scale web applications.
OpenSumi, the first domestically developed high‑performance, highly customizable IDE framework compatible with VS Code plugins, enables developers to quickly build web or Electron‑based IDEs with extensive view customization, cloud integration, pure‑frontend deployment, and full VS Code plugin support, addressing common limitations of existing open‑source solutions.
This curated list presents eleven essential frontend development articles covering VS Code debugging, React component library maintenance, web application evolution, monorepo task orchestration, Ant Design table export, testing strategies, low‑code rendering, browser observers, React Server Components, modern ES features, and effective test planning.
This tutorial shows how to convert a read‑only AntV S2 data table into an interactive, editable spreadsheet by adding a controlled input element, handling cell click events, synchronizing edits back to the data set, and keeping the editor in sync with scrolling and focus.
This article details the end‑to‑end design and implementation of a 3D immersive food‑shopping experience, covering project goals, architecture split between Babylon 3D rendering and DOM rendering, resource management, camera collision handling, map integration, performance optimizations, and lessons learned.
This article provides an in‑depth tutorial on implementing server‑side rendering (SSR) for React applications, covering basic concepts, Koa server setup, ReactDOMServer APIs, routing with react‑router, Redux state hydration, CSS handling, performance optimizations, and modern SSR frameworks such as Next.js and Umi.
This article explains Redux’s core concepts, demonstrates how to implement a basic createStore function in JavaScript, and shows how to integrate it with React using a custom Provider and connect higher‑order component for state sharing across components.
This article explains how to design a unified permission system's frontend SDK, detailing its core APIs, integration methods for standard React and Umi projects, dynamic route generation, and menu/button level permission controls, accompanied by practical code examples.
This article introduces Plasmo, a modern framework for building browser extensions using familiar web technologies like React, TypeScript, and Webpack, explains how to initialize a project, configure assets, debug with Chrome, and publish across Chrome, Firefox, and Edge stores, streamlining development and deployment.
This article explores several techniques—including MutationObserver, IntersectionObserver, ResizeObserver, onload listeners, and an iframe hack—to reliably detect when a rich‑text container with images exceeds a maximum height so a "show more" button can be displayed.
This article demonstrates how to use AntV S2 in a React project to create a multi‑dimensional table for quickly filtering, sorting, paginating, and highlighting ideal housing units during a fast‑paced on‑site selection process, complete with code snippets and visual examples.
This tutorial explains how to install react-router-dom, create basic and nested routes, handle unmatched and index routes, pass parameters, use search parameters, customize link behavior, and navigate programmatically in a React application, providing complete code snippets for each concept.
In this personal learning plan for 2022, the author outlines a deep dive into Rust and WebAssembly, explores Vite with server‑side rendering, experiments with Vue, React and Next.js, investigates Kubernetes for container orchestration, and examines GraphQL as a modern API alternative.
This article describes how a metrics dashboard was refactored by standardizing chart and table data formats, leveraging Ant Design Charts, and building reusable React components such as ChartCardList and RankTable, thereby minimizing front‑end development effort and enabling rapid addition of new visualizations.
This article provides an extensive overview of the modern React ecosystem, covering project setup options, state management, routing, styling, component libraries, animation, data fetching, testing, type checking, internationalization, and many other tools and best‑practice recommendations for frontend developers.
This article explains how the TypeScript compiler options allowSyntheticDefaultImports and esModuleInterop affect importing React, showing the differences in emitted JavaScript and why the latter is needed for default imports to work correctly.
This article explains what race conditions are in front‑end web development, demonstrates the issue with a React demo fetching articles, and walks through step‑by‑step solutions using custom hooks, useEffect cleanup, and AbortController to safely cancel outdated requests and avoid stale data rendering.
This article explains how useReducer can replace useState for complex state logic, introduces Context for sharing data across components, demonstrates their combined usage with code examples, and compares this approach to React‑Redux, highlighting differences in data flow, rendering behavior, and suitable scenarios.
This article curates the most notable 2022 DevOps trends, explores whether React Server Components will replace APIs, explains Kafka's performance advantages, shares CI cache techniques for faster pipelines, includes an interview on the future of frontend development, and presents a Three.js recreation of the WeChat Jump game.
This digest covers Flutter 3.0 release, the evolution of JavaScript frameworks, React concurrent rendering, WebComponents UI library insights, frontend build tool comparisons, Rust fundamentals, and Vite core principles, and includes external articles on GraphQL and software engineering best practices.
This article analyzes various CSS styling approaches for React component libraries, comparing CSS‑JS association methods and naming‑conflict solutions, and offers guidance on selecting the most suitable strategy based on development workflow, performance, SSR support, and maintainability.
The article examines why Ant Design's Table feels sluggish, covering its historical design choices, memoization behavior, challenges with virtual scrolling and editable cells, and how breaking‑change management influences performance and developer experience.
This article explains what React Server Components are, why they matter, how they address the limitations of traditional API‑driven front‑end architectures such as request waterfall, bundle size and collaboration overhead, and what benefits and challenges they bring to modern web development.
This article examines the emerging React Server Components feature, explains the limitations of traditional API‑driven front‑end/back‑end separation, and outlines how server‑rendered components can reduce bundle size, eliminate request waterfalls, and lower collaboration costs for modern web applications.
This article examines why Ant Design’s Table component often feels sluggish, covering historical design choices, memoization pitfalls with external state, the challenges of virtual scrolling for editable tables, and how the shouldCellUpdate and onCell APIs provide finer‑grained rendering control.
This article explores how to implement smooth scrolling using CSS and JavaScript, compares native scroll APIs, demonstrates practical React examples, explains how to differentiate user‑initiated and script‑driven scrolling, and provides compatibility tips and workarounds for common pitfalls.
This article provides a comprehensive overview of React 18, covering its release timeline, migration steps, new APIs such as the root API, useId, useSyncExternalStore and useInsertionEffect, automatic state batching, flushSync, updated Strict Mode and Suspense behavior, concurrent mode concepts, and practical code examples for developers upgrading from React 17.
