What is Virtual Dom

by Sean Brown ( unsplash.com )

What is DOM?

Before we start to discover the virtual DOM technology let’s talk a little bit about the basic thing — the original DOM.

DOM stands for Document Object Model. It’s a way of representing a structured document via objects. It is cross-platform and language-independent convention for representing and interacting with data in HTML, XML, and others. Web browsers handle the DOM implementation details, so we can interact with it using JavaScript and CSS. We can search for nodes and change their details, remove one and insert a new one.

These days DOM API is almost cross-platform and cross-browser.
So what’s the problem with it?

DOM Problem

The main problem is that DOM was never optimized for creating dynamic UI.

We can work with it using JavaScript and libraries like jQuery (thank God we have it). But jQuery and others did little to solve performance issues. Think about modern social networks like Twitter, Facebook or Pinterest. After scrolling a little bit, the user will have tens of thousands of nodes. Interact with them efficiently is a huge problem. Try to move a 1000 divs 5 pixel left for example. It may take more than a second. It’s a lot of time for the modern web. You can optimize the script and use some tricks, but in the end, it’s a pain to work with huge pages and dynamic UI.

Can we solve this problem? Looks like we can.

Currently, W3C group is working on the new Shadow DOM.

Shadow DOM — A W3C working draft standard. This specification describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.

Another option is Virtual DOM — Not a standard. Virtual DOM solutions are built on top of standard DOM. They still utilize DOM eventually, but do it as little as possible and very efficiently.

Virtual DOM

Rather than touching the DOM directly, we’re building an abstract version of it. That’s it. We working with some kind of lightweight copy of our DOM. We can change it as we want and then save it to our real DOM tree. While saving we should compare, find difference and change (re-render) what should be changed.

It is much faster than working directly with DOM, because it doesn’t require all the heavyweight parts that go into a real DOM. It works great, but only if we are working with it in the right way. There are two problems to solve: When re-render the DOM and How to do it efficiently.

When. When the data is changed and needed to be updated. But how do we know that the data is changed?

We have two options here:

• First one (dirty checking) — poll the data at a regular interval and check all of the values in the data structure recursively.
• The second option (observable) is to observe for the state change. If nothing has changed, we do nothing. If it changed, we know exactly what to update.

How. What makes it really fast is:

• Efficient diff algorithms.
• Batching DOM read/write operations.
• Efficient update of sub-tree only.

As you understand it’s not an easy thing and implementation of it can be tough. There are some libraries that help us to implement the idea in our projects. The famous one is React JS by Facebook.

React JS

React JS — is a JavaScript library for building user interfaces developed by Facebook. It actually populated the virtual DOM idea.
React library creates a lightweight tree from JavaScript objects that mimic a DOM tree. Then creates HTML from it and append/insert it to some HTML element. This cause browsers to re-draw the page.
React is a library, not a framework. You can’t compare it to Angular or Ember.

Other libraries and Frameworks

• virtual-dom by Matt Esch- A JavaScript Virtual DOM and diffing algorithm.
• Mithril- A Javascript Framework for Building Brilliant Applications.
• Bobril- Component oriented framework inspired by Mithril and ReactJs.
• cito.js- JavaScript framework for building fast, scalable and modularized web applications.

Summary

Virtual DOM is a technique and set of libraries/algorithms that allow us to improve front end performance by avoiding direct work with DOM and work only with a lightweight JavaScript object that mimics the DOM tree.
The idea of Virtual DOM is great and isn’t new actually. We knew for a long time that touching the DOM is expensive. But the implementation of this technique is hard.

Using libraries like React we can boost the performance of our applications and it’s actually very easy to get in.

Thanks for reading :)