Fork me on GitHub
#re-frame
<
2017-03-15
>
andre06:03:12

@sandbags yes cache scares me every time during development, will be glad to hear feedback for 0.4.4

sandbags13:03:58

@andre yeah i'm never quite sure why the cache holds on to things sometimes and not others

markel13:03:12

Hi guys, here's the thing that bothers me a lot (I'm a cljs newbie). If I'll start a re-frame project, I would need a datagrid mostly. I mean, a list component with sorting, filtering, column resizing, infinite scrolling, pagination, exporting to CSV etc. stuff. I'm coming from Angular, where there is brilliant ui-grid http://ui-grid.info/ that covers all this kind of stuff, while being stateful, mutative, and certainly not FP-oriented. I've found a close alternative in the React world: AG Grid, https://www.ag-grid.com/, which is really powerful and free. Can I use it with re-frame, regarding it's FP ideas?... And, what datagrids are you using? And maybe there are some examples of datagrid-apps built with re-frame?

sandbags14:03:32

@markel there is a re-frame-data-table component you could look into

sandbags14:03:02

i've not got around to using it myself yet so i am not sure how good it is or how it might compare to existing solutions

sandbags14:03:27

in general you can use stateful JS components in re-frame by wrapping them, that's in the docs ... if you can't find it i can dig up a reference

sandbags14:03:59

(essentially you create a reagent component that wraps the JS component and acts as the conduit between a re-frame subscription and JS land)

markel14:03:25

@sandbags Thanks! >you can use stateful JS components in re-frame by wrapping them that's what I wanted to hear 🙂 I'm still in progress of reading the docs, so I'll get there soon.

markel14:03:02

Great, thank you so much!

markel14:03:27

Has anyone else implemented the lists/grids in their re-frame (or any cljs) apps?

sandbags14:03:57

I've found the Google Maps example, in practice, a little hard to translate into my own context. I think because it's a little more complicated and I'm not sure how to simplify, although conceptually the process seems simple enough. I suspect I just need to find an hour to play with it properly.

sandbags14:03:19

(also I am essentially ignorant of the React underpinnings beyond the minimum required to use reagent/re-frame at all)

mikethompson18:03:12

@markel this presentation may be useful ... it discusses visualized grids and introduces some React components for that: https://bvaughn.github.io/forward-js-2017/#/0/0 (it gets interesting from https://bvaughn.github.io/forward-js-2017/#/10/0) React components are usable from Reagent, sometimes easily, sometimes with more fiddle (because of clj <-> js data transforms)

mikethompson18:03:57

As an example of React component interop, here is a recent example of using Chartjs https://clojurians.slack.com/archives/re-frame/p1489452021791396 Warning: the amount of chat history kept by slack is short, so that example code will disappear within a day or two.

isak21:03:16

is it madness to dispatch an event from a subscription?

PB21:03:38

Stupid question. Is a re-com/h-box supposed to be used with only box elements? Is it still correct if I were to use re-com/label for example, as the child?

shaun-mahood21:03:11

@petr: It's been a while, but I'm pretty sure that h-box expects children that are styled correctly to be used in flexbox - so they might work directly depending on their style, but if they don't then you can wrap them in box and they should be good. I'm pretty sure I've always just wrapped elements in box to make sure I didn't miss any edge cases.

mikethompson22:03:09

@isak yes, it is madness.

PB22:03:53

@shaun-mahood Thanks for teh response. That's probably the better way to go

PB22:03:19

They do work directly without the box. I was just unsure of which would be the cleaner way

PB22:03:06

I'm having trouble getting a couple of the attributes outlined here to work: http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/h-box :gap for example. For the life of me I cannot get there to be a space between teh boxes

PB22:03:11

Am I missing some sort of styling?

mikethompson22:03:48

@isak my guess is ... you'll be wanting to do this (dispatch in subscription) because a newly-shown view/panel needs some data.

isak22:03:50

@mikethompson I see. The problem i'm trying to solve is recomputing one part of state if some other parts change. I saw the on-change interceptor, but that introduces 2 problems. 1) Need to intercept quite a few places, but not all 2) Didn't see how I could debounce the computation. Any suggestions?

mikethompson22:03:25

So when X changes you want Y to be dispatched ?

mikethompson22:03:02

Now obviously X can only change as a result of an event handler running

mikethompson22:03:21

So the first response is to say: do the dispatch in the event handler which changes X

mikethompson22:03:40

But the push back is: X is changed in a number of places

isak22:03:44

My problem is there are very many handlers that changes X

mikethompson22:03:35

So then the design shifts to ... you can put an interceptor on "those many handlers which change X"

mikethompson22:03:00

The interceptor can check for changes to X and, if found, dispatch Y

mikethompson22:03:33

That way you "factor out" the check on X

mikethompson22:03:42

(into the interceptor)

isak22:03:19

What if the check isn't the problem, but the number of places?

shaun-mahood22:03:59

@petr: Have you tried copying the page source from that example?

isak22:03:52

If there was a way to write a subscription that was debounced, that would make it so I could use subscriptions instead of manipulating app state

isak22:03:09

It seems like it would also be better than hunting down and maintaining interceptor for 10+ events

isak22:03:12

The solution in that comment I don't think would solve my problem, because aren't the computations immediate?

dragoncube23:03:08

Not re-frame specific, but reagent question here. I’ve noticed that sometimes such definitions makes huge difference:

(defn concrete-container-1 [view-component]
  [generic-container
   :some-param-1
   :some-param-2
   view-component])

(def concrete-container-1
  (partial generic-container
   :some-param-1
   :some-param-2))
specifically one with partial does not work properly (something like double rendering) is there any explanation/documentation for that?

PB23:03:20

@shaun-mahood I haven’t, I’ll give it a try