Fork me on GitHub
#clojurescript
<
2022-03-15
>
jaide04:03:26

Is there a way to force reagent to render particular prop names? Using reagent on my server and aiming to use alpine for client-side. However, [:div {:x-data "{ open: true }"}] becomes <div xdata="{ open: true }" /> which does not seem to work

alex05:03:25

I seem to recall you can use the string "x-data" to ensure that the prop key isn't transformed. Can you give that a try?

p-himik07:03:05

#reagent would be better suited. And while using "x-data" will work, note that such attributes are not standard and should not be used unless alpine can't work otherwise. You should be using data attributes instead: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes. Data attributes work just fine in Reagent as keywords, no need to use strings.

jaide13:03:20

Those attrs are required for alpine to work

Rand_Om19:03:29

Hey there. I’m completely new to clojurescript, coming from Elm. I don’t really know anything about the ecosystem so I’m not quite sure where to start. Since there are quite some frameworks and libraries to write spa webapps (lots of react bindings), I’m wondering which ones are taken most seriously. Also, I plan to build a highly interactive single page webapp (interactive graphs and animations). Which ones would fit such a use case best?

p-himik20:03:06

A good place to start is https://clojurescript.org/guides/quick-start You can find a lot of other resources online, of varying quality. But given that you probably are already rather comfortable with web development, you should be just fine even if you stumble upon something not that great. Reagent is probably the most used library right now. Interactive graphs and animations can be done there simply because they can be done in React. Although with animations in particular, I'd try to do as much as possible using regular CSS.

p-himik20:03:20

If you do decide to go with Reagent, it has a lot of examples and pretty much all use cases documented in its repo - I'd definitely recommend going through them all.

p-himik20:03:17

You will also need to settle on a build tool. My personal favorite is shadow-cljs due to how frictionless the process has always been for me, especially when working with NPM dependencies.

👍 2
Rand_Om20:03:51

Nice, this is great stuff. Thanks 🙏

👍 1
mruzekw20:03:41

The two well-known frontend frameworks are: • https://github.com/day8/re-frame (uses Reagent), close to Elm architecture • https://github.com/fulcrologic/fulcro, closer to Facebook's Relay +1 for shadow-cljs

👍 2
dgb2320:03:40

I did a quite animation heavy thing in reframe/reagent a while ago (including interactive SVG), went well. I’m more into fulcro now though. Shadowcljs is great.

👍 1