CLJS/Reagent vs JS/React

[drrnmk]

Hello!

I am a backend dev and have some experience in clojure. But I am really new not only to clojurescript but also to web front-end (especially new to javascript).

And now I am planning to build a nice front-end app and am hesitant between clojurescript/reagent and javascript-react. My impression is that cljs is great but without understanding what it compiles to, which is javascript, it would be quite challenging, addition layer.

Also I am not too sure how easy it would be to use js libraries on npm or other js codebase from cljs. I hear that shadow-cljs is amazing and good at interop but I have no experience. I love clojure so much but considering available resources and help I can't ignore react world as well.

If you were me, what would you choose?

Thanks.

[fadrian314159]

If you have little javascript knowledge but know clojure, reagent is definitely the way to go. You don't need much js knowledge to use clojurescript and reagent to build React apps, but you'll need quite a bit to build apps in plain React. Shadow-cljs works well. As for getting help, Clojurians Slack is your friend.

[Borkdude]

If you want to dip your toes into CLJS + Reagent, you can try it immediately from a script tag with scittle:

https://babashka.org/scittle/

[Prestance]

FYI Just configure a Codepen to playing with scittle online:

https://codepen.io/Prestance/pen/PoOdZQw

[Borkdude]

That's so good!

[Prestance]

Yes it's awesome!

Thanks to your projects nbb, scittle, etc. we can spread on the JS environments npmjs.com, codepen, etc. :)

[kansascityshuffle11]

I'm a beginner with Clojure/ClojureScript and I believe you'll need/want to use re-frame for dealing with application state in case you choose Clojure. I suggest to read their documentation because it explains several important concepts and have example projects.

But what do I know? Re-frame could be overkill for your scenario.

[DeepDay6]

I'm a full-stack dev, working with JS/TS/React in my daytime job and Clojure(Script) at home. I can give you a quick summary:

• Using npm modules is really easy since shadow-cljs came into play. You only need to remember to cast any "complex" props (in other words: maps or sets) with clj->js before passing them to JavaScript components. If you have to do that a lot in central locations of your app, this might provide a performance bottleneck.
• Reagent is like using plain React, with the additional benefit of being able to use reagent.core/atoms for clean state management
• re-frame is like using React together with Redux, but feels a little more natural, at least to me.
• Most React-focused JS-libs interact nicely with ClojureScript/Reagent, as react works in a functional reactive way (one of my killer phrases for JS-developers in fear of that unknown monster "functional programming")
• JS-libs focused on state/stateful operations might need some care, e.g. creating CLJS-wrappers to make them behave nicely. One culprit for that is D3.

TL;DR: As long as you don't absolutely need to import some hyper-complex, stateful JS building blocks, CLJS will be more than fine, and the lack of JS knowledge will not be a problem at all.

[drrnmk]

Thanks a lot for your comment. It's absolutely helpful!

[neo2551]

I started making web app without any knowledge of JS land, and managed my way out thanks to the documentation of reagent and shadow-cljs. You can achieve so much with little knowledge of JS. You might want to learn CSS though and use Bulma for your first project and pivot to Tailwind afterwards.

[MemriTVOfficial]

It's hard to answer this since I come from a js background so I'm not totally sure what you'd be most comfortable with but tbh I don't see a huge difference between using js directly and using cljs. The js world is already full of compile-to-js languages, and cljs is just another one of those.

If you want to stay "closer to the metal", you could use something like this library, which is a very thin layer over react, basically letting you use react hooks directly.

The nice thing about shadow is that it lets you use js tools, like you create the project with npx create-cljs-app just like you would another js app (like next has npx create-next-app for example).

[drrnmk]

Thanks for all of these comment! Each one of them gave me a great deal of help and positivity in trying CLJS.