Building a Custom Virtual DOM Implementation in JavaScript
  1. JavaScript

Building a Custom Virtual DOM Implementation in JavaScript

Written by Posted on Less than 0 min read

The web has come a long way since its inception, and with the advancements in technology, web applications have become more complex, making it challenging to create responsive, interactive, and fast web applications. This is where the virtual DOM comes in.

The virtual DOM is an essential concept in modern web development, which provides a way to create dynamic, performant, and scalable web applications. It is a lightweight copy of the actual DOM, which is a hierarchical representation of the HTML document. By creating a virtual DOM, we can manipulate the content of our web application without interacting with the actual DOM, making it faster and more efficient.

In this blog post, we will be building a custom virtual DOM implementation in JavaScript. We will cover the basic concepts of the virtual DOM, including how it works and its benefits. We will then walk you through each step of building a custom virtual DOM implementation, including creating the virtual DOM, rendering it, and updating it. By the end of this blog post, you will have a solid understanding of the virtual DOM and how it works. Let’s get started!

 

Setting up the project

Before we start building our custom virtual DOM, we need to set up our project. Here are the steps to set up our project:

  1. Create a new directory for your project.
  2. Open the directory in your code editor.
  3. Create a new HTML file (index.html) and a new JavaScript file (index.js) in the directory.
  4. Link the JavaScript file to the HTML file using a script tag.
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Virtual DOM</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>
  1. Create a simple HTML structure inside the div element for testing purposes.
<div id="app">
  <h1>Hello, world!</h1>
  <p>This is a simple test.</p>
</div>
  1. Open the JavaScript file and add a console log statement to verify that the file is linked to the HTML file properly.
console.log("Hello from index.js!");
  1. Open the HTML file in your web browser and verify that the console log statement is displayed in the browser console.

Now that we have set up our project, we can move on to building our custom virtual DOM.

 

Creating the virtual DOM

The first step in building a custom virtual DOM is to create the virtual DOM itself. In this step, we will define the functions that will create the virtual nodes, which we will use to build our virtual DOM. Here are the steps to create the virtual DOM:

  1. Create a function called createElement that will create a virtual node for an HTML element. This function will take in two arguments: the type of the HTML element and an object containing its attributes.
function createElement(type, props) {
  return {
    type,
    props,
  };
}
  1. Create a function called createTextElement that will create a virtual node for a text element. This function will take in a string as its only argument.
function createTextElement(text) {
  return {
    type: "TEXT_ELEMENT",
    props: {
      nodeValue: text,
      children: [],
    },
  };
}
  1. Create a function called createVirtualNode that will create a virtual node based on the type of the element passed to it. This function will call either createElement or createTextElement depending on the type of the element.
function createVirtualNode(type, props, ...children) {
  if (typeof type === "function") {
    return type(props);
  } else if (typeof type === "string") {
    return createElement(type, props, ...children);
  } else {
    throw new Error(`Invalid virtual node type: ${type}.`);
  }
}
  1. Create a function called createVirtualDOM that will create a virtual DOM tree based on the elements passed to it. This function will take in an array of elements and return a virtual DOM tree.
function createVirtualDOM(elements) {
  const virtualNodes = elements.map((element) => {
    return createVirtualNode(
      element.type,
      element.props,
      ...(element.children || []).map(createVirtualNode)
    );
  });

  return {
    type: "ROOT",
    props: {
      children: virtualNodes,
    },
  };
}

Now we have created the functions necessary to create a virtual DOM. In the next step, we will render the virtual DOM to the actual DOM.

 

Rendering the virtual DOM

Now that we have created the virtual DOM, the next step is to render it to the actual DOM. In this step, we will define the function that will take the virtual DOM tree and render it to the actual DOM. Here are the steps to render the virtual DOM:

  1. Create a function called render that will take in a virtual node and a container element and render the virtual node to the container element. This function will create a DOM node based on the type of the virtual node and its attributes, and then append the children of the virtual node to it.
