This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-03-10
Channels
- # announcements (1)
- # babashka (44)
- # beginners (188)
- # calva (37)
- # chlorine-clover (28)
- # cider (12)
- # clj-kondo (40)
- # clojars (1)
- # clojure (323)
- # clojure-austin (7)
- # clojure-europe (20)
- # clojure-italy (4)
- # clojure-nl (16)
- # clojure-spec (7)
- # clojure-uk (37)
- # clojuredesign-podcast (1)
- # clojurescript (30)
- # cryogen (2)
- # cursive (30)
- # data-science (1)
- # datomic (26)
- # emacs (1)
- # events (1)
- # figwheel-main (13)
- # fulcro (89)
- # garden (1)
- # graalvm (20)
- # graphql (8)
- # jobs (1)
- # jobs-discuss (1)
- # joker (6)
- # kaocha (125)
- # lambdaisland (1)
- # meander (42)
- # off-topic (18)
- # pathom (3)
- # pedestal (6)
- # shadow-cljs (55)
- # spacemacs (21)
- # sql (18)
- # tools-deps (8)
- # uncomplicate (2)
- # vim (1)
- # yada (3)
RAD got a bit more dynamic today. There are now 3 ways to add dynamics to a form, as described here: http://book.fulcrologic.com/RAD.html#_dynamic_forms NOTE: This requires 3.1.20-SNAPSHOT of Fulcro, as I had to evolve form-state a bit to deal with validation of edges, which it did not yet support.
All the dynamism shown there is driven by about 17 lines of code, and is pretty much described in the book.
Hey, any ideas how should I use https://adazzle.github.io/react-data-grid/docs/quick-start in Fulcro? ["react-data-grid" :as ReactDataGrid]))
seems to return object
:
=>(goog/typeOf ReactDataGrid)
"object"
What object, ie what keys does it have? Could it be the module object, i.e. {"default": ..., someFn: ..}
?
That is weird. Based on Table 1 under https://shadow-cljs.github.io/docs/UsersGuide.html#npm I guess you need ["react-data-grid" :default ReactDataGrid]
So (js/Object.keys ReactDataGrid)
returns nothing?
Trying to use react-factory
on top of it obviously causes react_devtools_backend.js:6 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
@tony.kay If I route to a router in the initial state and the target does dr/route-deferrer
then 1. the default (i.e. first) target is displayed, 2. after the :deferred-timeout of 20ms the body of the router (if present) is rendered and can show a "loading..." notification.
Correct? I think that showing the default route for 20ms is meaningless and if the router has no active route currently it should jump directly to rendering its body, instead of waiting the 20ms. Thoughts?
Question: I want my deferred component to handle the "Loading..." x data display itself so inside I do
:will-enter
(fn [app {:keys [id]}]
(dr/route-deferred [:component/id :offboarding-pages]
#(do
(df/load! app [:offboarding/id id] OffboardingQuery
{:target [:global/offboarding], :marker :offboarding})
(comp/transact! app [(dr/target-ready {:target [:component/id :offboarding-pages]})]))))
and in the body I check the marker for nil / loading? / failed? and display the content accordingly. However this does not work as I want. What is happening is that the target-ready
is triggered as desired (though with a 100ms delay, which is little too long, but that is perhaps due to dev mode). Next it takes 1.7s between that and the component actually rendering the "loading..." indicator. Perhaps all this will be fast enough in prod mode. But I guess it is safer to just display the "loading..." indicator in the router body, perhaps with :always-render-body? true
....
Detailed time log:
1. I force-reload the page
2. At 11:55:55.6 The router's (if (nil? current-state))
is displayed for a Âą4s
3. Tx log: 11:55:57.0 the router's UISM logs "begin" with :path-segment []
(perhaps due to dr/initialize!
?)
4. Tx log: 11:55:57.4 the router's logs begin with the actual path-segment (perhaps due to dr/change-route
?)
5. Tx log: 11:55:57.5 the load starts (and will take Âą3s)
6. Tx log: 11:55:57.6 target-ready
is triggered
7. Network log: 11:55:58.0 the load request is sent, takes 3.1s
8. Tx log: 11:55:58.4 the router logs "ready!"
9. At 11:55:59.3 The component's (if (df/loading? marker))
is displayed
10. At 11:56:01.2 The component renders the data
(I guess 1. - 4. are all a part of the initialization of the system (which I hope will be much faster in prod mode).)
Comments?@holyjak I would agree with you that initial routing behavior could probably be tuned up a bit. The state machine is quite simple, so Iâd expect those are easy fixes. In terms of your initial application load: I would think that fixing the initial behavior of the routerâs state machine will help in some ways. Your timing of 1-4: What is going on between 2 and 3? I would not expect that delay to be anywhere near that long.
Hi Tony! I have tried to look into it but don't know where to look. The logs in Console do not have any timestamps and the Transactions tab starts with the UISM Begin log (step 3. above). So how do I found out more about what is happening between app/mount!
and the UISM Begin log?
BTW what do you think is an acceptable delay between the router logging a current-state = nil
and its "UISM Begin" log? I have replaced the code with Âą the routing example from the book and the delay is now down to Âą 1.5s (was 2.4s in my original code). Is it still too much?
Youâre talking about the time between when the js is done loading, and when code should start running?
It is essentially time between calling app/mount!
and the transaction log showing
> State Machine (BEGIN):app.ui.tmp-people/TopRouter {:path-segment [], ...
Sorry, I have to put my kid to bed now...
it could just be React overhead, which I can do nothing aobutâŚinitial render is just that
Ok. I can try to track down the extra 1s my actual app spends there. Anything else that looks strange in the timeline posted above?
but Iâd be happy to help optimize anything that Fulcroâs doing that is causing that startup delay
Hey, do you have any suggestions how to replicate behavior like that with Fulcro? https://adazzle.github.io/react-data-grid/docs/examples/cell-formatting
rendering specifics is orthogonal to Fulcro, it provides you the data for rendering the progress bar though
yes, but in this example I need to pass react component (formatter) to React Data Grid.
@slawek098 if it is just a formatter youâre passing, can you just use a function? I mean, it really depends on if the component youâre passing needs access to Fulcroâs data model.
the docs are a bit vague: https://reactjs.org/docs/react-without-jsx.html
the RDG docs say âpass a componentâ, which technically means a string, class extending Component, or a plain function. RDG does not say an element, so a regular function should work fine. Of course, props would be in (this-as this (.-props this))
I think
(defn formatter [this]
(str "foo" (.-value this)))
(def ui-formatter (comp/factory formatter))
(...)
{:key id :name text :formatter (ui-formatter)})
(...)
just try {:name text :formatter (fn [] (this-as this (str "foo" (.. this -props -value))))}
you calling a factory like that is actually generating an element, which is not what it calls for, and I would not expect it work work well
OK. So my (.-value)
is map of props like: {:text-object/id #uuid "5e67ed05-d817-472c-9d65-e932ff5eff79", :text-object/text X motor control}
and when you say value is a map of props, is it a js-object
or a real cljs map? If the answers are ânot statefulâ and âcljs mapâ, then (ui-text-object (.-value props))
should be fine, but donât expect things like transact!
to work in there.
unless you use the HOC stuff referred to earlierâŚbecause that is the state youâre in: youâre letting something else render a fulcro component outside of the normal renderingâŚso Fulcro has no control or context unless you re-establish it
well, it can make senseâŚthere is a lot it is doing for you if you need it. You just have to understand that as soon as you break into low-level js-land you have some glue to build.
But in my case, if the data underneath the cell is whole map of properties for Fulcro component, then whole editing in RDG becomes broken.
I need to think about it, what makes sense... Because from the other hand my data has to be text-editable.
Is something like Storybook (https://storybook.js.org/) practical to use while developing Fulcro apps?
Is Workspaces something you guys recommend using as early as possible? I'm trying to keep the tooling thin as it's already a lot to learn. Is it worth adding it into the mix, or is it reasonable to hold off until I'm more familiar with some of the essential tooling?