4 ms·

There are at least two reasonably popular frameworks that offer reactivity without virtual DOM: Svelte and Solid. And both of them are way more ergonomic than w

by ribit 4y ago

There are at least two reasonably popular frameworks that offer reactivity without virtual DOM: Svelte and Solid. And both of them are way more ergonomic than what is presented here. I believe VDOM-based approaches have one decisive advantage — the VDOM structure can be created by any means convenient to the programmer. To me at least, this offers more flexibility and modularity when organising code: you can create as many functions as you need to structure and reuse VDOM construction. This is something I run into with Svelte, which forces me to make a new component for every bit of code I try to isolate. Solid is a bit better — and I really like their idea of "vanishing components" — but you have to follow it's fairly strict rules (e.g. no props destructuring) or things will get weird.

fabiospampinato 4y ago
By and large having no VDOM frees you from having to structure things in an unergonomic way, for performance or otherwise, whatever limitations Svelte and Solid have in this regard are self-inflicted. For example my framework allows you to destructure props just fine, still no VDOM (https://github.com/vobyjs/voby https://github.com/vobyjs/voby).
spankalee 4y ago
You can do the same with any system that treats templates as expressions that return a value (the big innovation of React, IMO), it doesn't require vdom. In Lit, we do this with tagged standard template literal expressions that return what we call a TemplateResult. You can compute, store, abstract over those however you want - they're just JS values. This indeed gives programers a ton of expressive power.
- ribit 4y ago
  Sure, that's the most straightforward way to approach these things, but doesn't this mean your elements don't have persistent identity between two renders? Tracking elements between renders is what allows animations and other nice things. So it's not exactly the same.
  - spankalee 4y ago
    No, it's better. Retaining identity is _easier_ with such a system. You mark in the DOM where the expressions are, and on updates instead of a vdom diff you check if the template rendering to a DOM location is the same as before. If it is then you just update the expressions. All the unchanged elements stay the same, and sine you don't traverse the DOM or a VDOM, the update is much faster.

by ribit 4y ago

fabiospampinato 4y ago

By and large having no VDOM frees you from having to structure things in an unergonomic way, for performance or otherwise, whatever limitations Svelte and Solid have in this regard are self-inflicted. For example my framework allows you to destructure props just fine, still no VDOM (https://github.com/vobyjs/voby https://github.com/vobyjs/voby).

spankalee 4y ago

You can do the same with any system that treats templates as expressions that return a value (the big innovation of React, IMO), it doesn't require vdom. In Lit, we do this with tagged standard template literal expressions that return what we call a TemplateResult. You can compute, store, abstract over those however you want - they're just JS values. This indeed gives programers a ton of expressive power.

ribit 4y ago
Sure, that's the most straightforward way to approach these things, but doesn't this mean your elements don't have persistent identity between two renders? Tracking elements between renders is what allows animations and other nice things. So it's not exactly the same.
- spankalee 4y ago
  No, it's better. Retaining identity is _easier_ with such a system. You mark in the DOM where the expressions are, and on updates instead of a vdom diff you check if the template rendering to a DOM location is the same as before. If it is then you just update the expressions. All the unchanged elements stay the same, and sine you don't traverse the DOM or a VDOM, the update is much faster.