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.
This article demonstrates how to leverage the ES6 Proxy object to create a lightweight global state management solution for React, walking through a counter example, custom hooks, listener tracking, and a reusable store creator for seamless component updates.
This step‑by‑step guide shows how to create a React project, build Docker images using slimmer base images, multi‑stage builds, and Nginx, reducing the final image size from over a gigabyte to just a few megabytes while keeping the app functional.
Each week WecTeam Frontend Weekly highlights top technical reads, offering concise insights into React’s Scheduler mechanics, a side‑by‑side comparison of modern build tools like esbuild, Snowpack, Vite and wmr, and a case study on dramatically boosting H5 page load speed in the Dewu app.
This article compares Vue and React by examining their template syntax, virtual DOM implementations, update strategies, data binding mechanisms, and performance characteristics, offering practical guidance on choosing the appropriate framework for projects of varying size and browser compatibility requirements.
This article explains the major React 18 innovations—including Concurrent Mode, startTransition, automatic batching, streaming SSR, Server Components, Offscreen, and new hooks—showing how they work, when to use them, and providing practical code examples for developers upgrading their apps.
Learn how to build a simple global state management solution in React using custom hooks, starting from a basic counter component, extending it with initialization props, synchronizing multiple counters, and finally creating a reusable createGlobalState utility for shared state across components.
This article explains the design and implementation of a minimal 40‑line Diff algorithm for React’s virtual DOM, covering node attribute changes, insertions, deletions, and moves, and provides a complete TypeScript demo that marks nodes with placement or deletion flags for efficient DOM updates.
This curated collection highlights recent React ecosystem insights, a step‑by‑step guide to building a 100k QPS coupon system, techniques for creating a lightweight WebIDE, strategies for establishing front‑end standards, plus productivity habits, the Rust 2024 roadmap, React mind‑maps, open‑source programming books, and a new JavaScript sandbox using ShadowRealm.
This article describes how a company refactored its Ant Design‑based React component library by standardizing on higher‑order component wrappers, adopting the dumi documentation tool, and organizing the codebase with a Lerna‑Yarn monorepo, resulting in significantly improved maintainability and developer efficiency.
This article introduces Alibaba's open‑source LowCodeEngine, outlines its key features, and provides a step‑by‑step tutorial—including environment setup, dependency installation, project launch, component configuration, data source integration, preview, and code export—to help developers quickly build a low‑code front‑end platform using React.
This article introduces Alibaba's open‑source LowCodeEngine, outlines its key features, and provides a step‑by‑step tutorial for quickly building a low‑code development platform that generates React front‑end code, configures components, connects data sources, and exports the resulting code.
This article outlines four key React performance optimization strategies—reducing render frequency, trimming rendered nodes, minimizing computation, and designing components wisely—while providing practical code examples such as PureComponent, shouldComponentUpdate, React.memo, lazy loading, useMemo, and virtualized lists.
This article reviews the evolution of React state‑management solutions, comparing classic Redux with modern Hook‑based libraries such as Unstated‑Next, Constate, Zustand, Jotai and Valtio, explains core concepts like algebraic effects, context duplication, and provides practical code examples and performance tips.
This article demonstrates how to build a low‑poly 3D browser game using Three.js, React, and Cannon.js, covering resource loading, scene setup, physics with Heightfield terrain, joystick controls, animation handling, UI flow, and deployment, with full code examples and implementation details.
This newsletter curates a selection of recent technical articles and resources, covering front‑end development breakthroughs like Vue component extraction, React 18 features, Babel compilation, as well as Web 3.0 perspectives, Node.js design principles, email HTML/CSS techniques, and a collection of efficiency‑boosting tools for developers.
React 18 has been officially released, introducing automatic batching, a new startTransition API, expanded Suspense capabilities, updated client‑server rendering APIs, and stricter mode behaviors, all built on a concurrent rendering engine that aims to change how developers build modern web applications.
The article covers DJI’s denial of aiding Russia, the latest features in GitLab 14.9, the official launch of React 18 with its new concurrent capabilities, and a developer’s creative project that prints GitHub issues using a Raspberry Pi‑connected receipt printer.
This article explains how the AntV S2 canvas‑based rendering engine was used to create a feature‑rich, high‑performance React data‑grid capable of handling tens of thousands of rows, covering cell editing, brush selection, virtual scrolling, frozen rows/columns, custom headers, filtering, sorting, searching, and copy‑to‑clipboard functionality.
This article explains React 18’s four major innovations—Automatic Batching, Concurrent APIs, Server‑Side Rendering for Suspense, and the new Render API—showing how they improve rendering performance, enable concurrent UI updates, and simplify hydration in modern web applications.
This article explains the SWR library—a lightweight React hook that implements the stale‑while‑revalidate caching strategy—covering its core concepts, basic usage, advanced features like global configuration and middleware, and an overview of its internal implementation.
This tutorial demonstrates how to build a fire‑animated Elden Ring logo using React, Three.js, and the Fire.js extension, covering background setup, resource import, scene initialization, fire effect configuration, responsive scaling, camera animation, and rendering loop with complete code examples.
This article traces the evolution of frontend development from server‑side rendering with PHP/JSP through AJAX and jQuery to modern MVVM frameworks, comparing React, Vue, and Angular in terms of syntax, data‑update mechanisms, performance optimizations, and code‑reuse strategies.
This curated list highlights twelve insightful articles covering Formily's design, React Hooks quirks, ESModule production strategies, Observable-based anti‑corruption layers, REST API POST debates, TypeScript pitfalls, WebAssembly future, spline vs. Bézier curves, Cocos engine rendering, handling complexity with DDD, and React's automatic import changes.
This article explains how React 18's concurrent mode changes state calculation and rendering by introducing update priorities, showing how multiple state updates are batched, how low‑priority updates can be skipped, and why the new scheduler reduces unnecessary renders while preserving final results.
This collection highlights recent technical articles and resources covering Vue 3.0, ESLint fundamentals, defensive CSS techniques, low‑code system design, React project setup, Nest.js with TypeORM, and an introduction to the LRU caching algorithm, offering practical insights for frontend developers.
This article demonstrates how to recreate the Three.js Journey floating 3D text effect using a React and Three.js stack, covering resource imports, DOM structure, state management, CSS grid background, font loading, geometry creation, mouse interaction, fullscreen handling, post‑processing effects, and responsive scaling.
The article introduces DynamicForm, a React‑driven visual dynamic form configuration system designed to eliminate repetitive form coding, offering drag‑and‑drop layout, rich control types, validation, data binding, and a modular architecture that streamlines component property management on Ctrip’s Lego platform.
This article details how Ant Financial’s front‑end team created a fast, extensible React big‑data table component using the open‑source AntV S2 Canvas library, covering performance‑driven technical choices, custom cell editing, virtual scrolling, freezing, filtering, sorting, and integration challenges that replaced costly commercial spreadsheet solutions.
OpenSumi, the first domestically developed, highly customizable, high‑performance IDE framework compatible with VS Code extensions, enables developers to quickly build dual‑platform (Web and Electron) IDEs with modular architecture, independent processes, and extensive view customization, addressing the repetitive setup challenges faced by Alibaba and Ant Group teams.
OpenSumi is a TypeScript‑based, VS Code‑compatible IDE framework jointly developed by Ant Group and Alibaba that offers low‑threshold, high‑performance, and highly customizable web and Electron IDE solutions, supports full VS Code plugin ecosystems, and provides cloud‑native development workflows for vertical industry scenarios.
OpenSumi, an open‑source IDE development framework built with TypeScript and React, offers high performance, deep customization, full VS Code plugin compatibility, and cloud‑native capabilities, positioning it as a powerful alternative to existing solutions like code‑server and Theia.
This article explains how Recoil implements asynchronous data streams, detailing the underlying data‑flow architecture, the role of atoms and selectors, the lifecycle of async loading states, and two approaches for handling loading—manual useRecoilValueLoadable and automatic React.Suspense integration—accompanied by illustrative code examples.
This article explains why React function components were stateless before version 16, how the introduction of Fiber and the useState hook gave them state, and dives into the internal mechanisms—including renderWithHooks, hook queues, and update scheduling—that make state updates work in modern React.
This guide walks through the complete setup of SQLE's development environment, covering the Go-based backend API, MySQL configuration, and the Node.js/React frontend, including required tools, code cloning, building, and testing steps on Linux.
The article introduces Event Collector, a markup‑based web event tracking framework that replaces imperative tracking with data attributes or React components, explains its technical implementation, management tools, monorepo organization, release workflow, and React coding conventions to improve development efficiency and data analysis.
This tutorial walks you through creating a three‑dimensional Bing Dwen Dwen mascot using Three.js and React, covering resource import, scene setup, lighting, loading management, model integration, and one‑click deployment on Alibaba Cloud's cloud development platform.
The article traces React’s state‑management evolution from basic useState hooks through unstated‑next and hox to the minimalist zustand library, showing how each step reduces boilerplate, eliminates prop‑drilling and deep providers, and enables precise, hook‑based updates for modern functional components.
This article walks through the design and implementation of Ant Design Mobile's Picker component, covering its API, gesture handling, animation techniques, performance optimizations, and accessibility improvements for screen‑reader users, while sharing practical code examples and visual diagrams.
Discover a curated collection of must‑read articles covering Esbuild tools, ES6 compatibility, Node.js require hooks, WebAssembly trends, React 18 batching, async error handling, Vite performance, Event Loop deep‑dive, micro‑frontends, V8 internals, and more for modern frontend engineers.
This article demonstrates how to build an interactive Winter Olympics-themed 3D web page using Three.js and React, covering model loading, custom materials, lighting, particle effects, and camera controls, with detailed code snippets and explanations for each component.
This article explains how React (pre‑16.8) batches multiple setState calls using batchedUpdates, demonstrates the internal mechanism with source‑level debugging, shows code examples including setTimeout edge cases, and summarizes the key steps that enable the framework’s performance optimization.
This article presents a comprehensive guide to improving web performance for Trip.com’s flight pages, covering user‑centric metrics, measurement methods, and practical optimization techniques such as package size reduction, resource hints, lazy loading, server‑side rendering, long‑task mitigation, and React‑specific improvements, ultimately raising the PageSpeed score from around 30 to over 80.
This article demonstrates how to build an interactive 3D Winter Olympics themed webpage using Three.js and React, covering resource import, scene setup, lighting, model loading, custom materials, particle effects, camera controls, and animation techniques.
This article presents a lightweight, framework-agnostic canvas layout engine that parses CSS-like styles, performs document-flow layout, renders via a depth-first canvas draw, supports interactive events, works across web and mini-program environments, and demonstrates its API, debugging tools, performance results, and future extensions.
The article reviews the most significant JavaScript ecosystem events of 2021, covering front‑end tools like Snowpack, Vite, React, Vue, back‑end updates such as Node.js 16 and npm 7, new language features, and notable deprecations, providing concise summaries and code examples.
This article explains common pitfalls when using conditional expressions in React JSX—such as rendering zero, operator precedence, ternary nesting, and using JSX as a condition—and provides clear recommendations like explicit boolean checks, parentheses, key usage, and avoiding overly complex ternary operators.
This article outlines a practical approach for adding i18n support to a mature React-based project by consolidating language resources, using i18next for business strings, leveraging Gulp for on‑demand locale builds, and integrating Webpack for seamless runtime loading and cache management.
Mometa, the top‑ranked GitHub trend this week, is a low‑code, meta‑programming tool that offers visual code editing, customizable material libraries, React support, and seamless integration with existing projects, enabling developers to quickly prototype, edit, and transition between visual and code modes.
Discover nine high‑quality, open‑source admin dashboard templates—including vue‑element‑admin, D2Admin, Vue‑admin‑better, AdminLTE, Ant Design Pro, Tabler, ngx‑admin, Gentelella, and blur‑admin—each with brief descriptions, key features, and links to demos and repositories, helping developers quickly build attractive backend interfaces.
Writing reusable front‑end code means identifying and extracting repeatable UI components, centralized API request/response handling, common business‑flow logic, shared state management, and utility functions into separate, modular files or libraries, which reduces duplication, eases maintenance, and improves scalability across similar scenarios.
This article outlines a modern icon delivery workflow that moves from static image resources to a Figma‑driven process, using a custom Figma plugin and GitLab CI to fetch, optimize with SVGO, and automatically generate React/Vue SVG component libraries, publish npm packages, and deploy documentation.
This article explores practical performance optimization techniques for the OpenSumi IDE, covering React re‑render reduction, component memoization, menu caching, TreeView prop pruning, icon handling, and panel resize event management, demonstrating how targeted code changes can dramatically improve UI responsiveness.
This article explores the most popular front‑end development trends for 2022, covering JAMstack, progressive web apps, JavaScript dominance, single‑page sites, AI chatbots, Gatsby, and React, while explaining why these technologies are reshaping web user experiences.
This article explains how to implement native HTML5 drag‑and‑drop, details the required draggable attribute, describes all related events, shows a simple JavaScript demo, discusses common pitfalls such as repeated ondragover and ghosting, and compares popular React libraries for drag‑and‑drop.
The article reviews the 2021 React Conf, summarizing React 18’s key innovations such as Suspense for data fetching, Concurrent Mode, automatic batching, new hooks, streaming SSR, and the roadmap for React Native, while also sharing upgrade tips, code examples, and community insights.
This article explains how to design, build, and publish reusable module packages—including shared configuration libraries, UI component libraries, and native language modules—within a monorepo, covering package.json configuration, multiple entry formats (ESM, CJS, UMD), tooling choices, and publishing workflows for both frontend and Node.js projects.
This article details practical performance optimizations applied to the OpenSumi IDE—using React memoization, component splitting, menu caching, tree view prop pruning, and icon batch insertion—to dramatically reduce unnecessary re‑renders and improve UI responsiveness.
This article explains why React introduced Hooks, how they solve state‑reuse and component‑complexity problems, details the internal fiber architecture behind useState, useReducer, useEffect, useLayoutEffect, useCallback and useMemo, and provides practical code examples for each.
