Former LinkedIn senior engineer Chris Krycho reveals how organizational constraints, technical debt, and conflicting migration strategies made modernizing a 2‑million‑line front‑end codebase a multi‑year challenge, offering key insights for large‑scale software refactoring.
This article explains why rendering performance is crucial for React applications and provides a comprehensive guide on monitoring tools such as Profiler and Developer Tools, followed by practical optimization methods including component update control, data handling hooks, code‑splitting, lazy loading, and concurrent mode.
This guide introduces a curated collection of VS Code extensions—including themes, basic utilities, Vue and React tools, mini‑program support, code formatters, database helpers, and productivity plugins—helping developers streamline their frontend workflow and improve coding efficiency.
LangGraph, introduced in LangChain 0.1, addresses the limitations of simple Chains by adding loop capabilities and detailed control over Agent execution, enabling complex multi‑Agent, RAG, and self‑repair scenarios through a state‑graph architecture.
This article explores how TypeScript’s type inference works in the Zustand state‑management library, demonstrates practical examples such as automatic value inference, function return inference, generic‑based inference, and builds custom utilities like a pick method and a reusable useRequest hook, while also delving into middleware typing and advanced type‑level tricks.
This article details how the author recreated Xiaomi's calendar using React functional components, TypeScript typings, TailwindCSS styling, and the lunar‑typescript library, covering the tech stack, core date calculations, view rendering, touch‑based scrolling, and view mode switching with complete source code examples.
This article explains what React custom hooks are, how to define and use them, outlines design principles, discusses performance optimizations, and provides practical examples such as form validation and component communication, all aimed at improving code reuse and maintainability.
This tutorial demonstrates how to create a visually striking card component with light‑following and 3D parallax effects using React, Tailwind CSS, and custom hooks, covering setup of three boxes, mouse event handling, CSS transforms, and reusable hook encapsulation.
This article details a comprehensive approach to improving the performance and user experience of complex H5 game-like applications by using offline package splitting, native splash screens, global state management with zustand, data prefetching, image loading optimizations, transition animations, and ranking list enhancements.
This article explains why useEffect in React is an "escape hatch" between functional and imperative code, outlines common pitfalls, provides twelve concrete scenarios where useEffect should be avoided or replaced, and offers best‑practice alternatives such as inline calculations, useMemo, event handlers, state lifting, and custom hooks.
Discover the best CSS frameworks for 2024—including Bootstrap, Tailwind, Foundation, Bulma, and UIkit—detailing their key features, integration methods, and code examples, to help developers choose the right toolkit for rapid, responsive, and maintainable front‑end design.
This article explains React Hooks introduced in version 16.8, detailing the purpose and usage of common hooks such as useState, useEffect, useContext, useReducer, useRef, useCallback, and useMemo, and provides practical code examples for each.
shadcn/ui is a rapidly popular, copy‑and‑paste component collection that provides accessible, highly customizable Tailwind‑styled UI elements with a two‑layer architecture, theme editor, dark‑mode support, and CLI, offering simplicity and fine‑grained control while requiring manual integration and careful bundle‑size management.
This article explains how to use the Lottie library to replace hand‑written CSS/JS or GIF animations with vector‑based, cross‑platform switch animations, covering installation, configuration options, direction control, playback speed, JSON modification, and a helper function for updating values.
This article explains the micro‑frontend pattern, introduces the MicroApp framework, outlines when to adopt micro‑frontends, compares existing solutions, and provides a step‑by‑step guide for building a React‑based micro‑frontend base with code examples, cross‑origin handling, proxy configuration, and data communication.
React’s upcoming v19 release introduces four experimental hooks—use, useOptimistic, useFormState, and useFormStatus—focused on simplifying data fetching and form handling, allowing developers to read promises or context directly, perform optimistic UI updates, and manage form state and submission status within React components.
This tutorial walks through creating a desktop screen‑recording tool using Electron with a React‑Vite front‑end, Ant Design UI, IPC communication, system‑tray controls, draggable windows, and FFmpeg for capturing video in WebM, MP4, or GIF formats.
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 tutorial walks through creating a desktop screen‑recording tool using Electron with a React‑Vite front‑end, configuring resolution, frame rate, and output formats (webm, mp4, gif), implementing IPC communication, system‑tray controls, draggable windows, and FFmpeg‑based recording logic.
This article curates essential front‑end topics—including SSE real‑time push, component design, React state‑management comparison, performance‑panel analysis, file parsing methods, and the 2024 web‑front‑end trends—while also introducing the Cloud Classroom front‑end team’s mission and structure.
The 2023 frontend review highlights TypeScript’s size and speed gains, ECMAScript 2023 features, evolving frameworks like React, Vue, Svelte, Angular and emerging Qwik, while Rust tooling, Bun, browser changes, AI‑driven low‑code, and WASM progress set the stage for 2024’s LLM‑powered, Rust‑centric, cross‑platform development.
This article presents a comprehensive guide to front‑end performance optimization, covering metric selection (FCP, LCP, TTI, x‑fmp), data collection and reporting, dashboard creation, network‑ and application‑layer bottleneck analysis, and concrete code‑level improvements for faster page loads.
React’s core fiber system traverses a depth‑first tree using performUnitOfWork, splits rendering into beginWork and completeWork, then commits in before‑mutation, mutation, and layout phases, while hooks like useState and useEffect are implemented via linked‑list queues that ensure deterministic updates and side‑effect handling.
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 article explains how Formily parses JSON Schema, builds a form tree, handles data binding, validation, and submission, and walks through the internal rendering flow—including createSchemaField, RecursionField, and ReactiveField—while providing practical examples and discussing complex linked‑field scenarios and performance considerations.
This guide introduces ProFlow, a React‑friendly UI library for creating modern graph visualizations and editors, covering installation, basic FlowView usage, data handling, interactivity callbacks, advanced FlowEditor features, custom nodes, and real‑world case examples.
This article reviews the most common conditional rendering approaches in React—including if‑else, ternary operators, logical AND, nullish coalescing, switch statements, strategy patterns, ErrorBoundary, higher‑order components, and render props—explaining their usage, advantages, code examples, and best‑practice cautions.
The article compares React's controlled and uncontrolled form patterns, explains how modern hook‑based techniques—such as useForm, Context, and react‑hook‑form—streamline state management, improve performance, and simplify validation, illustrated by the evolution from antd3’s HOC approach to antd4’s Context‑driven architecture.
This article walks through setting up and debugging a CORS‑handling proxy in a React 18 project with create‑react‑app, using http‑proxy‑middleware to forward /api requests, configure logging, and verify the real request paths.
This article explains the three key differences between using a custom React component as a JSX element versus calling it as a plain function, covering extra Fiber node creation, distinct execution timing, and how the diff algorithm treats the resulting nodes.
This article explores how AI agents, particularly those built with LangChain, can enhance Text2SQL performance by decomposing queries, leveraging tools, memory, and planning, and provides practical code examples and future directions for developers.
This article explains the concepts, use‑cases, and performance trade‑offs of controlled versus uncontrolled forms in React, demonstrates how Ant Design 3 and 4 implement form handling with HOC or Context + hooks, and introduces the lightweight, non‑controlled approach of react‑hook‑form with practical code examples.
This article examines the history, design motivations, and trade‑offs of modern frontend frameworks—covering Svelte’s new runes feature, the rise of component‑based architectures, template abstraction, cross‑platform compilation, and the differing philosophies of React, Vue, and Svelte—to explain why added complexity ultimately improves developer productivity and code maintainability.
This article explains how a single Form instance centrally manages form data, uses subscription and notification mechanisms to update components, and demonstrates the Observer and Singleton design patterns with concrete React code examples for building efficient, maintainable frontend forms.
Taro is a cross‑platform development framework that lets developers write a single codebase using React‑like syntax to compile mini‑programs, H5 pages, and mobile apps, handling API differences, UI component translation, and performance optimizations such as prerendering.
Homebox is an open‑source inventory and organization system for home users, built with React and Node.js, that can be quickly tried online or deployed locally via Docker Compose using a few simple commands and a GitHub repository.
This guide explains how to package a Laravel‑based PHP application into a standalone desktop app using NativePHP and Electron, covering installation, development workflow, adding native features like notifications, and creating production builds for Windows, macOS, and Linux.
This article explains how to create custom Ant Design select components that display additional information via integrated tables, covering form implementation, basic and advanced versions with infinite scrolling, handling Ant Design bugs, and documenting the components using Dumi, complete with code examples.
This article explains the overall architecture of Chrome extensions, how to create popup, DevTools, and content scripts using React or Vue, configure manifest.json, set up multi‑entry Webpack builds, debug each component, and perform end‑to‑end testing with Puppeteer and Xvfb for CI environments.
The article traces the historical evolution of front‑end frameworks—from static pages and jQuery to modern component‑based libraries like React, Vue, and Svelte—explaining why added complexity and compile‑time features such as Svelte’s runes improve maintainability, reactivity, and cross‑platform capabilities while weighing each framework’s design philosophy and trade‑offs for developers.
This article explains the origins of React Server Components, how Next.js v14 integrates RSC and App Router, the three release channels (Latest, Canary, Experimental), and provides step‑by‑step guidance for using RSC both inside and outside of Next.js with code examples and webpack configuration.
This article explains how DataWind’s frontend team replaced the outdated Dva‑based data flow with a new Redux‑plus‑hook solution called HookStore, detailing the pain points of complex initialization, legacy async syntax, tight module coupling, and showing migration steps, code examples, and benefits such as multi‑instance support and OpenAPI decoupling.
This article discusses the difficulty of locating source code in a massive React component library and evaluates three solutions—Chrome React Developer Tools, other Chrome plugins, and the react-dev-inspector npm package—providing installation steps, code integration details, advantages, and drawbacks.
This article explains how the Titian component library uses Design Tokens to abstract visual attributes like color, typography, spacing, and shadow, allowing seamless theme customization, global and component-level styling, dark mode support, and multi‑framework integration for consistent front‑end development.
This article details the evolution of Ctrip's flight IVR system from a simple Chinese‑only version to a multilingual, fully visualized low‑code platform, describing its architecture, core components such as data definition, rule and script engines, version management, and the underlying Node.js and React technologies.
This article details the design evolution and performance optimization of Vivo's Agile BI cross‑tab component—from a jQuery prototype to a React‑based solution—highlighting worker‑offloaded preprocessing, virtual scrolling, and micro‑frontend integration that enable sub‑second rendering of massive data sets and match or surpass competing BI tools.
This article explains the core principles of virtual scrolling and provides complete React implementations for three types of virtual lists—fixed‑height, variable‑height, and dynamic‑height—using react-window, including detailed code snippets, performance considerations, and optimization suggestions.
This article explains how to build three kinds of virtual scrolling lists—fixed‑height, variable‑height, and dynamic‑height—using React‑Window, covering core principles, detailed implementation code, performance considerations, and practical tips for handling irregular item sizes.
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 how to display loading and error states in React by passing Promise objects through props, context, or state libraries, leveraging Suspense, ErrorBoundary, and custom hooks such as usePromise and use to simplify asynchronous UI patterns while avoiding unnecessary re‑renders and side‑effects.
Unlike Taro 1/2, which compiles React code into native mini‑program files through a complex Babel‑based pipeline, Taro 3 runs the original React source at runtime by injecting a lightweight simulated DOM/BOM layer, simplifying development but adding a performance‑overhead that is mitigated with pre‑rendering and virtual lists.
This article walks developers through creating a cross‑framework UI button demo using OpenTiny, covering project initialization, framework‑specific adapters for Vue, React, and Solid, and explaining the renderless architecture that enables seamless component reuse across multiple front‑end stacks.
This article introduces React Grid Layout, explains how to install and configure it, and provides detailed implementations of responsive breakpoint layouts, grid positioning, component rendering, drag‑and‑drop handling, and resizing logic, complete with code examples and performance considerations.
This article explains how to build a customizable Tabs component with a sticky header, click‑to‑scroll navigation, and collapsible content sections using React, CSS position:sticky, IntersectionObserver, and JavaScript, providing complete code examples and compatibility notes for modern web and mobile applications.
This article analyzes the limitations of native navigation bars on mobile pages, proposes a reusable H5 navigation‑bar component (@pango/navigation-bar) with performance, cost, and user‑experience benefits, details its architecture, configuration, code usage, exception handling, and adaptation for foldable screens, and outlines the open‑source plan.
Explore essential React design patterns—including component composition, uncontrolled composite components, and render props—through detailed explanations, practical code examples, and best practices that improve maintainability, scalability, and developer experience in modern frontend development.
Airbnb boosted page performance by implementing HTTP streaming with an early‑flush strategy that sends the head chunk first, allowing browsers to start loading CSS and JavaScript while the server fetches data, cutting First Contentful Paint by roughly 100 ms despite challenges like tag handling, buffering, and latency.
Next.js 13.5, the latest version of Vercel’s React‑based full‑stack framework, introduces significant performance improvements, new middleware capabilities, enhanced image handling, and expanded documentation, while supporting edge runtime, IPv6, and experimental features, positioning it as a leading tool for modern web development.
This article walks through implementing React Server Components (RSC) from the ground up, covering basic file‑serving with PHP, migrating to Node.js with JSX, adding component, routing, async support, and client‑side state persistence, while contrasting RSC with traditional MVC approaches.
This article describes the design, implementation, and benefits of a low‑intrusion micro‑module framework that enables cross‑stack code reuse, dynamic loading, fast deployment, and robust monitoring for large‑scale front‑end applications, while addressing challenges such as React version compatibility and incremental packaging.
This article introduces nine widely used front-end admin dashboard templates—ranging from Bootstrap‑based solutions to Vue, React, and Angular frameworks—highlighting their key features, GitHub star counts, and demo screenshots to help developers choose the most suitable tool for their projects.
This article shares a comprehensive guide on front‑end project organization, directory conventions, coding standards, state‑management patterns, request abstraction, local storage handling, CSS modularization, Immer usage, npm private registry setup, template creation, CLI scaffolding, git workflow, and documentation practices, illustrated with practical TypeScript/React code examples.
This article explains how to use HTTP Server-Sent Events (SSE) as an alternative to WebSocket for one‑way data push, demonstrating a NestJS backend implementation with @Sse decorator and Observable streams, and a React frontend using EventSource to receive real‑time JSON messages, including handling logs and binary data.
This guide explains how to containerize a React front‑end application using Docker, set up CI/CD pipelines with GitHub Actions, optimize builds with pnpm caching and buildx for multi‑architecture images, inject environment variables, and deploy the resulting container to Kubernetes.
This article details how Guming's frontend team evolved from simple page‑per‑work‑order implementations to a high‑performance, low‑code Formily ecosystem, covering the technical stack, form configuration platform, custom expression parser, and future visual builder for dynamic business workflows.
DripTable is an open‑source, React‑based enterprise table visualization tool that uses JSON Schema for low‑code, configurable, and extensible dynamic list pages, offering fast development, theming flexibility, and a visual schema generator for backend CMS and low‑code table scenarios.
This guide walks through creating a React Todo List app with Rematch, showing how to define typed models, initialize a Redux‑compatible store, provide it via React‑Redux, and use useSelector and typed useDispatch in components, highlighting Rematch’s concise syntax and similarity to Redux‑Toolkit.
This article explains how React relies on shallow comparison of immutable data to trigger re‑renders, demonstrates common pitfalls when mutating state directly, and shows how using Immer provides a concise, copy‑on‑write solution that reduces bugs, memory usage, and CPU overhead.
This article presents a comprehensive approach to automatically generate front‑end code from visual design drafts by introducing a customizable code‑generator workflow, detailing UIDL‑based intermediate representation, plugin‑based architecture, template‑driven development, platform optimizations, and real‑world deployment results, while also outlining future AI‑assisted enhancements.
This article demonstrates how to replace classic Redux boilerplate with Redux Toolkit in a React Todo List app by creating a slice, configuring the store, providing it via Provider, and using useSelector and useDispatch, highlighting the simplified setup and clearer state management for both React and React Native.
This article explains how to apply Clean Architecture principles to a frontend React/TypeScript project, covering the three‑layer structure, dependency rules, domain modeling, use‑case design, adapter implementation, code organization, trade‑offs, and practical tips for building a cookie‑store example.
This tutorial explains the fundamentals of the browser History API—including length, back, forward, go, pushState, replaceState, and scrollRestoration—demonstrates their behavior with visual examples, and then shows step‑by‑step how React Router leverages these APIs to match routes, render components, and handle navigation events such as popstate.
This guide walks through creating a React Todo List app with Redux by installing the libraries, defining TypeScript state and actions for adding and deleting items, implementing an immutable reducer, configuring a store, wrapping the root with Provider, and connecting UI components to dispatch and display the todo array, illustrating the full Redux workflow and its debugging advantages.
This article compiles essential JavaScript coding tricks, explains how to correctly use async functions within React’s useEffect, outlines the full spectrum of front‑end infrastructure technologies, and shares a practical jsPDF PDF‑export tutorial along with an interview about Evan You’s life beyond code.
This article explains why fields registered with rc-form may persist and continue to run validation when using functional custom components, analyzes the internal mechanisms of getFieldMeta, clearField, and saveRef, and shows that adding forwardRef support resolves the disappearance and validation issues.
This guide walks you through understanding blockchain contracts, setting up a React‑Vite‑Tailwind front‑end, installing ethers and Hardhat, writing and testing a Solidity contract, configuring Hardhat, deploying to Goerli via Alchemy, and integrating the contract with a React application.
This article details how to integrate Gaode (AMap) maps into a React frontend, covering script and npm imports, reusable map hooks, responsive marker info windows, event handling strategies, rendering abstractions for various map entities, and addressing common pitfalls such as marker overlap, bubble penetration, and memory leaks.
This article presents a complete tutorial for implementing a near‑instant (second‑level) rollback mechanism for single‑page front‑end applications, covering the underlying idea, project setup with Vite and React, history recording, a lightweight Node server, and a petite‑Vue visual interface for selecting and applying previous builds.
This article explains the fundamentals of JSX, why JSX expressions must have a single root element, and provides a step‑by‑step guide with complete code to implement a minimal JSX parser that translates JSX syntax into plain JavaScript createElement calls.
This article describes a web‑based custom report export platform that lets users edit PPT templates with text, images, and charts, synchronizes changes via DVA state management, and generates fully populated PPTX reports in minutes using PptxGenJS and GraphQL data integration.
This article introduces DripTable, a JD‑open‑source, React‑based enterprise table framework that uses JSON Schema for low‑code configuration, outlines its features, advantages, usage scenarios, and provides step‑by‑step installation and code examples for both the visual configuration side and the runtime side.
This article details Tubi's comprehensive migration from Enzyme to React Testing Library, covering the motivations, testing philosophy shifts, custom codemods, lint enforcement, progress tracking scripts, implementation examples, and the overall cost, timeline, and lessons learned from converting over 440 test files and 100k lines of code.
React 18 introduces concurrent rendering, transitions, Suspense, and Server Components, which together reduce long tasks, lower total blocking time, and improve user interaction by allowing non‑urgent updates to run in the background, ultimately delivering smoother, more responsive web applications.
This article explores how large AI models can act as autonomous agents equipped with tools, demonstrates practical LangChain examples for remote server queries and RSS parsing, explains the ReAct reasoning‑acting loop, and shows how decorators and object‑oriented patterns enable seamless AI‑driven programming.
This article explores how WebAssembly can break the speed limits of JavaScript by compiling both framework and business logic into WebAssembly, describes the design of the ByteReact front‑end framework, its custom Bytets compiler that turns TypeScript into WebAssembly, and presents performance measurements showing up to three‑fold speed gains for compute‑heavy UI tasks.
This article introduces ten open-source front‑end low‑code platforms—including GoView, vlife, JeecgBoot, maku‑generator, MtBird, Luban H5, Seezoon Stack, Variant Form, ng‑form, and h5‑factory—detailing their main features, technology stacks, and where to obtain their source code.
This article explains how to create gradient iconfonts by using CSS background‑clip:text (with transparent text) and optionally mix‑blend-mode:darken, demonstrates a reusable React component that applies gradient backgrounds via style props, and shows graceful degradation with @supports queries for browsers lacking background‑clip support.
DripTable is an open‑source, React‑based enterprise table solution that uses JSON Schema for low‑code configuration, offering fast, configurable, and extensible dynamic list rendering with visual generators and easy integration for backend and frontend developers.
This article explains the concept of streaming (incremental) rendering introduced in React 18, demonstrates how to apply it in Next.js and Remix using server components and Suspense, and walks through a custom SSR setup that leverages renderToPipeableStream and the upcoming use hook for seamless data fetching.
This article introduces Chakra UI, explains its core features, advantages, installation steps, and key components—including layout, media, navigation, and form elements—while also covering its drawbacks and providing practical React code examples for developers seeking a fast, accessible UI solution.
This tutorial shows how to build a simple 2D platformer using the Alice.js H5 engine combined with React, covering scene construction with JSX components, camera scrolling, UI layering, PixiJS element types, animation formats, flex layout, keyframe hooks, event scripting, and debugging tools.
The article outlines common pain points of Ant Design—style resetting, difficult bug fixes, and heavy legacy constraints—and explains how headless UI libraries like radix‑ui and shadcn/ui provide a more flexible, lightweight, and customizable alternative for modern React front‑end development.
This article explains how to write reusable frontend code by identifying and separating reusable parts such as UI components, API calls, business workflows, shared data, and utility functions, illustrating each with React and Vue examples, code snippets, and best‑practice recommendations.
This article explains how React's useMemo hook caches expensive calculations, covers its default shallow reference comparison, and shows techniques such as JSON.stringify and lodash.isEqual for deep comparison to prevent unnecessary re‑renders.
This article explores the evolution of React’s APIs—from early mixins to higher‑order components, render props, and Hooks—examining the mental models, trade‑offs, and best practices that guide developers in building maintainable, performant front‑end applications.
This article describes a cross‑platform solution that enables a single set of Web component code to be shared across Native, React Native, and mini‑program environments by leveraging Web Components, environment‑aware builds, and bridge communication, thereby reducing development effort and accelerating release cycles.
The ECMAScript 2023 specification introduces four new non‑mutating Array methods—toSorted, toReversed, toSpliced, and with—that let developers work on copies of arrays, improving predictability, easing React state updates, and providing consistent behavior across browsers and runtimes.
Umi, an extensible enterprise‑grade frontend framework from Ant Group, offers out‑of‑the‑box routing, plugin lifecycle, dual build engines, and best‑practice integrations, with detailed quick‑start instructions and a chart example that demonstrate its capability to serve thousands of diverse applications.
The article presents a cloud‑music social live‑streaming game solution that selects PixiJS over DOM for superior performance, identifies inefficiencies in React‑DOM coupling, and introduces the custom Alice.js framework—bridging React DSL with PixiJS, extending game components, and managing resources—to streamline front‑end game scene development.
This article analyses the conceptual design, possible implementation, and performance advantages of a new React Hook that can be called inside control flow, discusses its future extensions such as usePromise, lazy subscription, and integration with concurrent mode, and provides practical code examples.
