How to Delve into ClojureScript Ecosystem?

[Ari]

Over the next couple of weeks, I’ll have some downtime. I’d like to invest that time in learning/exploring ClojureScript.

Since I’m comfortable with the JavaScript ecosystem, I’m particularly interested in learning how I may leverage ClojureScript to improve the development experience. To that end, I’d appreciate guidance on:

• What is the recommended build tool(s)? Are there any books/videos that may help with learning the tool(s)?
• How may I leverage React & React Hooks? I understand that reagent and re-frame are essentially the defacto standards. Do/can they leverage React Hooks? Are there means to directly use React Hooks with CLJS render libraries?
• How may a leverage CSS libraries like TailwindCSS?

Thanks!

[gnarroway]

shadow-cljs seems to be the current build tool of choice. It is really seamless and the documentation and support is great.

I believe reagent has the most market share but I have enjoyed using rum for a small project.

For react hooks etc, the most minimal react wrapper is probably hx. When I tried it I found it quite a bit more work than rum, probably because it is not opinionated in any way. As common usage patterns become documented and hooks usage becomes more widespread, I think adoption will become easier.

I used to write large apps in javascript react and have seen a large shift away from do-it-yourself state management (like redux and friends) towards declarative approaches that handle your state and fetching for you (eg graphql with apollo or relay). I am not sure what the cljs story in this space is, but I would be hesitant to write a large app without it. The data driven approach should be a natural fit for a clojure developer.

[mvarela]

For the second part of your post, probably Fulcro would be worth looking at.

[myguidingstar]

Beware of Reagent and Re-frame. They may be popular but people don’t agree on how to construct a largish applications. The server-client communication story is poor, you have to make lots of decision (graphql vs rest etc) and implementation. Fulcro is a battery-included alternative with well-written documentation.
TailwindCSS is quite independent due to its functional nature. You don’t have to worry about its integration at all.

[tkjone]

Hey!

What is the recommended build tool(s)? Are there any books/videos that may help with learning the tool(s)?

Clojure and ClojureScript being 95% the same so you are going to see overlap in the build tools. There is:

• deps.edn, lein and boot (I recommend deps.edn)

and to enable a modern, CLJS development environment you use one of the above in combination with one of the below:

• figwheel.main and shadowcljs (I use figwheel, but they are both great)

Here is a post that goes over the topic of starting a CLJS app

How may I leverage React & React Hooks? I understand that reagent and re-frame are essentially the defacto standards. Do/can they leverage React Hooks? Are there means to directly use React Hooks with CLJS render libraries?

To use React there are wrapper libraries available. The most commonly used: Fulcro and Reagent.

Reagent cannot currently leverage Hooks, but there are ways around this. Having said this, my recommendation is to give Reagent a try with it’s approach to state management.

To use hooks directly, look to HX.

Having said this, if your goal is to truly just practice interop, why not just use React without a wrapper library?

Either way, if interop is your jam you will want to checkout CLJS 30 for ideas on how interop works in small projects (should save you a ton of research time) and also the CLJS webpack guide
which shows you how to use the NPM ecosystem.

How may a leverage CSS libraries like TailwindCSS?

This is the same as you might do in JS land - Add a link tag to your index.html and you’re GTG. There are more “interesting” ways to do things, but it seems like you want to learn the basics, so i recommend keeping it simple. To see this approach, again, checkout the CLJS from scratch post.

Hope this helps!

RE: Comments around large apps

I don’t know if this applies to you because your question is in the context of a side project, but if there is concern around structuring large apps, the Reagent story is not different from the React story. Neither of them tell you how to scale or structure state as you scale, so don’t worry about that. When you get there, there are solutions available…just like most libraries and frameworks.

Point being, have fun on the journey and you will be able to support small, medium and large applications without issue. (The asterisk here is that once you get to a place where this matters there is rarely a one size fits all solution… )