function render(virtualNode, container) {
  const element = virtualNode.type === "TEXT_ELEMENT"
    ? document.createTextNode("")
    : document.createElement(virtualNode.type);

  updateAttributes(element, virtualNode.props);

  virtualNode.props.children.forEach(child => render(child, element));

  container.appendChild(element);
}
  1. Create a function called updateAttributes that will take in a DOM element and an object containing the attributes of the virtual node, and update the attributes of the DOM element accordingly.
function updateAttributes(element, attributes) {
  Object.keys(attributes).forEach(name => {
    if (name === "children") {
      return;
    }

    if (name.startsWith("on")) {
      const eventName = name.slice(2).toLowerCase();
      element.addEventListener(eventName, attributes[name]);
    } else {
      element.setAttribute(name, attributes[name]);
    }
  });
}
  1. Update the createTextElement function to use the text node value instead of the nodeValue property of the props object. This will make it consistent with the way we create text nodes in the render function.
function createTextElement(text) {
  return {
    type: "TEXT_ELEMENT",
    props: {
      children: [],
      text,
    },
  };
}

Now that we have defined the render function, we can use it to render our virtual DOM tree to the actual DOM. In the next step, we will update the virtual DOM based on changes to the data.

 

Updating the virtual DOM

The final step in building a custom virtual DOM is to update the virtual DOM based on changes to the data. In this step, we will define the function that will take in the new data and update the virtual DOM accordingly. Here are the steps to update the virtual DOM:

  1. Create a function called updateVirtualNode that will update a virtual node based on its type and attributes. This function will take in a virtual node and an object containing the new attributes, and update the attributes of the virtual node accordingly.
function updateVirtualNode(virtualNode, newProps) {
  virtualNode.props = {
    ...virtualNode.props,
    ...newProps,
  };

  return virtualNode;
}
  1. Create a function called updateVirtualDOM that will update a virtual DOM tree based on the changes to the data. This function will take in the new data and the old virtual DOM tree, and return a new virtual DOM tree with the changes applied.
function updateVirtualDOM(data, virtualDOM) {
  const newVirtualNodes = data.map((item) => {
    return createVirtualNode(item.type, item.props, ...item.children);
  });

  const patches = diff(virtualDOM, newVirtualNodes);

  patches.forEach((patch) => {
    patch.domNode = patch.parent.domNode.childNodes[patch.index];
  });

  patches.forEach((patch) => {
    switch (patch.type) {
      case PATCH_TYPES.REPLACE:
        patch.parent.domNode.replaceChild(render(patch.newNode), patch.domNode);
        break;
      case PATCH_TYPES.REORDER:
        patch.parent.domNode.insertBefore(patch.domNode, patch.domNode2);
        break;
      case PATCH_TYPES.PROPS:
        updateAttributes(patch.domNode, patch.props);
        break;
      case PATCH_TYPES.TEXT:
        patch.domNode.textContent = patch.newValue;
        break;
      default:
        break;
    }
  });

  return newVirtualNodes;
}
  1. Create an enumeration called PATCH_TYPES that will contain the different types of patches that can be applied to a virtual node.
const PATCH_TYPES = {
  REPLACE: "REPLACE",
  REORDER: "REORDER",
  PROPS: "PROPS",
  TEXT: "TEXT",
};
  1. Create a function called diff that will compare two virtual DOM trees and return an array of patches that can be applied to the old virtual DOM tree to update it to the new virtual DOM tree. This function will use a diffing algorithm to determine which patches to apply.
function diff(oldVirtualNode, newVirtualNode) {
  const patches = [];
  const index = { value: 0 };

  diffVirtualNodes(oldVirtualNode, newVirtualNode, patches, index);

  return patches;
}
  1. Create a function called diffVirtualNodes that will compare two virtual nodes and generate patches based on the differences between them. This function will take in two virtual nodes, an array of patches, and an index that represents the current index of the virtual nodes in the DOM tree.
