Clojurians Log v2

What's the state of the art or how-to for using devcards with screen-wide interfaces?

so far I've found the "Don't" method to work pretty ok

@curlyfry has joined the channel

Anyone here been able to use devcards effectively with re-frame?

the standard solution at the moment is to wrap the component into iframe

stateless, noninteractive components don't have trouble of course

@macroz: Cool, thanks! Using "dumb", stateless components seems like a nice approach in general. How does the iframe solution work?

I didn't go as far as to resort to them myself, I imagine it's just having a separate page for each of your cards and then having an index page that iframes the parts so that you have one big guide

that's not as nice as it could be, maybe someone has a better solution

there seems to be some work for the support here https://github.com/bhauman/devcards/compare/master...nberger:iframe-devcard

also perhaps re-frame will go from global state to somewhere in the future, who knows 🙂

@macroz: Thanks again for the help! I read through some issues on devcards and re-frame and it indeed seems like there is at least some plan to avoid global state in re-frame at some point

@nberger: I believe you have done the "devcard iframe" support? how is it going?

@macroz: So you're mostly taking the dumb/skinny/stateless component approach for re-frame and devcards?

yeah I was quite happy even without the interactivity, my component guide contains static rendered states and the interactivity can mostly be tested in pure handler logic

so there's always a presentational component to document/render in different states

that is a pure function

handlers can be tested as pure functions

I test the interaction of it all in the app itself until there is a solution

@macroz: Is this the right idea?

yeah

if the list doesn't have much to itself, I may skip it and just have one task

but sometimes there's styling to it that is useful to add

this is generally the approach from React https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.jop8u2ghm

@macroz: Thanks again for the help. I actually just started reading that article when searching for info on this stuff!

np, I think that general idea is worthwhile and well explained there

once you start on that path you'll notice that you can build higher order components nicely that do much of the "container" stuff

e.g. wiring from a certain path in the state

@macroz: @curlyfry yes, I've been using devcards with re-frame from that branch. It's far from being perfect but it works. We use it for an app that is in production, we have devcards in 6 different namespaces, some of them include around 10 devcards. It's nice to be able to have them on the same page, rendering components in different states and being able to interact with them isolated from each other

There is a namespace with some simple examples if you want to play with them