Clojurians Log v2

^ryan Boy howdy it's far from simple.

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.

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.

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

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

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

(plus 100 other nits along the way)

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

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

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

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.

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

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

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

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.

@gklijs Maybe have a look at re-com

https://github.com/day8/re-com

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.

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

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

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?

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

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

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

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.

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

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

Here's the update version: https://github.com/olivergeorge/caniusestories/

Again, feedback would be gladly received.

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.