Document Object Model (DOM)

This is the tree of nodes.

Learned in CS349.

Virtual DOM

The VDOM is a lightweight representation of the UI in memory

The VDOM is synchronized with the “real” DOM as follows:

  1. Save current VDOM
  2. Components and/or application state updates the VDOM
  3. A re-render is triggered by framework
  4. Compare VDOM before update with VDOM after update
  5. Reconcile the difference identifying a set of DOM patches
  6. Perform patch operations on real DOM
  7. Back to step 1

Hyperscript function calls create a representation of UI tree

  • It’s a JavaScript object
  • Commonly referred to as a virtual DOM (or just “vdom”)

Used for two purposes:

  1. “Render” an actual DOM using imperative methods
  2. Lightweight abstraction of DOM to compare changes