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?
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 targeted and optimized in a process called reconciliation.
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! 🚀