DEV Community

What is the Virtual DOM? (Let's build it!)

Siddharth on June 02, 2021

You might have heard of the Virtual DOM (and also the Shadow DOM). You may have even used it (JSX is basically sugar for the VDOM). If you want to ...

Read full post

Syed Ali Mansoor • Jun 2 '21

This is such a great article! I had trouble understanding the VDOM but you made it really clear and simple to follow. Looking forward to the next part! ✌️

Siddharth • Jun 2 '21

Thanks! The next part might come out in 2 days

Spyros Argalias • Jun 5 '21

Hey, I enjoyed the article. I also agree with the points you raised. Thanks for the good content :).

Nevertheless, I just want to point some things out that I feel are minor issues in the article.

In the first snippet of code presented. The tests don't seem fair. For the object, i is being set every time, not appended to. However, for innerHTML, i is being appended. This makes the measurement far slower. This is both because of layout thrashing, but also because the resulting string is huge (2,890 digits long). However, the main point still applies. When I tested just setting the value innerHTML, it was about 20 times slower than the operation on the object.

Also, the code snippet with the function generateList doesn't seem to work. I tried created sufficient HTML for it to run, but got a few errors.

Anyway, I still enjoyed the article overall. Keep it up :).

Siddharth • Jun 6 '21

I was just looking for a quick and easy way to show you stuff and I didn't actually take the time to test it too much. Thanks for pointing those out!

Spyros Argalias • Jun 6 '21

Yeah I gotcha. That's all good, as I said I still think it's a great article :). Yeah I was nitpicking a bit because I like actually running through the examples for more clarity :)

Siddharth • Jun 6 '21

Me too, but not on my articles 😂

Rajat Gupta • Jun 2 '21

Very insightful! Waiting for the next part.

Siddharth • Jun 2 '21

Thanks! The next part might come out in 2 days or maybe tomorrow

Siddharth • Jun 5 '21

Look at these reactions, I am absolutely mind blown("!".repeat(Number.MAX_SAFE_INTEGER))

(I could do that forever)

Madza • Jun 2 '21

How do you like Svelte's aproach, avoiding it entirely? 👀

chris-czopp • Jun 3 '21

Yeah, Solid also uses build-time DOM diffing so we have at least two projects which prove it can be done. I think Virtual DOM did loads of good for the industry like popularised declarative UI development. However, if the runtime housekeeping like DOM diffing can be done at build-time, then I think it's no-brainer to consider these tools.