Fork me on GitHub
#devcards
<
2016-07-14
>
escherize00:07:25

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

escherize00:07:46

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

curlyfry12:07:26

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

Macroz13:07:35

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

Macroz13:07:27

stateless, noninteractive components don't have trouble of course

curlyfry13:07:27

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

Macroz13:07:12

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

Macroz13:07:29

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

Macroz13:07:28

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

curlyfry13:07:34

@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

Macroz13:07:38

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

curlyfry13:07:26

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

Macroz13:07:29

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

Macroz13:07:57

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

Macroz13:07:03

that is a pure function

Macroz13:07:01

handlers can be tested as pure functions

Macroz13:07:13

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

curlyfry14:07:40

@macroz: Is this the right idea?

Macroz14:07:50

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

Macroz14:07:08

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

curlyfry14:07:46

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

Macroz14:07:36

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

Macroz14:07:58

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

Macroz14:07:33

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

nberger15:07:16

@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

nberger15:07:37

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