Raziyeh Mohajer 2020-07-15T06:21:50.465Z

Hello everyone I have a re-frame app and I want to receive input in my forms from the user. If I want to save the input in my re-frame db with each keystroke an event should be dispatched to change the db and it may lock the whole db to change that small field. Is it ok to store input in db or Should I make an atom to save the values that the user enters? What's the best practice for receiving input in re-frame?

kah0ona 2020-07-15T06:30:30.466300Z

hi @raziyehmohajer.rms, I use both ways you describe. Sometimes the performance is ok to use a dispatch, but sometimes it isn’t. What you could always do is this pattern: • store your value in a local atom, that is, an atom inside the component • use :on-blur to do the dispatch to the db • use :on-change to update the local atom #(reset! local-atom (-> % .-target .-value))

kah0ona 2020-07-15T06:32:09.467400Z

It kind of depends if a lot is subscribing to your change as well. If you save something to the db and not much is listening to that value, I suspect it will perform well to just do a direct dispatch and listen to the db’s value.

kah0ona 2020-07-15T06:33:11.468100Z

But if some complex subscription is re-computed on each keystroke, you might end up with sluggish UI.

Raziyeh Mohajer 2020-07-15T06:42:18.472400Z

My problem is I want to check validity of the inputs before sending them to backend and also show the user if some other user changed that value and because of this I can't make a local atom in my component because other events should be able to change that local atom. But Also I think the logic on subscription is a little complex and I scare that it will cause, like you said, sluggish UI

kah0ona 2020-07-15T06:43:35.472800Z

ah so it’s like a multi-user concurrent editing form kind of thing?

kah0ona 2020-07-15T06:43:47.473300Z

to be honest, it’s all quite performant

Raziyeh Mohajer 2020-07-15T06:44:08.473900Z


kah0ona 2020-07-15T06:44:24.474400Z

I have some troubles when there’s a search/filter kind of logic (ie. combo-box where you search things), that re-renders large tables with complex cells, then it can become a bit sluggish

kah0ona 2020-07-15T06:44:41.474800Z

hard to tell from here if this will be problematic for your case

kah0ona 2020-07-15T06:46:06.476200Z

although; you could probably just try it, the ‘re-frame way’ that is. Shouldn’t be that hard to spike/try it maybe? Because it’s all nicely decoupled; your component can just shoot events, other users/things can shoot events, you don’t have to intertwine any code

kah0ona 2020-07-15T07:53:58.482700Z

Sorry, had a call. Well i mean using dispatch on each key-stroke, and not use a local atom.

Raziyeh Mohajer 2020-07-15T09:58:24.485300Z

aha thanks alot

kah0ona 2020-07-15T06:46:51.477100Z

well; that’s what I would do. To me it does seem that the re-frame way fits here… gut-feeling. Not per se because of the performance aspect, but because of the decoupling/architectural aspects

Raziyeh Mohajer 2020-07-15T06:50:56.477200Z

what do you mean by 're-frame way'?

Raziyeh Mohajer 2020-07-15T06:52:07.477400Z


Raziyeh Mohajer 2020-07-15T06:57:30.478700Z

@kah0ona I don't know what you mean by the re-frame way. Does re-frame have something special for this kind of situation?

wegi 2020-07-15T07:32:50.480500Z

I am not sure, whether this is a re-frame problem: When I include

[:link {:href "/bootstrap/css/bootstrap.min.css" :rel "stylesheet"}]
[:script {:src "/bootstrap/js/bootstrap.min.js" :type "text/javascript"}]
in my views, the bootstrap.min.js is never loaded, the .css is. Did I misconfigure something about re-frame or could this rather be a shadow-cljs problem?

p-himik 2020-07-15T07:38:40.480600Z

IIRC adding <script> tags dynamically (or at least, with React) will not get them executed.

p-himik 2020-07-15T07:39:44.480800Z

Regarding "whether this is a re-frame problem" - if you don't have subscribe or dispatch in your problem definition, then most likely it isn't.

wegi 2020-07-15T07:44:02.481Z

Oh, the tags not being executed should be the problem. Is there any usefull pattern for doing it? (A little of topic). I would like to execute the js dynamically on some views only.

beders 2020-07-15T07:46:17.481500Z

you need to interact with the DOM directly and add a script element

wegi 2020-07-15T07:47:07.481700Z

Thank you both :thumbsup:

beders 2020-07-15T07:47:17.481900Z

a DOM diffing system like react is not ideal for this (as - for example - removing the script tag wouldn't remove the code you loaded)

beders 2020-07-15T07:47:40.482100Z

i.e. the loaded java script is not actually part of the DOM

beders 2020-07-15T07:47:50.482300Z

but I digress

wegi 2020-07-15T07:48:26.482500Z

Yeah, I am aware, that I am not asking for good practice advice here. 🙂 I probably will choose another solution.

kah0ona 2020-07-15T07:53:58.482700Z

Sorry, had a call. Well i mean using dispatch on each key-stroke, and not use a local atom.

wegi 2020-07-15T08:58:05.484700Z

Another question: Does anyone of you use something like devcards with re-frame? Does it function well?

Raziyeh Mohajer 2020-07-15T09:58:24.485300Z

aha thanks alot

Lu 2020-07-15T11:44:53.488700Z

@wegi the way to get around the single atom problem is to have your components get all the data through the props rather than subscribing within the functions.. I know some say that in a re-frame context each component should get its own data, but this approach doesn’t play nicely with devcards

wegi 2020-07-15T11:46:44.491500Z

Yeah, that is what I noticed as well. Additionally I would like to use a routing library like reitit, which also dispatches events, when certain views are entered. This complicates devcards use further

Lu 2020-07-15T11:49:14.493200Z

Yeah though I am using devcards to test individual small components.. I’m not rendering full views, as they add more complexity like in your example