12 ms·

Modern reactive UI frameworks get away from maintaining virtual dom. If you want minimalist vdom preact is a great choice. If you'd like to part ways with vdom

by __s 3y ago

Modern reactive UI frameworks get away from maintaining virtual dom. If you want minimalist vdom preact is a great choice. If you'd like to part ways with vdom while keeping jsx, try svelte or solid-js

threatofrain 3y ago
What are the long term theoretical benefits of vdom? Concurrent rendering?
- __s 3y ago
  At least with solid, you can't do `const a = <jsx>` without caveats. Instead you have to store it as `const a = () => <jsx>` (which isn't quite the same, having problems managing state/renders). In React I was optimizing things by storing vdom in state/memo & then interpolating that exact vdom. Or sharing vdom in multiple places. Without vdom you can't throw jsx results around so haphazardly In solid there's also managing batching updates to reduce rerenders since it eagerly updates dom. It feels like one needs to be more meticulous
  - deleted 3y ago
    [deleted]
  - jrajav 3y ago
    The flipside of this is that in React you are paying the cost of active vdom all the time, even when it doesn't pay off by optimizing large batched updates. In Solid, you sometimes have to optimize for some eager updates, true. That will have to be done at some point, though, when the situation calls for it - in either a specific or a general way. It feels natural to shift that optimization to the state layer, and completely eliminate the need for vdom, at the expense of some more thought and active, upfront work. It's a similar tradeoff to spending more time crafting static typing that works well, versus forgoing static types. The tradeoff seems to have good effect too - Solid seems much faster than React both on paper and in practice (my personal experience).
  - sattoshi 3y ago
    Your comment signals a key misunderstanding. Doing a=jsx and interpolation does NOT touch the vdom in any way. VDOM only comes into play for jsx returned from components before being rendered to screen.
nosefurhairdo 3y ago
Preact has signals now too if you're into that.

by __s 3y ago

threatofrain 3y ago

What are the long term theoretical benefits of vdom? Concurrent rendering?

__s 3y ago
At least with solid, you can't do `const a = <jsx>` without caveats. Instead you have to store it as `const a = () => <jsx>` (which isn't quite the same, having problems managing state/renders). In React I was optimizing things by storing vdom in state/memo & then interpolating that exact vdom. Or sharing vdom in multiple places. Without vdom you can't throw jsx results around so haphazardly In solid there's also managing batching updates to reduce rerenders since it eagerly updates dom. It feels like one needs to be more meticulous
- deleted 3y ago
  [deleted]
- jrajav 3y ago
  The flipside of this is that in React you are paying the cost of active vdom all the time, even when it doesn't pay off by optimizing large batched updates. In Solid, you sometimes have to optimize for some eager updates, true. That will have to be done at some point, though, when the situation calls for it - in either a specific or a general way. It feels natural to shift that optimization to the state layer, and completely eliminate the need for vdom, at the expense of some more thought and active, upfront work. It's a similar tradeoff to spending more time crafting static typing that works well, versus forgoing static types. The tradeoff seems to have good effect too - Solid seems much faster than React both on paper and in practice (my personal experience).
- sattoshi 3y ago
  Your comment signals a key misunderstanding. Doing a=jsx and interpolation does NOT touch the vdom in any way. VDOM only comes into play for jsx returned from components before being rendered to screen.

nosefurhairdo 3y ago

Preact has signals now too if you're into that.