0 views collected around this technical thread.
This article explains why using :key="index" in Vue v-for loops is problematic, describes the virtual DOM compilation process, demonstrates the diff algorithm with examples, and provides best practices for key usage to improve rendering performance.
This article explores seven essential React concepts—including component lifecycle, advanced Hooks, virtual DOM, state management with Context and Redux, Refs, prop‑drilling solutions, and the new Suspense and Concurrent Mode—to help developers boost performance, scalability, and expertise.
This article explains the concept of the Virtual DOM, its performance benefits in front‑end development, and presents several open‑source implementations such as Million.js, Snabbdom, virtual‑dom, blockdom, Maquette, and additional lightweight libraries, each with brief descriptions and GitHub links.
From jQuery’s imperative DOM hacks to React’s virtual‑DOM abstraction and now to compile‑time, no‑virtual‑DOM frameworks like Svelte and Solid, the front‑end has shifted toward declarative UI, fine‑grained reactivity, and performance‑focused optimizations, while virtual‑DOM remains widely used but increasingly challenged.
This article provides an in‑depth overview of React class component lifecycles before and after version 16, the new lifecycle methods, virtual DOM and diff algorithm, asynchronous rendering with Fiber, state batching, higher‑order components, render props, and error boundaries, illustrating each concept with code examples.
The article explains Vue’s virtual‑node diff algorithm, detailing depth‑first traversal, head‑tail pointer comparisons, an index‑map for moved nodes, post‑traversal addition/removal handling, and Vue 3’s static‑vnode optimization, showing how these techniques achieve efficient O(n) DOM updates.
The article explains how Vue 2’s diff algorithm uses head‑to‑tail comparisons and a key‑to‑index map to patch, add, or remove nodes, while Vue 3 improves efficiency by building a key‑to‑new‑index map, computing the longest increasing subsequence, and moving only non‑LIS nodes, reducing DOM operations.
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 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 article explains the concept of virtual DOM, its advantages over direct DOM manipulation, details the diff algorithm including same‑layer comparison, pointer techniques, and longest increasing subsequence optimizations in Vue2 and Vue3, and discusses key usage and performance considerations.
This article explains how to build a lightweight virtual DOM library in JavaScript, covering the creation of VNode objects, the patch and diff algorithms, handling of attributes, classes, styles, and events, and demonstrates a step‑by‑step implementation using the Snabbdom approach.
This article explains the React Fiber architecture introduced in React 16, compares it with React 15, details how Fiber nodes form a tree, and walks through the source-level implementation of the Diff algorithm, including single-node and multi-node updates, with code examples and diagrams.
These articles compare how Web, Android, iOS, and Flutter represent UI structures—detailing the DOM and Virtual DOM creation, diffing, and rendering on the Web, and the XML‑based layout inflation, view hierarchy, styling, and drawing pipeline on Android—to help front‑end developers grasp each platform’s tree‑based architecture.
This article explains the concept of virtual DOM, its structure, and how Vue's diff (patch) algorithm works, including detailed code walkthroughs, optimization strategies, key usage, and differences between Vue2 and Vue3 implementations, helping readers fully grasp the underlying principles and performance improvements.
The article examines core design decisions in modern frontend frameworks—immutable tree‑diff versus mutable reactive models, update granularity, virtual‑DOM usage, DSL choices, and the performance trade‑offs illustrated by React, Vue, SolidJS and Svelte, while also exploring component portability via WebComponents.
The article thoroughly explains Vue.js’s virtual‑DOM diff algorithm, detailing its depth‑first traversal, same‑level node comparison, the sameVnode key/selector check, index map creation, O(n) head‑tail and index‑based matching loops, Vue 3 static‑type optimizations, and a practical implementation for array change detection.
This article provides a comprehensive technical analysis of the diff algorithm and Virtual DOM, detailing their core principles, O(n) complexity optimizations, and practical implementations across Vue 2.x, Vue 3.x, React, and the Snabbdom library.
This article explains what the Virtual DOM is, why it improves performance, how React implements it through ReactElements and Fiber, and details the diff algorithm and reconciliation process that enable efficient UI updates in modern frontend development.
This article explains React server-side rendering (SSR), covering the differences between client-side rendering (CSR) and SSR, their advantages and disadvantages, and provides a step-by-step guide to implementing a simple SSR demo with React.
This article provides a detailed walkthrough of Vue.js’s internal vm._update method, its reliance on the core __patch__ function, and the surrounding lifecycle mechanisms, illustrating each step with source code excerpts and diagrams to clarify how virtual DOM nodes are transformed into real DOM elements.