A Virtual DOM is a paradigm for building interactive user interfaces in the browser. At its most basic level, it involves maintaining a representation of the DOM structure built with JS objects. This representation is changed and updated in response to side effects of various kinds (user initiated, data sources being updated, etc) and the DOM is then efficiently updated to reflect those changes.
Typically virtual DOM implementations have a few main pieces / bits which aim to solve the same underlying problems, below there are brief introductions to these big concepts and links to more detailed notes about each of them.
VNode/virtual DOM Node: A JavaScript object which forms
a node in a virtual DOM tree. Typically this will hold information about
what HTML tag it should render as, attributes that should be set on it,
andh / createElement
/ etcMain article: 👩🔬 JSX
Any virtual DOM implementation needs a way to generate virtual DOM nodes. This could be done through plain JS function calls, but typically it’s done through 👩🔬 JSX, which is syntactic sugar over function calls to a virtual DOM object factory function of some type.
Main article: 🕊 VDom Reconciliation
The old and new virtual DOM trees are diffed and any updates are written to the DOM. There are quite a lot of gotchas here, from how to tell when old DOM elements should be preserved to how to minimize re-renders and provide developers with access to underlying DOM nodes.
When to do it, how often, what triggers it, etc
I build a little implementation of the above which actually gets a little more complicated (I added state management): https://github.com/alicewriteswrongs/little-vdom
This is, I think, a slightly more complicated implementation. I think it’s kind of ugly.
https://millionjs.org/ or https://github.com/aidenybai/million
a good bit more complicated, and it looks like it’s somewhat written to support the usecase of providing a react-compatible DX