loading...
Cover image for What is the virtual DOM

What is the virtual DOM

thegamefreak720 profile image Ori Alvarez Originally published at commithub.com ・3 min read

Driving alongside my partner I was talking about the concept of what is the virtual DOM. It came clear very quickly that since I haven't touched
this concept in such a long time I have forgotten about how it operates. More importantly, the virtual DOM is becoming the norm for building web applications.
Getting a good understanding of what it is, how it operates and what advantages and disadvantages it has over regular websites are key for every software
engineer's role in the future. Now before we dive right in let's learn what is the DOM.

What is the DOM?

The Document Object Model or DOM is an object representation of the HTML elements of a webpage. It gives us an interface that interacts and manipulate the page, change the document structure,
content, and styling. How this is generated is when a browser loads a web page it first looks at the HTML. The browser uses the HTML as a blueprint or instructions on how to build the page
(then it applies the CSS later). When the browser parses the instructions it builds a model of how the model should look and work in JavaScript. This model contains every element
in order of the page in a tree-like structure. Each DOM element being a tree node, containing all the same property keys as each other node.
Some of these node properties are informational while others are methods that we can use for interaction. The DOM, creating and propagating event objects, which hold information
about the event type and target, up the tree.

DOM representation

When the DOM is built and the webpage is loaded, developers get access to it in the form of the global Javascript object document. document contains the entire hierarchy of
the page, each element (or DOM node), and it also contains dozens of built-in methods and properties. We can use these methods and properties to manipulate what we see on the screen.

What is the virtual DOM?

The virtual DOM is a programming concept where the DOM is represented "virtually" where the UI is kept in memory and then synced with the real DOM we spoke of before. This concept
became popular with React because it uses the library ReactDOM to reconcile the virtual DOM with the real one. When working with React you tell it what state you want the UI to be in
and React makes sure it matches the DOM. This makes managing state way easier since it abstracts out the attribute manipulation, event handling, and manual DOM updating.
The virtual DOM was not created by the React team but it's a tool that is provided for free from them. Vue also utilizes the virtual DOM to update the UI.

Benefits of the virtual DOM over the original DOM

Managing the DOM performing calculations, changing attributes or event handling we need to utilize the DOM APIs and can reduce performance significantly. When the DOM was released in 1998 it was not
the envisioned that the page was gonna be updated as frequently as we do today. The virtual DOM was created to solve this problem of needing to update frequently the DOM in a more performant way.
The virtual DOM can be manipulated and updated without using the DOM APIs. Once all the updates have finished on the Virtual DOM it will look for the specific changes needed to be made to the original DOM
and make them targetted and optimized in a process called reconciliation.

Conclusion

The virtual DOM is a great tool for providing performant applications to your users that need frequent updates. More importantly, it's offered on tools like React and Vue that are free and open source.
I'm a big advocate of open source and if there are performance bottlenecks usually programmers jump in and fix it. These tools are very popular and have excellent documentation and tutorials available
so you can jump on the train of awesome front end code.

Happy Coding! 🚀

Resources

Discussion

pic
Editor guide
Collapse
mikenikles profile image
Mike Nikles

Hey Luis, while not as popular as the frameworks you mention in your post, I think it'd be interesting to have a look at Svelte (svelte.dev). It doesn't use the concept of a virtual DOM but instead compiles your components to regular Javascript. The browser doesn't need to download a framework and load the DOM into memory.

Collapse
thegamefreak720 profile image
Ori Alvarez Author

You mentioned it and on my RSS Feed, this is the first blog post for programming css-tricks.com/getting-acquainted-.... This is very interesting and I didn't know this existed. Something that worries me a bit is that it does the heavy load once meaning if you have a very data-heavy app it might stall for a long time but not exactly sure since I haven't tested that behavior. I will probably give it a try in the near future.

Collapse
mikenikles profile image
Mike Nikles

Svelte's build step only compiles your components to regular Javascript and bundles that, ready for deployment. If you make requests to a backend API from within a component, that still happens at runtime.

I wrote a blog post a few weeks ago where I highlighted some of the benefits I believe Svelte has over React. If you're curious to learn more you can find that on my profile. Also feel free to reach out to me if you have questions.