Fork me on GitHub
#clojurescript
<
2019-12-10
>
Filipe Silva01:12:25

Last time there was a longer discussion about it, using Core async with this helper was the outcome

Noel Llevares02:12:22

Is it possible/feasible to migrate an existing React app to Clojurescript component-by-component? Rewriting the whole app isn’t feasible for this project but is it possible to do it piece-by-piece?

henrik07:12:31

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.

Robin Jakobsson10:12:02

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

thheller10:12:07

cljs adds about 35kb gzipped after :advanced optimizations

👍 4
thheller10:12:25

baseline, obviously goes higher if you use more stuff

thheller10:12:37

definitely not 400kb though

henrik11:12:40

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

Noel Llevares13:12:48

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? 🙂

henrik14:12:55

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>

henrik14:12:33

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

henrik14:12:09

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.

Noel Llevares14:12:39

Sounds like a good plan. Thanks @henrik.

👍 4
awb9915:12:46

Does anyone know best practice css with clojurescript / reagent / reframe? If I want to avoid producing unmaintainable css in the future, what would be a good clojurish approach?

thheller15:12:01

I'd recommend using tailwind css.

✔️ 12
awb9915:12:26

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

awb9915:12:19

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

thheller15:12:45

"API for your design system"

awb9915:12:47

I will watch that.

thheller15:12:52

makes a lot of sense to me

awb9915:12:05

Did you ever have a look at tachyons also?

thheller15:12:33

I did .. pretty similar overall

awb9915:12:05

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.

awb9915:12:24

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

thheller15:12:15

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

thheller15:12:25

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

awb9915:12:23

You mean this kind of library?

thheller15:12:20

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

awb9915:12:40

Why is this not the way to go?

thheller15:12:33

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

awb9915:12:43

Essentially css in cljs is sort of abolishing css philosophy

awb9915:12:19

If all selectors are unique to only one element

awb9915:12:29

Then this is not css anymore

awb9915:12:02

At least this is what I think it ends up with

thheller15:12:09

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

thheller15:12:19

also easier to change elements without worrying about breaking something else

thheller15:12:41

it is definitely better than plain CSS

awb9915:12:52

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

thheller15:12:56

but systems like tailwind solve it in a better way IMHO

awb9915:12:09

Thanks for that.

thheller15:12:20

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

thheller15:12:48

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

awb9915:12:02

First brackets

awb9915:12:09

Now class lists

thheller15:12:39

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

thheller15:12:52

that's pretty meh 😛

nmkip15:12:32

I'm trying garden

nmkip15:12:38

Still trying to figure out how it works xD

awb9915:12:50

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

thheller15:12:20

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

thheller15:12:26

it just looks bad but in practice it isn't

nmkip15:12:43

you mean the button example?

nmkip15:12:49

from the talk

thheller15:12:25

no, components

thheller15:12:46

but yeah he used button as an example I think

awb9915:12:48

Thanks Thomas!

dangercoder18:12:35

@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) 🙂 .

thheller18:12:48

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

dangercoder18:12:34

I see. Thanks!

victorb15:12:22

Comment from another thread in here: > Be careful with any pprints left in, that can add an unexpected chunk I've seen this in my bundles as well. Anyone know a lightweight alternative for rendering data structures in a dev-friendly way that doesn't add as much to the bundle size?

thheller15:12:00

fipp is a bit smaller overall but not by too much

victorb15:12:06

@thheller ah, seems faster too so that's a nice benefit as well. Thanks for the rec

Derek Passen15:12:57

We moved a dev-only pprint to a tap> call

victorb15:12:54

@dpassen1 I'm not sure what tap> refers to, sorry. Also, the only remaining pprint is for devtools we have use for in production as well

henrik15:12:03

Create a /pprint API endpoint and send it to the server/return as string? 🙂

victorb15:12:26

@henrik heh, interesting idea! Clojure is not used on the backend though 😕

henrik15:12:38

Microservice time!

henrik15:12:55

Nanoservice

victorb15:12:25

hah, more like Femtoservice! Yeah, bit early for that, maybe in the future

henrik15:12:35

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

victorb15:12:09

or $0.1 per kb printed

ec18:12:14

I have a long-ass list and everybody have wide-screens, how can I have 2 divs in parallel and 1 scrollbar and 2nd divs first item is always the item after the first divs last item. Does that makes sense? Do I need to calculate is this item showing up in the first div for every item I have to make this work?

henrik20:12:22

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

p-himik07:12:48

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

ec16:12:25

@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 |          

ec16:12:53

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

p-himik16:12:43

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.

drewverlee18:12:57

Anyone have a good way to diagnosis why a react suspense function would only ever return the fallback component and never the main one? I see no console errors.

lilactown19:12:33

does the promise ever resolve?

drewverlee19:12:06

Is that question for me 🙂

drewverlee19:12:53

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

Aleks Abla20:12:58

hi everyone, i have a list of IDs in a [:select] I am populating them from the app-db through a sub via for loop [:div [:select {:multiple "multiple" } (for [id ids] [:option {:key id} (str id)])]]

Aleks Abla20:12:38

I am trying to implement a search bar that would filter matching ID numbers. It would look something like this. can not figure out the ID search functionality. I tried :on-change #(reset! ids (-> % .-target .-value)) but not luck. using re-frame.

ec20:12:50

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.)

Aleks Abla21:12:22

thanks i will look into it 🙂

Aleks Abla21:12:51

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

Aleks Abla21:12:04

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

Aleks Abla22:12:57

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

skykanin23:12:06

What's the best way to set global css for the html and body tags when you're using reagent?

mruzekw23:12:47

I’d probably import something like this and use it: https://github.com/nfl/react-helmet