Designing a Virtual DOM from Scratch: A Step-by-Step Guide

If you’ve heard of front-end libraries like React or Vue, you may have come across the term Virtual DOM. The Virtual DOM is a clever concept that helps speed up web development by making DOM updates more efficient.

In this guide, we’ll break down how you can implement a simple Virtual DOM from scratch using generic code-like steps.

What is the Virtual DOM?

The Virtual DOM is just a lightweight, in-memory representation of the real DOM (the structure of a web page). Instead of directly updating the real DOM (which is slow), we first make changes to the Virtual DOM, figure out what has changed, and then update only the parts of the real DOM that need to be updated. This saves time and makes your app faster!

Step 1: Representing the Virtual DOM as a Tree

Imagine the structure of a web page as a tree, where each element (like <div>, <p>, or <h1>) is a "node" in the tree. A Virtual DOM Node is a small object that represents one of these elements.

Here’s an example:

Virtual DOM Node:
{
  type: 'div',
  props: { id: 'container' },  // attributes like id, class, etc.
  children: [                 // children inside this element
    {
      type: 'p',              // a <p> tag (paragraph)
      props: {},
      children: ['Hello, world!']  // text inside the <p> tag
    }
  ]
}

This describes a <div> element with an id="container", which contains a <p> element with the text "Hello, world!".

Key Points:

• Each node has a type (e.g., div, p).
• It can have props (like id, class, etc.).
• It also has children which could be other elements or text.

Step 2: Rendering the Virtual DOM to the Real DOM

Now that we have a Virtual DOM, we need a way to turn it into real HTML on the page.

Let’s write a function called render that takes in a Virtual DOM node and converts it to an actual HTML element.

function render(vNode) {
  // 1. Create a real element based on the Virtual DOM type (e.g., div, p).
  const element = document.createElement(vNode.type);

  // 2. Apply any attributes (props) like id, class, etc.
  for (const [key, value] of Object.entries(vNode.props)) {
    element.setAttribute(key, value);
  }

  // 3. Process the children of this Virtual DOM node.
  vNode.children.forEach(child => {
    if (typeof child === 'string') {
      // If the child is just text, create a text node.
      element.appendChild(document.createTextNode(child));
    } else {
      // If the child is another Virtual DOM node, recursively render it.
      element.appendChild(render(child));
    }
  });

  return element;  // Return the real DOM element.
}

What Happens Here?

• We create an element (document.createElement(vNode.type)).
• We add any attributes (like id, class, etc.).
• We handle children (text or other elements) by either adding text or calling render again on each child element.

Step 3: Comparing (Diffing) the Old and New Virtual DOM

When something changes in our web app (like the text or an element’s style), we create a new Virtual DOM. But before we update the real DOM, we need to compare the old Virtual DOM and the new Virtual DOM to figure out what has changed. This is called "diffing".

Let’s create a function that compares the two Virtual DOMs:

function diff(oldVNode, newVNode) {
  // If the node type has changed (e.g., from 'div' to 'p'), replace the node.
  if (oldVNode.type !== newVNode.type) {
    return { type: 'REPLACE', newVNode };
  }

  // If the text inside has changed, we need to update the text.
  if (typeof oldVNode === 'string' && oldVNode !== newVNode) {
    return { type: 'TEXT', newVNode };
  }

  // Compare the properties (like id, class, etc.).
  const propPatches = diffProps(oldVNode.props, newVNode.props);

  // Compare the children.
  const childPatches = diffChildren(oldVNode.children, newVNode.children);

  return { type: 'UPDATE', propPatches, childPatches };
}

How the Diffing Works:

• Node Type Changes: If the type of element changes (like changing a <div> to a <p>), we mark it for replacement.
• Text Changes: If the text inside changes, we update the text.
• Attributes & Children: We check if any attributes (props) or children of the element have changed.

Step 4: Patching the Real DOM

Once we know what has changed, we need to apply those changes to the real DOM. We call this process patching.

Here’s how the patching function might look:

function patch(parent, patches, index = 0) {
  if (!patches) return;  // If there are no changes, do nothing.

  const element = parent.childNodes[index];  // The element we’re patching.

  switch (patches.type) {
    case 'REPLACE':
      // Replace the old element with a new one.
      parent.replaceChild(render(patches.newVNode), element);
      break;

    case 'TEXT':
      // Update the text content of the element.
      element.textContent = patches.newVNode;
      break;

    case 'UPDATE':
      // Update the element’s properties and children.
      patchProps(element, patches.propPatches);
      patches.childPatches.forEach((childPatch, i) => patch(element, childPatch, i));
      break;
  }
}

Key Operations:

• REPLACE: Completely replace one element with another.
• TEXT: Update the text inside an element.
• UPDATE: Update attributes and children based on the changes.

Summary of the Virtual DOM Process:

1. Virtual DOM Tree: We create a tree-like structure that represents the elements and their hierarchy on a web page.
2. Render to Real DOM: This Virtual DOM is converted into real HTML elements and placed on the page.
3. Diffing Algorithm: When something changes, we compare the old Virtual DOM with the new one to find the differences.
4. Patch the Real DOM: Apply those changes to the real DOM in the most efficient way possible.

Final Thoughts

The Virtual DOM is a powerful tool that makes updating the user interface faster by reducing unnecessary changes to the real DOM. By implementing a Virtual DOM, we can optimize the way web apps update and render elements, leading to faster and smoother user experiences.

This is a basic implementation of the Virtual DOM concept, but you’ve now got the foundation to understand how frameworks like React make use of it!