Show HN: A minimal function to bind state to DOM

I made something almost exactly like this: https://simulacra.js.org/

This actually uses object getters/setters, has full support for arrays, and nested arrays of objects. There is no API beyond the initial binding, everything beyond that is just mutations on an object.

Nice! I will definitely consider this option for my next projects! Also, I am starting to think that this sort of binding could be implemented natively by browsers, which could make many applications faster.

So what happens in Simulacra if I start moving DOM nodes around?

Does the binding break?

Consecutive clicks on the number increment/decrement buttons don't work.

Google Chrome Version 62.0.3202.75 (Official Build) (64-bit)

Interesting idea! Just wondering if there are any benefits to going down this road other than saving the 21K of bandwidth necessary for Gzipped/minified Vue.js?

I hope to save on performance & memory by cutting the render step and binding immediately to dom elements (But I could be wrong, I will need benchmarks before the switch).

This is great as learning material.

Have you benchmarked your approach?