What is the Virtual DOM?

I did not know what exactly the Virtual DOM is.

Because of this aching hunger for knowledge I (with the help of Arby’s), set out to quench myself at the buffet of Javascript history.

For an appetizer, a short primer on the regular ol’, very-much-not-virtual DOM.

The Document Object Model or DOM is an “abstraction of structured text.” It allows client-side interactivity between a language like Javascript and a text like an HTML file. Each element is represented as a node branching off from the root node, the document object. Methods used in Javascript like getElementById or removeChild are inherited from the HTML DOM API.

Jonah Hill’s take on the beginning of the DOM

In the mid 90’s Netscape and Microsoft competed with Javascript and JScript respectively. The first form of the Document Object Model that they used (known as “DOM Level 0”) was limited in how it could access elements. After many years, many “web platform groups”, and a few “DOM levels”, the DOM that we know now is maintained by WHATWG, noble stewards of the web. Also in that time, Single Page Applications (SPAs) became emblematic of the modern internet with the DOM as a cornerstone. The surge in popularity made new DOMs bigger and more obviously inefficient.

DOMs are organized in a tree-like structure. I don’t know this from personal experience as I’m only just now learning about all this stuff, but purportedly, trees are easy enough to traverse. The problem lies in the fact that once the tree gets so absolutely humongous big, it isn’t very fast/efficient using the algorithms that exist to traverse that tree, not to mention to “transform” that tree. In fact the state of the art algorithms that exist to do such a thing have a time complexity of O(n³) where ’n’ is the number of elements in the tree.

The developers of React didn’t invent the Virtual DOM, but it’s how I found out about it.

The Virtual DOM is a representation of the above-mentioned DOM. An abstraction of an abstraction. For every DOM element there is a Virtual DOM element. A lighter weight copy. This copy has the same properties of the DOM element but lacks the power to change what’s on the screen.

If the DOM were a house, the Virtual DOM would be blueprints. If the DOM were your room which you wanted to rearrange, the Virtual DOM would be the crude drawing you made of your room with your furniture to try and figure out where to move things. If the DOM were an apple tree, the Virtual DOM would be a seed (???). If the DOM were a seed, the Virtual DOM would be the ground (ohh…ok…???).

With each call to render, the entire Virtual DOM is recreated. Then React compares this updated version to a snapshot it took right before the update. Wow! Couldn’t even see ’em do it! Then React takes only the changed elements from the comparison and updates the real DOM with them. You might think that that’s a lot of work every time something is updated on a webpage. I felt compelled to say that and I don’t really mean it — probably just what someone else said.

Rendering Virtual DOMs quickly and avoiding those O(n³) algorithms, React employs a “diffing” algorithm. This is a “heuristic O(n) algorithm” with two assumptions:

Two elements of different types will produce different trees.

The developer can hint at which child elements may be stable across different renders with a key prop. (source)

In React, another part of the Virtual DOM are “fibers”. These are objects included in the Virtual DOM but not representing a part of the user interface. They hold information about the component tree and assists in incremental rendering of the Virtual DOM.

Also, I’d like to say that Arby’s is welcoming back Oreo bites to the menu.

Idk if they’re actually back, probably not

I am full and happy. A good blog, like an affordable, mostly-meat meal, leaves you feeling sweaty but hopefully satisfied. They both allow you to reflect, to see things in a wider perspective and maybe make connections you wouldn’t have otherwise. In React, the Virtual DOM abstracts away how you manipulate attributes, handle events, or manually change the DOM. It is declarative — when I want the interface to appear some way I declare that to React and it reconciles this with the DOM. When I want a Roast Beef Sandwich with two packets of Horseradish sauce and some curly fries I declare that to Arby’s and they in turn reconcile that with the deli-slicers, bread-bakers, and all the other tools needed to satisfy this request because I can’t be bothered to buy and maintain all of those gadgets. I’m thinking Arby’s.

Musician and Software Engineer following his enthusiasm