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.

Purpose

Used for two purposes:

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

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