Fork me on GitHub
#re-frame
<
2020-09-09
>
Oliver George04:09:30

^ryan Boy howdy it's far from simple.

Oliver George04:09:45

Having a simple react components library with storybook does seem really nice. It cuts down on ugly interop code and helps logically separate stateless component design from piecing things together into stateful application.

Oliver George04:09:23

Bundling it up for reuse isn't easy without experience on what's "normal". Do you bundle the npm using webpack or treat the npm as source code and configure the cljs app webpack config? I settled on the latter but unclear to me if that's good practice.

Oliver George04:09:21

Then webpack spent 10mins doing "chunked asset optimisation" before finally throwing a "Can't resolve 'xmlhttprequest'" error.

Oliver George04:09:11

I suspect I need to start from scratch. This app is a bit hairy.

Oliver George04:09:22

(also too many options for bundling up styles / media files - kept that out of my webpack exploration efforts)

Oliver George04:09:38

(plus 100 other nits along the way)

lilactown05:09:48

at my last gig we built React components in JS and used storybook to document them, and our app was in CLJS. we consumed the React components as npm libs, doing no bundling. we did have a step that compiled the JSX + some of the more modern JS syntax into ES6 or ES5, something like that

lilactown05:09:07

at my latest gig, we are using storybook but we are building all of the components in CLJS. IMO this is much more ergonomic from the consuming side; we consume the components as a CLJS dep (aka a JAR deployed to a maven repo), which is much simpler. it does mean that we need to do more work to interop between storybook’s build tooling and CLJS

lilactown05:09:25

there’s no real way to escape the webpack interop 😭

Oliver George05:09:50

Cool. I did wonder about transpiling(?) down to source code which could be consumed without bundling. I'd be interested in seeing a working setup for that.

lilactown06:09:50

I think we used a pretty simple script that ran babel on the source code

lilactown06:09:31

you really don’t want to bundle your component library because that’s going to end up including React, which ostensibly you are already including in your CLJS app

lilactown06:09:03

to build the storybook site, that will bundle it but that’s separate from consuming it as a lib

gklijs08:09:14

Not really a re-frame question, but didn’t know where it would fit better. In a recent http://dev.to discussion it was argued css frameworks are something of the past. I used re-frame with Bulma before and quite liked it. However I’m considering leaving the framework, also to have a more distinct design. I was wondering about other experiences with re-frame and a css framework, or not. Probably would go for just a ‘clean’ css based on classes with flexbox. Doesn’t need to be fancy.

Lu10:09:25

You want to have a look at codyhouse 🙂 https://codyhouse.co/ds/docs/framework I've been using it successfully in a web/mobile project.

Lu10:09:36

I am using it as a backbone.. It's very easy to have pixel perfect looking components by using variables like var(--space-md) in your css

mikethompson08:09:56

@gklijs Maybe have a look at re-com

gklijs08:09:26

Thanks, not sure it fit my use case, witch I left out, as it’s mostly a static blog/info site. And We can also confirm that none of the components have been designed with mobile in mind, and that there's no attempt to handle media queries. We said we had a desktop app focus, right? while I would want mobile first, and also very low on resources needed. But on the other hand I don’t want to spend much time on css. There is also the option of using Bulma, but cleaning the generated css of all the things I don’t use, but that also seems unnecessary complex.

Oliver George08:09:23

@lilactown thanks. You’ve encouraged me to investigate further.

Oliver George08:09:27

Looks like the first example in the Babel usage guide. https://babeljs.io/docs/en/usage

Dmytro Bunin09:09:22

I have a small question about reg-fx . Is it okay to have a rf/dispatch in those, or is it better to make those normal reg-event-fx if you expect to have a dispatch there?

p-himik09:09:42

It is OK to call rf/dispatch in effect handlers. Whether it should be preferred or not - depends on what you're doing.

Dmytro Bunin10:09:25

I have something that has nothing to do with db , that why it feels weird to me that I am writing an event . Just some side effect which transforms the data and calls event to show the modal. Not sure why my gut feeling is against the reg-event-fx tbh

p-himik10:09:34

Just based on that description, I don't see anything wrong with using reg-event-fx.

Shako Farhad13:09:33

If I were you, I would make the modal popup be based on your DB. I would subscribe to some key values in the db and that activates the modal.

Oliver George12:09:21

@lilactown Updating the react component library to replace webpack for a simple babel compile has given me what I wanted I think. Thanks again.

3
Oliver George12:09:58

Again, feedback would be gladly received.