3 ms·

It's either VDOM or having to depend on a compiler to do everything (how Svelte works). The advantage to the former is it's relatively easy to debug, whereas wi

It's either VDOM or having to depend on a compiler to do everything (how Svelte works). The advantage to the former is it's relatively easy to debug, whereas with a compiler, I'm at the mercy of its developer and their whims. VDOM may be "antiquated" (I mean it's a nested object or linked list which are standard paradigms) but slow depends on what you're doing. I did a linked list for my own full-stack framework's [1] component library and it's quite snappy. [1] https://github.com/cheatcode/joystick https://github.com/cheatcode/joystick

yesbabyyes 2y ago
Lit does not use a virtual DOM, nor require a compile step. Instead, it utilizes object accessors and tagged templates to figure out when to schedule an update.
recursive 2y ago
> It's either VDOM or having to depend on a compiler to do everything (how Svelte works). Assuming you don't mean JSX transform by "compiler", you really don't have to do either one. For my framework [1], state is directly bound to DOM elements. Dependencies are determined at run time. It's not slow. [1] https://mutraction.dev/ https://mutraction.dev/
- rglover 2y ago
  Dependencies meaning other components or something else? And if I understand correctly, you're forming relationships between parents/children by setting extra properties on the DOM nodes themselves (e.g., node.mutraction_parent = <Some Other DOM Node>)?
  - recursive 2y ago
    No. Dependency means a state/data dependency that would require a UI update. You never need to explicitly assign tree relationships like parents. Here's the example code from the front page. In this case, `model.clicks` is a dependency. const model = track({ clicks: 0 }); const app = ( <button onclick={ () => ++model.clicks }> { model.clicks } clicks </button> ); document.body.append(app);
    - rglover 2y ago
      Gotcha. Interesting...how does it work? Sounds like a pretty novel way to solve the problem.
      - recursive 2y ago
        Essentially object proxies. When you invoke a property getter in tracked contexts (like DOM element construction), a dependency is registered for that object property. When you invoke the corresponding setter, the update function for the list of dependencies are notified. That's the idea, in a nutshell. I'm definitely not the first one to come up with this idea, but I hadn't found another UI framework that worked exactly like how I wanted. Solid is kind of close, but not it. Vue has some of this as well, but it's a bit more kitchen-sink in its scope.
        rglover 2y ago
        Thanks for sharing, that's a cool idea. Will have to wrap my head around it a bit more but got me thinking about how to strip vdom.

yesbabyyes 2y ago

Lit does not use a virtual DOM, nor require a compile step. Instead, it utilizes object accessors and tagged templates to figure out when to schedule an update.

recursive 2y ago

> It's either VDOM or having to depend on a compiler to do everything (how Svelte works). Assuming you don't mean JSX transform by "compiler", you really don't have to do either one. For my framework [1], state is directly bound to DOM elements. Dependencies are determined at run time. It's not slow. [1] https://mutraction.dev/ https://mutraction.dev/

rglover 2y ago
Dependencies meaning other components or something else? And if I understand correctly, you're forming relationships between parents/children by setting extra properties on the DOM nodes themselves (e.g., node.mutraction_parent = <Some Other DOM Node>)?
- recursive 2y ago
  No. Dependency means a state/data dependency that would require a UI update. You never need to explicitly assign tree relationships like parents. Here's the example code from the front page. In this case, `model.clicks` is a dependency. const model = track({ clicks: 0 }); const app = ( <button onclick={ () => ++model.clicks }> { model.clicks } clicks </button> ); document.body.append(app);
  - rglover 2y ago
    Gotcha. Interesting...how does it work? Sounds like a pretty novel way to solve the problem.
    - recursive 2y ago
      Essentially object proxies. When you invoke a property getter in tracked contexts (like DOM element construction), a dependency is registered for that object property. When you invoke the corresponding setter, the update function for the list of dependencies are notified. That's the idea, in a nutshell. I'm definitely not the first one to come up with this idea, but I hadn't found another UI framework that worked exactly like how I wanted. Solid is kind of close, but not it. Vue has some of this as well, but it's a bit more kitchen-sink in its scope.
      - rglover 2y ago
        Thanks for sharing, that's a cool idea. Will have to wrap my head around it a bit more but got me thinking about how to strip vdom.