function diffVirtualNodes(oldVirtualNode, newVirtualNode, patches, index) {
  if (oldVirtualNode === newVirtualNode) {
    return;
  }

  if (!newVirtualNode) {
    patches.push({
      type: PATCH_TYPES.REPLACE,
      parentNode: getParent(oldVirtualNode),
      index: index.value,
      newNode: null,
    });

    return;
  }

  if (oldVirtualNode.type !== newVirtualNode.type) {
    patches.push({
      type: PATCH_TYPES.REPLACE,
      parentNode: getParent(oldVirtualNode),
      index: index.value,
      newNode: newVirtualNode,
    });

    return;
  }

  if (typeof oldVirtualNode.type === 'string') {
    diffAttributes(oldVirtualNode.props, newVirtualNode.props, patches, oldVirtualNode.domNode);
    diffChildren(oldVirtualNode.children, newVirtualNode.children, patches, index);
  } else if (typeof oldVirtualNode.type === 'function') {
    const oldState = oldVirtualNode.instance.state;
    const oldProps = oldVirtualNode.instance.props;
    const newState = { ...oldState, ...newVirtualNode.props.state };
    const newProps = { ...oldProps, ...newVirtualNode.props };
    const shouldUpdate = oldVirtualNode.instance.shouldComponentUpdate(newProps, newState);

    if (shouldUpdate) {
      const prevInstance = oldVirtualNode.instance;
      const nextInstance = new oldVirtualNode.type(newProps, newState);
      const childElement = nextInstance.render();

      const domNode = prevInstance.domNode;
      const parentNode = getParent(oldVirtualNode);
      patches.push({
        type: PATCH_TYPES.REPLACE,
        parentNode,
        index: index.value,
        newNode: render(childElement),
      });
    } else {
      newVirtualNode.instance = oldVirtualNode.instance;
      newVirtualNode.domNode = oldVirtualNode.domNode;

      newVirtualNode.instance.props = newProps;
      newVirtualNode.instance.state = newState;

      diffChildren(oldVirtualNode.children, newVirtualNode.instance.render().children, patches, index);
    }
  } else {
    newVirtualNode.instance = oldVirtualNode.instance;
    newVirtualNode.domNode = oldVirtualNode.domNode;

    diffChildren(oldVirtualNode.children, newVirtualNode.instance.render().children, patches, index);
  }

  index.value++;
}
  1. Create a function called `diffAttributes` that will compare the attributes of two virtual nodes and generate patches based on the differences between them. This function will take in the old attributes, new attributes, an array of patches, and the DOM node that the virtual nodes represent.
function diffAttributes(oldAttributes, newAttributes, patches, domNode) {
  const attributes = { ...oldAttributes, ...newAttributes };

  for (const [key, value] of Object.entries(attributes)) {
    if (oldAttributes[key] === newAttributes[key]) {
      continue;
    }

    patches.push({
      type: PATCH_TYPES.PROPS,
      domNode,
      props: {
        [key]: value,
      },
    });
  }
}
  1. Create a function called diffChildren that will compare the children of two virtual nodes and generate patches based on the differences between them. This function will take in the old children, new children, an array of patches, and the index that represents the current index of the virtual nodes in the DOM tree.
function diffChildren(oldChildren, newChildren, patches, index) {
  const oldChildNodes = oldChildren.map((child) => child.domNode);

  newChildren.forEach((newChild, i) => {
    const oldChild = oldChildren[i];

    if (oldChild && newChild) {
      diffVirtualNodes(oldChild, newChild, patches, index);
    } else if (newChild) {
      patches.push({
        type: PATCH_TYPES.REORDER,
        parentNode: getParent(oldChild),
        domNode: render(newChild),
        index: index.value,
      });
    }
  });

  oldChildren.forEach((oldChild, i) => {
    if (!newChildren[i]) {
      patches.push({
        type: PATCH_TYPES.REORDER,
        parentNode: getParent(oldChild),
        index: index.value,
        domNode2: oldChild.domNode,
      });
    }
 });
}
  1. Finally, create a function called `patch` that will take in the patches generated by the `diffVirtualNodes` function and apply them to the actual DOM tree.
function patch(parentNode, patches) {
  patches.forEach((patch) => {
    switch (patch.type) {
      case PATCH_TYPES.PROPS:
        setAttributes(patch.domNode, patch.props);
        break;
      case PATCH_TYPES.REPLACE:
        replaceNode(patch.parentNode, patch.newNode, patch.index);
        break;
      case PATCH_TYPES.REORDER:
        reorderChildren(patch.parentNode, patch.domNode, patch.index, patch.domNode2);
        break;
    }
  });
}

