Fork me on GitHub
#hyperfiddle
<
2023-12-18
>
joshcho03:12:44

I am having trouble updating the content of ui/input while I am focused on it. When the input becomes "\lorem", I want to replace the input with "Lorem ipsum dolor sit amet, consectetur adipiscing elit.".

(let [!txt (atom "")
      txt  (e/watch !txt)]
  (div (text txt))
  (ui/input
   txt
   (e/fn [v]
     (if (= v "\\lorem")
       (reset! !txt "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
       (reset! !txt v)))))
The change propagates only after I focus away from the input. How would I solve this issue?

xificurC08:12:52

The UI controls do this on purpose, otherwise a concurrent update (e.g. from another user) could flow in as you're typing and make a mess

joshcho10:12:52

I see. Is there a way to resolve this problem? This is a core feature in my app

xificurC10:12:48

if the strategy bundled in ui controls doesn't work for you you can roll your own with dom/input

joshcho10:12:45

ah right right

Dustin Getz16:12:40

Differential Electric – very early sneak peak of streaming dom rendering over a large collection. Scenario is an industrial robot (shipyard crane) which we are observing live by tailing a log file. The robot runs at 20hz which the UI tails in realtime. The tracks are a plot of various record fields from the robot log, if you look closely you can see they are waves because the robot is moving back and forth. The tracks here are rendered in SVG and there are 1500 SVG elements being maintained (which is the soft limit according to google).

9
🙌 5
5
1
1
nivekuil21:12:55

what is that fps monitor?

nivekuil21:12:24

what if you weren't streaming logs but something mutable?

Dustin Getz21:12:15

fps display is chrome

👀 1
Dustin Getz21:12:16

what is the mutable thing you have in mind to stream?

nivekuil22:12:15

like if you're watching files instead of tailing logs, does differential have any impact on how you'd do it?

Dustin Getz22:12:55

you’ll need to snapshot right? values over network

nivekuil22:12:57

say you knew the memory layout of the robot, to read the state you map the memory into a struct, and then how does it go over to electric? have to write your own diffing protocol still (to do it efficiently) or does electric have an opinion on that

Dustin Getz22:12:47

in this case a crane connector is translating the hardware structs and appending to a log; the structs arrive over a socket, the crane firmware is responsible for snapshotting the proper memory offset and writing to socket

nivekuil22:12:02

so in your case you start with a discrete flow (socket), pre-diffed? what if you started with a continuous flow (file) too large to send over the network, does differential do/prefer anything special?

nivekuil22:12:12

i'm guessing you'd still have to manually partition the flow into smaller flows for more efficient reactivity, differential doesn't help with that?

Dustin Getz14:12:21

yes, you'll need to at least inject a diffing keyfn, i.e. imagine e/diff-by (i.e. the first stage of e/for-by)

Dustin Getz14:12:33

if you are ingesting a batch data source like a file or sql resultset you probably just want e/for-by , which under Differential does the same thing as it did before just fancier internals

Dustin Getz16:12:46

in this demo, halfway through when we speed up the playback rate, you can see the DOM stream in at the edges

🔥 15
Dustin Getz17:12:34

One more, here we stream in 8k dom nodes basically instantly (note there are 3 tracks, the first one is faint)

denik22:12:46

is this dev or prod? perf is very different local vs with network latency

Dustin Getz22:12:00

this app runs on a LAN, but to your broader question, there aren’t any round trips so if network adds delay i don’t expect we would have a way to notice

denik04:12:47

makes sense

denik06:12:59

would it be more efficient to render all dom nodes at once as react tends to do?

henrik07:12:30

I don’t know if every dom node corresponds to a network event or not, and whether they are logically a sequence, but if there are 8000 network events, the network latency kind of only applies to the first one. The first event to arrive will be delayed by 10/20/40/whatever ms, but after that they would arrive in roughly the same frequency as they were sent. Network latency is more of an “offset” than anything, when talking about bursts of events. Given a relatively stable internet connection. This changes if each requires an ack, which isn’t the case here.

avocade08:12:09

Can't wait

denik17:12:46

if the payload is streamed

Dustin Getz17:12:27

this demo is implemented with incseq actually, incseq is the work horse of electric v3, the rest is mostly just syntax and upgrading the electric runtime to use incseq operators everywhere instead of vanilla missionary

🚀 1
denik17:12:15

very exciting!