Clojurians Log v2

Hi! I have read a lot of @hiskennyness articles and code. It is pretty amazing that a single person can build a glitch-free dag model, and make multi-platform ui using it. I do have few questions though: 1. Lets say I use matrix to render a table for which I will dynamically add and remove rows. In react for a scenario like this I would add a index-id key, so that in updating the dom elements, the already existing dom elements can be reused. This is a sort of performance trick. Does matrix do a similar thing? 2. I am looking for an example in which the individual components do data-fetching. Please forgive me in saying "components" - I know that for matrix there is no such thing as a component;l however I still would create different functions that render different types of elements, so for me this is the component. Why I ask for data-fetching? Well, as I can tell all the rendering in matrix is synchronous, so when a cell updates then the dom elements that depend on this cell re-render. But for apps that need to do lots of data fetching, there should be some kind of pattern that makes sense. And I have not seen that. 3. I would like to try out matrix, and I want to do this in a bigger app (just a demo will not help me to much); and so I am thinking about how to use matrix together with my existing reagent app. To use matrix from reagent is simple, as reagent gives me a ref to a dom node, so that can be used to have part of the ui being manage by matrix. The other way I dont know how to do. So basically what I am looking for is getting a ref to a dom element that is created by matrix, which I can manipulate as I like from outside matrix. Thanks a lot!

Thx for the kind words! Re #1: Yes, but we have to do more than supply a key. There is a small API if you will in which we use a certain container and specify a buikder and a key function which can be more flexible. I rarely need it, but it is there. And now we are not nagged by the framework over a three elemet list not having a key. 🙂 Re #2; Having a little trouble understanding this one. Let's home in on "But for apps that need to do lots of data fetching, there should be some kind of pattern that makes sense.". Well, also "Well, as I can tell all the rendering in matrix is synchronous". I do have a couple of examples that go out and pull data from http://FDA.gov when a text field changes, when displays the results. And all that happens asynchronously. Anyway, please expand on this and we'll sort it out. Re #3: Getting the DOM ref from Matrix is part of the MX API, just do not have it handy, and I have been doing Flutter lately. But, yeah, MX always knows the DOM of a MX element. Only general concern is mixing two reactive systems, but I did do a bunch of Reagent one one project and from what I remember it should be doable. Just curious: what role do you see for MX given Reagent is already on the job? Thx for the interest! Funny you came along, I have been thinking of promoting the HTML version of Matrix. Things are a bit quiet in CLJD. Cheers, kt

Wow!! Thanks @hiskennyness I didnt expect an answer; and for sure not so fast!

#1 could you direct me to the right place? To me it is relevant because I believe performance suffers a lot if I dont use that.

#2 The example of the http://fda.gov site would be fantastic!

#3: I believe that the time of reagent is over. (Sorry to be so frank; I still use reagent, and it has been very nice to use). But it was designed before react had functional components. Now it is a sort of mess to deal with.

What I find very difficult to do in reagent is a simple data-loader pattern. So I have person-id 1, and then I want to do async fetch the person with id-1 and then render that with some ui component.

Perhaps I am stupid, and there are patterns that work for that. But I have spent a lot of time and couldnt find nice patterns.

I am following electric, but I havent made a switch to it, and will not use it, because it always requires a server.

I am searching for reactive-ui that can be both only on client in browser, and also used when there is a server around.

Ideally this is the only framework that is needed,

However, the react ecosystem is so huge, that it is very tempting to use libraries from it.

I also doubt that I could ever get glitch-free computations done with reagent.

I wrote an app that uses missionary to have lazy dags.

Right now I can watch part of the dag (so activate it), and forward it to a reagent ui for continuous display.

What I am thinking of doing is using matrix as a middleware beween missionary and the dom.

This saves me the time of writing what matrix did for the dom for missionary.

I have to run out for the rest of the afternoon (EDT) but will try to reply in depth later. Some quick Qs: So you like missionary but want to use the also reactive MX to manage the DOM? Is there sth Missionary does that MX does not, or is it just that you like Missionary and want to use that most of the time? I will find the right repo later, but you are looking for an RxTrak project that is the Todo standard, but treats a to-do as a drug to be checked on http://FDA.gov. Lots of bit rot, btw, so be leery of getting anything to run. 🙂 ps. Yeah, React has gotten quite prescriptive over the years. And it has been a moving target, though last I looked was a few years ago. Back later.

Missionary has resource manangement built into.

It allows me to build reactive functions in a very nice way.

But it does not have anything related to the dom.

It is just one side of the coin.

It also allows discrete and continuous streams.

Whereas matrix only does continuous.

For the dom it does not matter, as when the user is viewing your page, you will always see your page.

Whereas when you do transactions then discrete events matter.

But it is nice to have the two concepts in one library.

Here is the bit in rxTrak that looks up adverse events asynchronously when the "todo" title changes: https://github.com/kennytilton/web-mx-sampler/blob/002433cdc91243e9cc3ebe19db26849cc107f420/src/tiltontec/example/rxtrak/rx_list_item.cljs#L169 Other UI code watches the response property and fires when the response comes in, to display the results. More to come.

OK, the same demo uses the optimization to minimize a UI list rebuilding: https://github.com/kennytilton/web-mx-sampler/blob/002433cdc91243e9cc3ebe19db26849cc107f420/src/tiltontec/example/rxtrak/build.cljs#L132 I think I was just showing off the mechanism...well, I guess even though there would only ever be a hadful of "todos", if we did not optimize and the list rebuilt from scratch we would also re-fetch al the adverse events. Not good.

Thanks a lot @hiskennyness