re-frame 2020-05-04 | Slack Archive

rberger06:05:22

Is there any nice, yet easy to use UI Component libraries for re-frame other than re-com? I like re-com but it warns that its not suitable for Mobile web apps. Also it seems to be tied to Bootstrap. There seems to be many css/component libraries out there but mostly abandoned as far as I can tell. Ideally would like something that allows non-clojure folks with Webdesign/CSS backgrounds to modify the look and feel.

p-himik07:05:20

I think the only kind of libraries that aren't easy to use with Reagent (and, by extension, with re-frame) are the ones that rely on hooks used by thir user. And even then it's possible to use them - you just have to write some boilerplate.

rberger07:05:30

@p-himik Do you have any to recommend?

p-himik07:05:45

I've tried many, ended up using mostly https://material-ui.com/. The one thing that won me over was the number input component that can handle scientific notation and any bad input I could feed it.

pwojnowski07:05:45

Do you write adapters to use the components or just use them directly?

p-himik07:05:38

I have a macro defcomponent that just calls reagent.core/as-element and does some props preprocessing that I like. And then I just do something like

(defcomponent button [{:keys [clone component] :as props} & children]
  Button)

where Button comes from (:require ["@material-ui/core/Button" :default Button]). I do it for every actually used component explicitly to make sure that nothing extra is getting bundled in. And the arguments are there just for the documentation purposes.

p-himik07:05:07

Of course, nothing prevents one from just using [:> Button {...} ...].

pwojnowski08:05:49

Thanks for clarification! :-)

rberger07:05:10

I was looking at that, but I couldn’t really figure out how to use it. I am hoping for something that is a clojurescript UI component library

Jag Gunawardana09:05:35

Would also be interested in a component library that played ball with clojurescript and didn’t come with too much baggage. Has any one tried https://awesomeopensource.com/project/madvas/cljs-react-material-ui or https://github.com/priornix/antizer? I started using something lightweight like a css only lib e.g. Bulma, but can’t help feeling like I am rebuilding/inventing the wheel a bit.

p-himik09:05:40

They're both just wrappers. The first one is not a great one at that. It's better to just use Material-UI manually with Reagent.

p-himik09:05:25

The second one has the exact same issues.

p-himik09:05:52

They both use CLJSJS, they both pollute the global scope by doing that, and they both prevent DCE.

kenny14:05:44

I see that https://github.com/day8/re-frame/issues/164 issue on showing event stack frames was closed. This makes me a little sad since those error message are a bit frustrating. I'm typically able to figure out what the issue is just knowing the event name, so I understand where the "nice-to-have" mentality is coming from. It does make debugging exceptions for beginners harder, which is unfortunate. I was curious about thoughts on one of the open questions at the end. > what to do about effects like “:dispatch” and “:dispatch-later” etc? They shouldn’t record source code coordinates, they should instead record the event which triggered them. Were there ever any ideas thrown around of how to solve this?

Wilson Velez15:05:29

Hi, can someone point me a good example/demo/project that show me how to test a re-frame application?

victorb07:05:31

I'm guessing you've seen https://github.com/day8/re-frame/blob/master/docs/Testing.md and https://github.com/Day8/re-frame-test already? In general, I try to keep the usage of re-frame to bare essentials and split everything possible out in separate functions, then test those normally with the regular test utils from clojure

Wilson Velez12:05:29

thanks @UEJ5FMR6K, I started from there, I was just curious about how people actually test re-frame/reagent in practice, what tools they use…karma or not , kaocha…, how test react …etc

victorb13:05:15

ourselves we're just using figwheels auto-test in dev, kaocha (+ chrome-headless) to run tests on CircleCI and not testing anything touching reagent/re-frame but rather the functions my components/handlers are using. Then E2E tests on top with Selenium

Wilson Velez14:05:32

@UEJ5FMR6K, thank you very much

👌 4

Wilson Velez15:05:56

or give me some tips were to start looking and were not….thanks

nprbst18:05:25

@wvelezva I’m a noob, but I found this article by the #juxt folks useful... https://juxt.pro/blog/posts/cljs-apps.html

👍 4

Wilson Velez18:05:31

thanks, I will take a look

2020-05-04

Channels