Brief Origin of where the hype began

On the 29th of May, 2013, the pain of building interactive UIs on the web stopped, for on that day the open source library React.js was birth. It introduced features like JSX, Components, one-way data binding and more. One of the top features React brought to the table was the virtual DOM which we will get to in more detail later on. It was said to speed up DOM manipulation. In fact, Pete Hunt, a former React team core member, said that the virtual DOM was built to optimize performance. React later on became to be the most popular framework in 2021 by stack overflow, and it lived happily ever after. Well, not really. The creator of the most loved web framework in 2021, Svelte, Rich Harris called the virtual DOM a "Surprisingly resilient meme". At first I thought this was an unpopular opinion but when I started doing my extensive research (stalking senior developers on Reddit) I got to find out that Rich wasn't alone. In this article I'm going to go through why I might join the band wagon.

Screenshot from Rethinking Best Practices at JSConfEU 2013

What is virtual DOM?

A virtual DOM is a lightweight JavaScript representation of the Document Object Model (DOM) used in declarative web frameworks such as React, Vue.js, and Elm. Put in simple terms, the virtual DOM is a JavaScript Object that stores data about how the DOM looks like at that instant. A way you can look at it is too see the DOM as an office, where all the furniture are elements (e.g. the table is the Nav bar, the chairs is the landing section, and the desk is a button). The virtual DOM is the blueprint of the office.

Why the virtual DOM?

When writing web pages and apps, one of the most common things you'll want to do is manipulate the document structure in some way. The default way of doing this is by DOM manipulation, i.e. using document.setAttribute() or document.createElement(). But one big problem with this was that once a change was made to the DOM the whole document would update. For example, you are building a company website and you need a form for clients to reach out to you, your form is there but you forget to put an input, so you update the form by putting an input tag inside of it. What happens behind the scene is that not only is the form updated but all the html elements(nodes) in the document, yup, all of it. You can imagine if you were building an e-commerce store with 10,000 items represented each in a div tag. That will be a very slow website. So this is where the virtual DOM comes in. The virtual DOM makes it possible for the DOM to only update what has only been changed. How does virtual DOM do it? well, there is this thing called diffing.

Diffing

Whenever there is a change in the state of your company website, a new virtual DOM is created. Then the new virtual DOM and the previous virtual DOM are compared with each other. This comparing is called DOM diffing.

The intention is to perform minimal operations on the real DOM, hence after diffing, the best way to update the real DOM is calculated, leading to an efficient update of your company website.

The following image shows the diffing process:

Why isn't the creator of Svelte buying into it?

As awesome as it may sound, virtual DOM does posses some bottle necks. let's go through them;

1. Developer's time is lost: Even though extreme levels of performance aren't one of them, virtual DOM brings a lot of benefits to the table. It's comparable to the difference between programming in Python or PHP vs. programming in C. More developer ergonomy comes at the expense of performance. In other words, it's a trade-off. You inherently write more code to get the job done.
2. It is not insanely performant: the implementation of virtual DOM in React is not highly performant as they say. If it was, why do they have React Fiber and shouldComponentUpdate(). React Fiber is basically used to optimize really heavy apps that require a lot of re-renders. the latter literally allows us to manually choose what component to update. I thought virtual DOM in React was all-encompassing, why are they providing these tools?

Conclusion

And just to be clear, I have nothing against React. Virtual DOM is just another round about in updating the DOM. Yes, it's performant and it gets the job done, but i've come to realize it isn't as perfect as they say it is.