function setAttributes(domNode, props) {
  for (const [key, value] of Object.entries(props)) {
    if (value === false) {
      domNode.removeAttribute(key);
    } else {
      domNode.setAttribute(key, value);
    }
  }
}

function replaceNode(parentNode, newNode, index) {
  parentNode.replaceChild(newNode, parentNode.childNodes[index]);
}

function reorderChildren(parentNode, domNode, index, domNode2) {
  if (domNode2) {
    parentNode.insertBefore(domNode, domNode2);
  } else {
    parentNode.appendChild(domNode);
  }
}

With these functions, we have a functioning custom virtual DOM implementation in JavaScript!

Here is the full JavaScript code for a custom virtual DOM implementation that we have covered in this blog post:

const VIRTUAL_NODE_TYPES = {
  ELEMENT: "ELEMENT",
  TEXT: "TEXT",
};

const PATCH_TYPES = {
  PROPS: "PROPS",
  REPLACE: "REPLACE",
  REORDER: "REORDER",
};

let currentNodeIndex = 0;

function createElement(type, props, children) {
  return {
    type,
    props: props || {},
    children: children || [],
  };
}

function createTextElement(text) {
  return {
    type: VIRTUAL_NODE_TYPES.TEXT,
    text,
  };
}

function createVirtualNode(node) {
  if (typeof node === "string") {
    return createTextElement(node);
  }
  return createElement(node.type, node.props, node.children.map(createVirtualNode));
}

function diffProps(oldVirtualNode, newVirtualNode) {
  const patches = [];
  const allProps = { ...oldVirtualNode.props, ...newVirtualNode.props };
  for (const [key, value] of Object.entries(allProps)) {
    if (oldVirtualNode.props[key] !== newVirtualNode.props[key]) {
      patches.push({ type: PATCH_TYPES.PROPS, domNode: oldVirtualNode.domNode, props: newVirtualNode.props });
      break;
    }
  }
  return patches;
}

function diffChildren(oldVirtualNode, newVirtualNode) {
  const patches = [];
  const oldChildren = oldVirtualNode.children;
  const newChildren = newVirtualNode.children;

  const minLength = Math.min(oldChildren.length, newChildren.length);
  for (let i = 0; i < minLength; i++) {
    patches.push(...diffVirtualNodes(oldChildren[i], newChildren[i]));
  }

  if (oldChildren.length > newChildren.length) {
    patches.push({ type: PATCH_TYPES.REORDER, parentNode: oldVirtualNode.domNode, domNode: oldChildren[minLength].domNode, index: minLength });
  } else if (oldChildren.length < newChildren.length) {
    for (let i = minLength; i < newChildren.length; i++) {
      const newChildNode = newChildren[i];
      const newNode = createVirtualNode(newChildNode);
      patches.push({ type: PATCH_TYPES.REORDER, parentNode: newVirtualNode.domNode, domNode: newNode.domNode });
    }
  }

  return patches;
}

function diffVirtualNodes(oldVirtualNode, newVirtualNode) {
  const patches = [];

  if (oldVirtualNode === undefined) {
    patches.push({ type: PATCH_TYPES.REORDER, parentNode: undefined, domNode: createVirtualNode(newVirtualNode).domNode });
  } else if (newVirtualNode === undefined) {
    patches.push({ type: PATCH_TYPES.REPLACE, parentNode: oldVirtualNode.parentNode, newNode: undefined, index: currentNodeIndex });
  } else if (oldVirtualNode.type !== newVirtualNode.type) {
    patches.push({ type: PATCH_TYPES.REPLACE, parentNode: oldVirtualNode.parentNode, newNode: createVirtualNode(newVirtualNode).domNode, index: currentNodeIndex });
  } else if (oldVirtualNode.type === VIRTUAL_NODE_TYPES.TEXT && newVirtualNode.type === VIRTUAL_NODE_TYPES.TEXT && oldVirtualNode.text !== newVirtualNode.text) {
    patches.push({ type: PATCH_TYPES.REPLACE, parentNode: oldVirtualNode.parentNode, newNode: createVirtualNode(newVirtualNode).domNode, index: currentNodeIndex });
  } else {
    patches.push(...diffProps(oldVirtualNode, newVirtualNode));
    patches.push(...diffChildren(oldVirtualNode, newVirtualNode));
  }

  return patches;
}

