Probably possible, but I don’t know about feasible. The caveat is that once you include ClojureScript, you get the overhead of Clojure/Closure in there (much of it is the immutable data structures). This will come out pretty much as +/-0 vs a JS app for non-trivial examples, since it usually takes care of a bunch of stuff you’d use third-party libs for in JS. But while both are in there, you’ll have overhead.

I believe clojurescript adds ~400kb gzipped, but I might be mistaken?

cljs adds about 35kb gzipped after :advanced optimizations

baseline, obviously goes higher if you use more stuff

definitely not 400kb though

Be careful with any pprints left in, that can add an unexpected chunk.

Supposing I’m fine with the overhead, how can this migration work? Can clojurescript use React components written in JS(X)? Or, can JS(X) React components use components transpiled from clojurescript? Which embeds which? How do I start? 🙂

The various React wrappers typically have helper functions for you to import React classes. #reagent has adapt-react-class, for example: <https://github.com/reagent-project/reagent/blob/bd8603dce8e675fd4fe4f8c841c4369e4e39421d/src/reagent/core.cljs#L53>

#fulcro has react-factory and react-input-factory: https://github.com/fulcrologic/fulcro/blob/d67c07b4b55be1119522c1954b33bc819c8c9f67/src/main/com/fulcrologic/fulcro/algorithms/react_interop.cljc#L7I

I think you’ll generally have a better time importing your existing codebase into CLJS than the other way around.

A starting point might be to just pick #reagent for now (since it’s quick to get started, even though #fulcro and #re-frame provides a lot of additional value for those fully in the CLJS ecosystem), look into how you can expose your existing components as a big fat lib, get yourself #shadow-cljs set up, import the lib, and mount it with #reagent, and see if it renders as expected. Then you can get started rewriting the components from the root up.

Sounds like a good plan. Thanks @henrik.

Thanks! Any specific reason? Say if compared to tachyons, bulma and bootstrap?

What is the advantage related to custom ui components and maintainability?

https://www.youtube.com/watch?v=J_7_mnFSLDg captures it pretty good

"API for your design system"

I will watch that.

makes a lot of sense to me

Did you ever have a look at tachyons also?

I did .. pretty similar overall

It just occurred to me recently that clojurish applications might be better served by more niche css systems.. And not your usual boktstram material ui, semantic ui etc.

But there is really not a lot of discussion on this topic.

I used some CSS-in-CLJS for a while but really wouldn't recommend it anymore https://github.com/thheller/shadow/wiki/shadow.markup

I though it was a good idea for a while but it really isn't 😛

https://github.com/clj-commons/cljss

You mean this kind of library?

yeah. similar concept. any kind of CSS-in-JS really.

Why is this not the way to go?

it might be for you ... it is no longer for me. too easy to be inconsistent ... too hard to name every single element

Essentially css in cljs is sort of abolishing css philosophy

If all selectors are unique to only one element

Then this is not css anymore

At least this is what I think it ends up with

dunno that was the part I like the most .. no need to worry about selectors conflicting with each other or cascade messing with your elements

Yes

also easier to change elements without worrying about breaking something else

Exactly

it is definitely better than plain CSS

This is why it might be the ideal match for reframe apps.

but systems like tailwind solve it in a better way IMHO

Ok

Thanks for that.

just need to get past the annoyance of rather large class lists

that kinda looks a bit shit and I still don't like that part 😛

First brackets

Now class lists

Hahaah

:div.flex-1.bg-white.text-gray-800.font-bold.border-r.border-gray-300.rounded-tl-sm.cursor-pointer.px-2.py-2

that's pretty meh 😛

OMG

I'm trying garden

Still trying to figure out how it works xD

But this whole list could be moved to a cljs-css function

watch the talk ... he explains why this really is not an issue

it just looks bad but in practice it isn't

Ok

you mean the button example?

from the talk

no, components

but yeah he used button as an example I think

Thanks Thomas!

@thheller do you have any good reference project to get started with tailwindcss togher with shadow-cljs? I had a look at https://github.com/yannvanhalewyn/boyscout and read the official tailwind-docs (used shadow-cljs before) 🙂 .

I'm just using tailwind exactly like the docs tell you to

I see. Thanks!

Let me pitch you my new startup: PPaaS (pprint as a service).

$1/call

or $0.1 per kb printed

Can you type an example of how you want one column to transform into two column?

You don't need two divs if you can use flex-wrap.

@henrik lets say I have a list [l1 l2 l3 l4 l5 l6] what I want to have is

l1 l3 |                   l2  l4 |
l2 l4 | --after scroll--> l3  l5 |          

@U2FRKM4TW I cant see how flex-wrap could me for this :G

Oh, after the example I see what you mean. I have no idea if that can be implemented in plain CSS. And to be honest, I really doubt that that would be a good UX.

Is that question for me 🙂

yep

Ah, I understand the question. If the promise never resolved it will be suspended forever.

Whenever user types something to input box, filter the idsin the re-frame db based on the input, assuming ids coming from a re-frame subs this should work. (Better debounce the filtering instead of filtering on every character typed.)

thanks i will look into it 🙂

I was thinking of doing something like a set/intersection, but this might be a good one too

@UFHB0T69M hmmm, so are you suggesting creating a filter component? that's a pretty cool idea!

yep, good suggestion! works well. thanks again! 🙂