Fork me on GitHub
#re-frame
<
2018-02-06
>
joelsanchez00:02:20

just got prerendering for my re-frame app working with chrome headless

joelsanchez00:02:35

yay! was worrying about SEO 🙂

mikethompson01:02:41

@joelsanchez I'm sure it would be interesting to many people if you could package your work into a repo or blog

joelsanchez07:02:41

sure, will try to do so

mikethompson00:02:22

👍 PR to add it to /doc/ExternalResources.md in re-frame? If so, there's a prerendering section at the bottom.

joelsanchez06:02:48

yes, I PR'd it yesterday, daniel merged it

cmal03:02:26

Something like this:

(reg-event-db
 :indexinfo-update-chart-data-by-active
 indexinfo-interceptors
 (fn [indexinfo [_ active]]
   (let [{:keys [cate active ktype]} (:chart indexinfo)
         data (get-in indexinfo [:data :line])]
     (-> indexinfo
         (assoc-in [:chart :use-data :line] (case active
                                              :all data
                                              (indexinfo-cut-data data active)))))))
I have a large app-db(with about 200 lines definition and max-depth of 5 or 6 level, in which many keys have large scale data) and the assoc-in data is also large, for example a vector of 4000 items. I have some basic profiling using goog.debug.Trace and the indexinfo-cut-data runs about 200-300ms, but the whole event handler runs for seconds. I doubt the assoc operation is slow, and want to improve the performance of this handler. I want to know, what kind of operations about ratoms are slow? Are there any related performance guidelines? Thanks.

danielglauser03:02:35

Does anyone know of an example of using re-com components with drag-n-drop events?

mikethompson03:02:59

@cmal first, use re-frame-trace to figure out where the time is going. Perhaps use chrome Flamecharts too. It won't be anything to do with atoms. To reset! an atom takes 0ms. It is a trivial operation. Also read: https://github.com/Day8/re-frame/blob/master/docs/Performance-Problems.md

mikethompson03:02:44

@danielglauser I've done it but I don't have any public code

mikethompson04:02:40

I used to point people to this resource: https://www.refheap.com/73581 (Reagent + HTML5 DnD)

mikethompson04:02:44

But it has disappeared

cmal04:02:14

@mikethompson Thank you very much for you help!

mikethompson04:02:29

@danielglauser I have done a copy and paste of some working code which might give you "ideas". I remember the pain of DnD. https://gist.github.com/mike-thompson-day8/09b173d52575383841bd1fb5dbbe7ae1

cmal04:02:33

I see, the component takes a long time to compare the props, which is a large data structure.

danielglauser04:02:21

@mikethompson Thanks! I think this example will really help. It was mostly what I was thinking but there’s a few subtile points that I missed.

cmal05:02:09

Could not find artifact day8.re-frame:trace:jar:0.0.0-react16 in central

cmal05:02:32

I added [day8.re-frame/trace "0.0.0-react16"] to shadow-cljs.edn, if [day8.re-frame/trace "0.0.0-react16"] works in project.clj, it maybe because of shadow-cljs

cmal05:02:42

Has anyone successfully used [day8.re-frame/trace "0.0.0-react16"] ?

mikethompson05:02:03

[day8.re-frame/trace "0.1.18-react16"]

mikethompson05:02:30

Note: if you are not using react16 then leave that bit off [day8.re-frame/trace "0.1.18"]

mikethompson05:02:01

Also make sure you have [re-frame "0.10.4"]

timo11:02:11

@mikethompson yes I did but there it's only reg-event-db. I guess it's anyway not so important for my usecase because I have mostly ajax-requests in there anyway and that's then more an integration test...

timo11:02:29

but I would like to have an example on it

curlyfry12:02:58

@timok If it's a unit test and you have broken out the handler function into its own defn it can be as simple as:

(deftest my-handler-test
  (testing "my-handler does a thing"
    (let [cofx {:db {:foo :bar}}
          event [:some-event "param1" "param2"]]
      (is (= (my-handler cofx event)
             {:db                {:foo :updated-bar}
              :some-other-effect [1 2 3]})))))

timo13:02:59

will try that! thanks!

curlyfry16:02:43

No problems :)

timo16:02:32

@U0J30HBRS does this mean I would not use the handler in reg-event-fx, but would extract it like in the reframe-docs mentioned with the reg-event-db?

timo16:02:17

And then I would pass the cofx and event as params, right?

curlyfry16:02:04

Sounds like you're on it! You could paste some code here and I can confirm if it's what I meant :)

timo16:02:43

Will do that when I am home!

timo19:02:14

this would be like I understood it, I guess it might be better to put the destructuring into the handler-function to test this logic as well, right? https://gist.github.com/TimoKramer/14ec4c5b4ab005e12265cb8687bbfe2e

curlyfry20:02:54

Look good! But yes, I tend to give all my event handling functions the [cofx event] type of signature (with destructurings and stuff) and just use the function var in the reg-event-fx.

curlyfry20:02:16

So in your case, :set-active-page would look like

(reg-event-fx
  :set-active-page
  set-active-page-handler)

timo09:02:52

great! then I now know how to test my event-handlers! thanks!

curlyfry15:02:26

No probs :)

Mikko Harju16:02:31

Hi! I’m trying to debug what is causing a re-render of my whole application when a part of app-db is being updated. I looked at re-frame-trace and I’m seeing a input-signal on every redrawn component that is not of form “rxNNN” but “ra68", what is “ra68”? How can I track it down?

Mikko Harju16:02:38

For instance the language field is not touched at all, the subscription is

(re/reg-sub-raw :language (fn [app-db _] (reaction (get @app-db :language))))
and the language-selection component still gets redrawn even though the value does not change

Mikko Harju17:02:26

According to interop.cljs raNNN is an RAtom

mikerod18:02:38

If you directly rely on the top-level app db, then any change to it will trigger your reaction

mikerod18:02:02

so you have a “layer 2” subscription there

Mikko Harju18:02:40

@mikerod thanks! Actually I found the bug, there was a rogue reference to the re-frame.db/app-db (that what’s the ra68 was!) directly in a place I was not expecting it. That was referenced “all over the place” causing re-renders every time app-db was updated.

Mikko Harju18:02:19

This was not a waste of time since now I know a bit more on the internals of Reagent and Re-Frame. 🙂

mikerod18:02:48

@mikko good that you found it. Yeah, it can be tricky if you end up having a subscription that is dependent on the top-level and you can’t find it

pablore20:02:51

What is the re-frame way of referencing elements of a component?

curlyfry06:02:06

What do you want to accomplish? I'm not sure I understand what you mean by "referencing".

pablore14:02:35

using the :ref tag attribute to reference, for example, the contents of an input tag when pressing the “submit” button.

curlyfry16:02:36

Generally, either re-frame events and subscriptions, or reagent atoms are used for setting and getting values of fields

curlyfry16:02:44

I think the todomvc example in the re-frame has some code that shows this

curlyfry16:02:57

Usually, :on-change is used rather than :ref

pablore18:02:36

Had a look on the todomvc and everything is clear now. I mistakenly thought that using reagent atoms were an antipattern

curlyfry07:02:37

Cool! Ratoms are ok for state that's strictly local to a component. As soon as you feel like the state is part of a shared domain it's probably time to make it part of app-db.

pablore20:02:18

In particular, having a submit button referencing a textinput

danielcompton20:02:11

@mikko when you saw the subscription in the subs panel, did it show as a layer 2 subscription?