function renderVirtualNode(virtualNode) {
  if (virtualNode === undefined) {
    return;
  }

  if (virtualNode.type === VIRTUAL_NODE_TYPES.ELEMENT) {
    const domNode = document.createElement(virtualNode.type);
    virtualNode.domNode = domNode;

    for (const [prop, value] of Object.entries(virtualNode.props)) {
      if (prop === "className") {
        domNode.className = value;
      } else if (prop === "style") {
        for (const [styleProp, styleValue] of Object.entries(value)) {
          domNode.style[styleProp] = styleValue;
        }
      } else if (prop.startsWith("on")) {
        const eventName = prop.substring(2).toLowerCase();
        domNode.addEventListener(eventName, value);
      } else {
        domNode.setAttribute(prop, value);
      }
    }

    for (const childNode of virtualNode.children) {
      const childDomNode = renderVirtualNode(childNode);
      domNode.appendChild(childDomNode);
    }

    return domNode;
  } else {
    const domNode = document.createTextNode(virtualNode.text);
    virtualNode.domNode = domNode;
    return domNode;
  }
}

 

Conclusion

In this blog post, we have covered the steps for building a custom virtual DOM implementation in JavaScript. We started by setting up the project and creating the virtual DOM data structure. Then, we learned how to render the virtual DOM to the actual DOM tree, and how to update the virtual DOM efficiently by creating a diffing algorithm. We also went through the steps for creating new virtual nodes, and finally, we created functions to apply the patches generated by the diffing algorithm to the actual DOM tree.

Building a custom virtual DOM implementation can be a challenging task, but it is a great way to understand how popular frameworks like React work under the hood. By building a virtual DOM implementation from scratch, we gain a deeper understanding of the underlying concepts and are better equipped to solve performance issues in our own applications.

Hopefully, this blog post has provided you with a good starting point for building your own custom virtual DOM implementation. Happy coding!

More from Voskan

Creating Robust CLI Applications in Go | Go CLI App Development Tutorial | Mastering CLI in Go
  1. Go (Golang)

Mastering CLI Applications in Go (Golang): A Comprehensive Guide to Building, Testing, and Distributing Your Go CLI App

Before we delve into the creation of a Go CLI application, let’s start with the necessary pre-requisites. First and foremost, we need to ensure that we have the latest version of Go installed in our development environment. Additionally, we need to set up a suitable workspace for our Go projects. Installing the Latest Version of […]
Written by
How to Use React Query for Efficient Data Fetching and Caching in Your App
  1. React.js

How to Use React Query for Efficient Data Fetching and Caching in Your App

Explanation of React Query React Query is a powerful JavaScript library that simplifies and optimizes data fetching and caching in React applications. It provides a single, unified API for fetching data from multiple sources, including APIs, databases, and even other queries, and offers an intelligent caching system that helps avoid redundant network requests. React Query […]
Written by
Master React-Table: Create Powerful Data Grids in React - In-Depth Guide
  1. React.js
  2. Redux

Mastering React-Table: A Comprehensive Guide to Building Dynamic Data Grids

React-Table is a lightweight, flexible, and highly customizable library for building powerful data grids in React applications. With its extensive set of features and performance optimizations, React-Table has quickly become one of the go-to solutions for developers looking to create intuitive and feature-rich tables in their web applications. Key Features of React-Table Lightweight and modular: […]
Written by
Node.js Child Processes and Cluster Module
  1. Node.js

Node.js Child Processes and Cluster Module: A Guide to High-Performance Applications

Node.js is a popular open-source JavaScript runtime environment that allows developers to build scalable and high-performance applications. One of the key features of Node.js is its ability to handle multiple tasks concurrently, thanks to its event-driven architecture and non-blocking I/O model. However, in some cases, a single-threaded Node.js application may not be able to handle […]
Written by
Building and Deploying Serverless Applications with Node.js and AWS
  1. Node.js

