top | item 32293880

Show HN: BDC – Ergonomic, sub 1KiB virtual DOM library

23 points| bwhmather | 3 years ago |github.com

BDC is a simple library for updating the DOM to match a javascript description. Does not require JSX or a compilation step.

    clobber(
      document.body,
      h("marquee", [
        h("span", {"style": "font-weight: bold"}, "Hello"), ", ",
        h("blink", "world"), "!",
      ]),
    );
Very fast to first render, moderately slow on subsequent updates.

Prompted by the post on millionjs, which compiles user code to hit the same outrageously small size target.

4 comments

order

sod|3 years ago

I always wonder why github doesn't do something like this. Right now they return html via ajax and innerHTML it into the DOM. Given that innerHTML is notoriously slow, returning something like this should be way faster.

Your lib seems to lack svg & @types support though. And I don't know why you have "virtual DOM" in the title, given that it has nothing to do with it :)

chrismorgan|3 years ago

You know what’s slower than setting innerHTML? Doing just what setting innerHTML would have done, but bit by bit.

If you’re changing from one thing to another very similar thing, then doing precise edits makes sense. But if you’re changing structure significantly, then doing precise edits will be slower than just clobbering it all by setting innerHTML.

klysm|3 years ago

Just rails things