←back to thread

The time is right for a DOM templating API

(justinfagnani.com)
218 points mdhb | 1 comments | 26 Jun 25 19:23 UTC | HN request time: 0s | source
Show context
hsn915 ◴[26 Jun 25 23:36 UTC] No.44392502[source]▶
What we need is not templating. What we need is a native implementation of a virtual dom.

More specifically, a native implementation of the "patch" function:

    patch(target_dom_node, virtual_dom)
Where `virtual_dom` is just a plain-data description of the DOM.

Most of the "slowness" of the DOM come from its requirement to be a 90's era Java style object hierarchy.

Don't call it "templating". Just call it "virtual dom". Everyone knows what that means.

replies(3): >>44393357 #>>44393489 #>>44394315 #
sethaurus ◴[27 Jun 25 02:59 UTC] No.44393357[source]▶
Other than quibbling over the word "template", how does that differ from what TFA is describing?
replies(1): >>44395086 #
hsn915 ◴[27 Jun 25 08:55 UTC] No.44395086[source]▶
The linked proposal has many "features" that would be "needed" if you frame the problem in terms of a "template api", centered around "binding" variables, and what not.

https://github.com/WICG/webcomponents/issues/1069

My proposal only adds one native function with nothing else: no new data types, no new apis.

replies(1): >>44395268 #
WickyNilliams ◴[27 Jun 25 09:29 UTC] No.44395268[source]▶
Doesn't your proposal implicitly introduce the concept of a virtual DOM, which the browser does not have?

You'd need to spec out what that looks like. It adds one new API from the users perspective but much more from the browsers perspective.

Additionally the next generation of Frameworks do not use virtual DOM. Solid and svelte do not. Vue is moving away from it. Signals are directionally where they're all heading.

replies(1): >>44401604 #
1. hsn915 ◴[28 Jun 25 01:02 UTC] No.44401604[source]▶
The API surface I propose only includes one function. No type needed.

It does not even require the target node to be created with a virtual dom in the first place. Just diff the node with the given tree structure efficiently.

Internally the browser might need to create a few accelerator data structures, but that's an implementation detail.