Node.js and Serverless Architecture: A Complete Guide to Building and Deploying Applications

Serverless architecture is a relatively new concept in the world of web development, and it’s quickly gaining popularity among developers. The main advantage of this architecture is that it allows developers to focus on writing code without worrying about server management and maintenance. In this article, we’ll take a closer look at how Node.js can […]
Written by
How to Set Up a High Availability RabbitMQ Cluster for Your Node.js Application
  1. Node.js
  2. RabbitMQ

Step-by-Step Guide to Creating and Connecting a RabbitMQ Cluster for a Node.js Application

In today’s digital world, efficient and effective communication between different software components is crucial. That’s where RabbitMQ and Node.js come into play. RabbitMQ is a highly reliable open-source message broker that supports multiple messaging protocols. It’s robust, easy to deploy, and provides a host of features like clustering and high availability. On the other hand, […]
Written by
Using MySQL with Node.js
  1. Node.js

Using MySQL with Node.js: A Complete Guide for Building Robust Applications

Explanation of Node.js Node.js is an open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside of a web browser. It allows developers to build high-performance, scalable, and event-driven applications using JavaScript, which makes it one of the most popular technologies in the web development industry. Node.js is built on top of the V8 engine, […]
Written by
A Comprehensive Guide to Three.js: Creating 3D Graphics and Animations
  1. JavaScript
  2. Three.js - JavaScript 3D library

A Comprehensive Guide to Three.js: Creating 3D Graphics and Animations

Three.js is a powerful and popular JavaScript library for creating 3D graphics and animations on the web. Whether you’re a seasoned 3D developer or just getting started, three.js provides a wealth of features and functions to help you create stunning visual experiences. In this article, we will dive into the details of three.js, covering everything […]
Written by
Tips for using the HTML5 Clipboard API to programmatically copy and paste content on a webpage
  1. JavaScript

Tips for using the HTML5 Clipboard API to programmatically copy and paste content on a webpage

The HTML5 Clipboard API is a powerful browser-based application programming interface that allows developers to programmatically copy and paste content on a webpage. Introduced with HTML5, the Clipboard API provides a set of methods and events that enable developers to interact with the clipboard and manipulate its contents seamlessly. The Clipboard API provides three primary […]
Written by
Advanced Security Techniques and Best Practices for JavaScript and Node.js
  1. JavaScript
  2. Node.js

Advanced Security Techniques and Best Practices for JavaScript and Node.js

JavaScript and Node.js are widely used in web development and are essential for creating dynamic, interactive web applications. However, with this increased functionality comes an increased risk of security vulnerabilities. These vulnerabilities can result in a variety of attacks, including data theft, injection attacks, and other malicious activities. It’s important to understand the different security […]
Written by
Observer Pattern in JavaScript: Unleashing the Power of Event Management and Real-time Notifications
  1. JavaScript
  2. JavaScript Design Patterns

Mastering the Observer Pattern in JavaScript: Build Efficient Event Management and Notification Systems

In the world of modern web development, efficient event management and real-time notifications have become essential components of responsive and interactive applications. One powerful design pattern that has gained popularity for tackling these challenges is the Observer Pattern. This pattern enables seamless communication between objects while maintaining a clean and organized codebase. In this article, […]
Written by
Mastering the Metaverse with React, Three.js, and A-Frame: Create Immersive Virtual Environments
  1. JavaScript
  2. React.js
  3. Three.js - JavaScript 3D library

React, Three.js, and A-Frame: Unlocking the Power of Web-Based Virtual Experiences in the Metaverse

In recent years, the Metaverse has emerged as a groundbreaking concept that is reshaping the digital landscape. As a convergence of virtual and augmented reality, the Metaverse allows users to immerse themselves in interactive, shared virtual experiences. The growing importance of the Metaverse cannot be understated, as it unlocks endless possibilities for social interaction, entertainment, […]
Written by
Next
No Comments
Leave a comment Cancel
Comments to: Building a Custom Virtual DOM Implementation in JavaScript

    Your email address will not be published. Required fields are marked *

    Attach images - Only PNG, JPG, JPEG and GIF are supported.