Hi Conrad, I can definitely see that you are a designer. Your github pages demo is well done (nice & clean), leaving my field of expertise.

Your "clone the repo" link seems broken, but it was easy to find the code.

At a first glance, your dom() method looks expensive. Not meaning the Array.split() calls, but the way you add the DOM. In my experience it is faster to convert your desired output to a string and then use something like:

parentNode.insertAdjacentHTML('beforeend', delta.outerHTML);

Or you could use: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment to ensure that there are no browser reflows while adding nodes. Use e,g, https://developer.mozilla.org/en-US/docs/Web/API/Performance/now to get some numbers and compare which strategy is faster.

JSON has the big advantage, that you can use JSON.parse() and JSON.stringify() to convert a nested structure into a string or a string back at a blazing speed. Important when using postMessages to communicate between workers (different threads or windows).

Converting the vdom into an html-string is fairly easy to do. Code here:

https://github.com/neomjs/neo/blob/dev/src/vdom/Helper.mjs#L84

The important part for virtual dom in general is that it is not only used to render dom, but to dynamically change it. Meaning: you can add, remove and modify it (or any combinations) after the rendering.

Example: you render a button wrapped inside a div somewhere inside a container (div). Then you change the button text, replace the wrapper div with the button itself and move the container somewhere else.

Then you trigger the update method => createDeltas to ask the engine: How does my existing DOM need to adjust to get from the previous state to the new one?

This logic is intense (pretty sure most "Javascript experts" won't get it). Room for optimisation (performance) though.

Once the deltas are calculated (or the initial "rendering string"), the vdom web worker will send a message to the main thread to apply the deltas.

This logic is not too difficult:

https://github.com/neomjs/neo/blob/dev/src/main/mixin/DeltaUpdates.mjs#L228

Best regards, Tobias