Hacker News Reader

Comment by janci | Hacker News Reader

Do we need VDOM for fast rendering? Would it be possible to make expressions that are re-evaluated only when their inputs change and bind them directly to real DOM? I mean using immutable values and pure functions gives you the first (already used with react) and in the end VDOM mutates the DOM, so why not skip the VDOM altogether?

View on HN

To better explain myself: VDOM takes two versions of the element tree, makes a diff and patches the DOM accordingly. Why not take two versions of the state tree, diff that and patch DOM directly? What benefit the VDOM brings?

I remember that historically DOM used to be very slow on some browsers and virtual DOM was a huge performance boost. You could compute very quickly the difference in JavaScript and minimise the calls to the slow DOM browser API.

Now that Internet Explorer is really deprecated and DOM are fast enough in every browser, VDOM is not necessary.

What do you mean by "state tree" here? And how do you go from the state tree diff to the required dom diff?

Why diff trees at all when you can record a changeset and patch DOM based on that?

How do you get the changeset?

Preact does this and is also small and react compatible.

What you are describing sounds closer to how Svelte works.

writing to the DOM is slow, you use VDOM to batch updates and other optimizations

No it's not. It's pretty close to browser's native HTML parsing speed.

And VDOM just writes to the DOM in addition to doing a lot of other throwaway work and allocations.

Reading from DOM may be slow, if you read one of the properties that would trigger layout/style calculactions.

Yes, that's possible and works really well.

I've written this library [1] as a clean reimplementation of a more complex beast we created for a (now dead) startup. Although the reimplementation has only seen very light use, we've used the concept extensively, and it's a joy to use. Take a look at the examples [2].

[1] https://github.com/vanviegen/aberdeen [2] https://github.com/vanviegen/aberdeen/tree/master/examples

We don't need VDOM, but we can't live without it either. The problem is too many people are bought into not just React, but all of the open source components out there too (not a problem persay, it's created a ton of value for many). React does have an elegant API surface, not sure how possible is to keep that, but then somehow give it Svelte-like functionality. React is the golden handcuffs of front-end today.

Sounds more or less like Solid.js

Reply on news.ycombinator.com