Virtual DOM Trees

A virtual node (vnode) is a plain JS object representing UI:

JSX (<div className="card"><h1>Hello</h1></div>) compiles to this:

For our build:

Components are functions returning vnodes:

When type is a function: call it during rendering.

Initial render: convert vnode → real DOM.

For our toy: simulate DOM with a Python tree representation. Test stdin/stdout.

Re-render: build new vtree, diff against old, apply changes.

Why virtual DOM?

• Plain JS objects are cheap to create.
• Plain JS comparisons are cheap.
• Real DOM updates are expensive.
• Build cheap tree, diff, apply minimal changes to real DOM.