5 ms·
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
by janci 4y ago
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?
- janci 4y agoTo 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?
- ivanvanderbyl 4y agoWhat you are describing sounds closer to how Svelte works.
- eldenring 4y agowriting to the DOM is slow, you use VDOM to batch updates and other optimizations
- megous 4y agoNo 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.
- franciscop 4y agoWhat do you mean by "state tree" here? And how do you go from the state tree diff to the required dom diff?
- speedgoose 4y agoI 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.
- naniwaduni 4y agoWhy diff trees at all when you can record a changeset and patch DOM based on that?
- isbvhodnvemrwvn 4y agoHow do you get the changeset?
- hajile 4y agoPreact does this and is also small and react compatible.
- sickill 4y agoSounds more or less like Solid.js
- vanviegen 4y agoYes, 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 https://github.com/vanviegen/aberdeen [2] https://github.com/vanviegen/aberdeen/tree/master/examples https://github.com/vanviegen/aberdeen/tree/master/examples
- 88913527 4y agoWe 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.