react

Roman Liutikov 2023-02-10T11:15:24.149019Z

Has anyone played more or less seriously with SolidJS? I spent some time recently learning it a bit more. The model of reactive primitives and tracking is quite similar to Reagent's reactions, I'd say. It's definitely a simplification over React Hooks, but a downside for me is that this granular reactivity requires more effort from a developer. The API surface is also quite large I'd say, just to account for all possible use cases for consuming reactions.

Roman Liutikov 2023-02-10T16:37:25.687189Z

I had to do it: https://github.com/roman01la/solid-cljs It's not clear yet how well Solid integrates with cljs, especially with immutable data, but so far so good

👀 1
lilactown 2023-02-10T19:39:27.249219Z

@kloud and I were playing with it over in #solid awhile ago

2023-02-11T10:12:44.884279Z

Perhaps just nuke the DOM 🙂 Paired with error boundaries to isolate to parts of the subtree and to render error states it might work ok in practice.

lilactown 2023-02-11T15:53:12.485569Z

it's a little harder to do that with incremental dom

lilactown 2023-02-11T15:53:32.627739Z

it's an interesting problem, I'm going to keep playing with it. I want to investigate how solid works more and maybe that's a better way to go 😄

👍 1
2023-02-10T20:27:34.436959Z

Hi Will, I saw you've been working on flex, that's basically solid's signals in pure cljc, right? Pretty cool stuff!

Roman Liutikov 2023-02-10T20:29:38.338029Z

Oh, too bad I didn’t know about that channel :(

Roman Liutikov 2023-02-10T20:30:38.888229Z

@kloud how’s it going? The name suggests you are THAT Jakub :)

2023-02-10T20:31:52.530239Z

Hi @roman01la, yup nice to see you again. There are still some open questions left, curious what you come up with in your experiments.

Roman Liutikov 2023-02-10T20:32:40.122559Z

I guess the hard part is granular reactivity and Clojure’s data structures?

2023-02-10T20:34:22.920509Z

That is one part, I think wrapping it and doing reconciliation similar to how solid does it with createStore should be fairly convenient for developer, there is some perf cost, but should be still decently performant.

👍 1
Roman Liutikov 2023-02-10T20:34:56.815889Z

I haven’t spent much time with Solid yet, so far it feels weird to me, granular reactivity requires additional effort from a developer and I’m not sure I’m willing to take it, being spoiled by react :/

2023-02-10T20:35:33.262929Z

The other part is rendering. One approach is hyperscript, which is pretty straigforward similar to React's createElement wrappers. But that is leaving a lot of performance on the table.

Roman Liutikov 2023-02-10T20:36:46.101049Z

I’m curious how much of a difference it is between vanilla Solid and hypescript one for example? Immutable data should contribute to perf as well

2023-02-10T20:38:55.631579Z

Lot of solid's performance comes from the JSX compilation. Unfortunately, that can't be just wrapped reused and wrapped in clojurescript. It should be possible to re-implement via macros, but that would need extra effort. One cool option is using with Squint which can generate JSX and can be processed by standard JS tooling.

🤔 1
Roman Liutikov 2023-02-10T20:39:59.946649Z

Oh, for reconciliation, according to the docs it actually diffs data, is that correct? How would that work with non native JS data structures?

Roman Liutikov 2023-02-10T20:42:58.686299Z

I guess what you are saying about JSX compiler is that performance in Solid depends on a level of granularity at which it wraps signals? ie the more dom stuff is wrapped in a function, the more expensive rendering is gonna be, because everything in a function will rerun

2023-02-10T20:43:02.947149Z

I believe when it reconciles it just compares references, which should work well with maps.

Roman Liutikov 2023-02-10T20:45:04.041899Z

The signals model reminds me of Reagents reactions btw, I guess they are all similar in a way, MobX for example falls in the same category

2023-02-10T20:45:58.923449Z

The JSX compiler hoists the static parts and concatenates them in a string template, then just clones the node which is super fast. In the https://playground.solidjs.com/ you can see the output, it is pretty clever how it is done.

🤔 1
2023-02-10T20:48:12.434199Z

Exactly, both are reactivity systems. One can subscribe to solid's signals in react with hooks, or the other way around one can subscribe to re-frame/ratoms from solid components.

Roman Liutikov 2023-02-10T20:57:50.827529Z

The template part is interesting indeed

➕ 1
2023-02-10T21:02:12.010069Z

That's the benefit of the fine-grained reactivity, since it does not need to do diffs like react, it can create the DOM once and then just make updates to the "holes".

lilactown 2023-02-10T21:14:18.113849Z

Yeah, https://github.com/lilactown/flex is my take on a clojure-first reactive signal library. Similar to reagent, it relies on dereference to subscribe rather than trapping access to keys

lilactown 2023-02-10T21:15:34.060789Z

I think the novel thing about solid is the compilation of JSX into updates. I have another library, https://github.com/lilactown/dom that I'm experimenting with that and combining it with flex. still WIP

🙌 2
2023-02-10T21:41:07.578899Z

Looks like a neat combo!

2023-02-10T21:41:09.990629Z

Since it has no vdom how does it behave when items in a list are re-ordered? Does it re-render them like non-keyed approaches?

lilactown 2023-02-11T00:27:00.932849Z

you can attach keys to elements, but I'm not sure how it actually works since it doesn't keep a VDOM in memory

lilactown 2023-02-11T00:27:10.750139Z

it might just store the info on the DOM node

lilactown 2023-02-11T00:28:19.859739Z

the real open question I have rn is how to do error handling... since incremental-dom mutates elements directly as you run your patch, if you have error in your logic that throws an exception, you end up in a partial updated state which is not good