om

Please ask the channel first, not @dnolen directly!
roklenarcic 2017-07-14T07:52:50.917848Z

btw your bootstrap devcards are broken for me

claudiu 2017-07-14T08:35:11.729376Z

@roklenarcic Seems to be fulcro tutorial. Can write in the #fulcro channel. Pretty sure Tony will fix it asap šŸ™‚

claudiu 2017-07-14T09:43:52.127450Z

@roklenarcic Seems to be working on the repo. Probably needs a redeploy. You can just clone git@github.com:fulcrologic/fulcro.git and ./run-devguide.sh until that gets redeployed on the website.

levitanong 2017-07-14T09:58:48.423007Z

are om.next static fields really not meant to be accessed in clj?

claudiu 2017-07-14T10:07:10.589076Z

@levitanong what do you mean ? If referring to static/IQuery should work on server also as far as I know (om.next/get-query MyComponent)

levitanong 2017-07-14T10:08:04.606176Z

@claudiu Not at all. You can do static field some-name 42

levitanong 2017-07-14T10:08:22.611740Z

and then you can access it by (.-some-name MyComponent)

levitanong 2017-07-14T10:09:17.628531Z

I was trying to use it ā€œserverā€ side to generate styles from co-located component styles, but it kept complaining the field didnā€™t exist.

levitanong 2017-07-14T10:09:44.636498Z

I checked next.cljc and it seems they left out the fields from defui-clj

claudiu 2017-07-14T10:11:26.667798Z

ahh think I ran into this. In the om-next there seem to be a few conditionals like https://github.com/omcljs/om/blob/master/src/main/om/next.cljc#L774

claudiu 2017-07-14T10:12:23.684972Z

have you tried https://github.com/ladderlife/om-css or https://github.com/fulcrologic/fulcro-css ?

levitanong 2017-07-14T10:14:38.725656Z

I wasnā€™t too satisfied with ladderlifeā€™s implementation because they seemed to keep the styles in the cljs side

levitanong 2017-07-14T10:14:56.731415Z

but I havenā€™t seen fulcro yet. Will check! Thanks for the heads up, @claudiu

levitanong 2017-07-14T10:15:50.747616Z

Ah, itā€™s similar to something I made myself, it seems. XD

levitanong 2017-07-14T10:16:06.752224Z

https://github.com/levitanong/om-style šŸ˜›

levitanong 2017-07-14T10:16:56.767530Z

but fulcro has a convenience method for composing styles upwards

claudiu 2017-07-14T10:18:31.796175Z

@levitanong ladderlife also seems to generate 1 big css. With falcro-css it's in clj & cljs. Gets dead code eliminated, and with code splitting you can bundle js & css.

levitanong 2017-07-14T10:23:10.878696Z

@claudiu You know, I hadnā€™t actually thought of the dead-code elimination part. I suppose in the CLJS side, since nothing was calling the static methods for getting the styles, then theyā€™d be eliminated. Is that so?

claudiu 2017-07-14T10:25:31.919274Z

yep. They have to compose to the top. If you don't use it it will not get bundled in production. Also like the idea of loading in the html only the css needed for that page.

levitanong 2017-07-14T10:52:25.381264Z

And by loading only the CSS for that page, youre referring to the new code splitting stuff for cljs?

claudiu 2017-07-14T11:03:22.572503Z

@levitanong nope šŸ™‚ I mean that if I'm on the about page I can load only the layout & about page css into the html (the other css is in the js but I don't add it to the dom). Then when you change the route, unmount the loaded css and insert the css for the other page.

claudiu 2017-07-14T11:04:19.588774Z

like this one: https://demo.reactstarter.com/

claudiu 2017-07-14T11:04:38.594620Z

in chrome inspect the header and then change routes, and look at how the css is loaded on route change šŸ™‚

levitanong 2017-07-14T11:28:14.981478Z

@claudiu interesting

tony.kay 2017-07-14T15:41:50.153781Z

@roklenarcic Ahā€¦I forgot to recompile the js file for the live guide with the new naming. Thanks!

tony.kay 2017-07-14T16:40:47.136227Z

should be working now

marvin 2017-07-14T19:06:02.842480Z

Hi, I am stuck with this issue: when my component is a root component the parser calls the read function before rendering. When my component is a child of another simple component, the read function does not get called by the parse and the component is rendered without any data. Is this an issue with my query expression? Is there away to trace the execution?

wilkerlucio 2017-07-14T19:35:08.673405Z

hello @marvin, you mean render after a transaction? or on first render?

marvin 2017-07-14T19:41:01.835348Z

Hi @wilkerlucio on first render the parser does not call my read function if my component is not a root component.

wilkerlucio 2017-07-14T19:42:45.883141Z

@marvin are you composing the queries on your root component? remember that with stock Om is your responsability to parse the query, so you will only receive reads directly for the root entries

samcf 2017-07-14T19:46:09.976980Z

the critical thing for me to grok the query business was to realize the render fn isn't considered while creating the UI query

samcf 2017-07-14T19:47:03.002253Z

so rendered children's queries aren't implicitly included in the final query

samcf 2017-07-14T19:47:39.018773Z

( at least to my knowledge )

wilkerlucio 2017-07-14T19:48:53.053855Z

@samcf yes, that's true, and that's what enables the query to be fully realized in a static way

marvin 2017-07-14T19:51:50.136999Z

@wilkerlucio so Om only call read for the root component? Do I then need to pass down the data to the child-component at rendering time?

wilkerlucio 2017-07-14T19:52:52.166079Z

@marvin yes, your root component is supposed to have the full query (composed by calling om/get-query on the children), and then on the render you pick that value from the props and pass down to the children

wilkerlucio 2017-07-14T19:53:41.189605Z

can you share with us how is your root component is written? I guess we can get less abstract and see what might be wrong

tony.kay 2017-07-14T19:56:35.274138Z

@marvin There is a path-opt option that allows Om to start at a component with an ident

tony.kay 2017-07-14T19:57:02.287343Z

but initial render will always come from root

marvin 2017-07-14T20:09:06.621007Z

@wilkerlucio my app data is a simple big map and my queries are simple keys. My app has one root component for menus and to implement routing using Compassus. The next level of children components display a mixture of text and clojure code in a text editor, these components uses a simple key to retrieve the code from the app-state. Your explanation helps to clarify the fact that the parser only invokes the read function for root component and it is the responsibility of the root component to propagate the data down to its children components. I did not know this fact and was assuming something else.

marvin 2017-07-14T20:11:16.678964Z

@tony.kay hi Tony, thanks for your input, I was not aware of this option.

wilkerlucio 2017-07-14T20:12:31.712523Z

@marvin in case you don't know, there is a helper function called om/db->tree that does most of the effort to translate from a DB form to a plain tree, but maybe it's not much helpful if you are not using idents

tony.kay 2017-07-14T20:17:15.839069Z

Iā€™ve had some recent problems with path-optā€¦possibly only with unions. not sure. There is an open issue on it.

tony.kay 2017-07-14T20:17:40.850305Z

and idents: you should be using those šŸ™‚

marvin 2017-07-14T20:20:04.913603Z

@wilkerlucio I will explore om/db->tree. I have not thought of using idents since I don't have list of data to display. @tony.kay Do you meant I should make a practice to use idents across the board?

marvin 2017-07-14T20:24:42.040178Z

@wilkerlucio after a transaction, is it correct to assume that the parser will invoke the read function only for the affected components?

marvin 2017-07-14T20:25:56.073731Z

@samcf Thanks for your clarifications.

wilkerlucio 2017-07-14T20:26:59.102092Z

@marvin it will trigger the re-render of the current component (if it has an ident, hehe), otherwise you should add follow-up read keys for the keys affected by your transaction, eg: (om/transact! this '[(my/tx {}) :affected-key/to-be-read])

wilkerlucio 2017-07-14T20:27:31.116576Z

but I think this behavior also depends on the path-opt setting

wilkerlucio 2017-07-14T20:27:57.128439Z

@tony.kay can you clarify that one? I'm not sure if after a TX the root query is called when path-opt is off

tony.kay 2017-07-14T20:36:31.359548Z

@marvin Idents are what make mutations easy. It causes all component to appear in ā€œtablesā€, which make get-in, update-in, and assoc-in able to work with them using the ident (two element vector). So, anything that changes over time should have an ident.

tony.kay 2017-07-14T20:37:10.376518Z

The query (wihtout path-opt) is always from root; however, it gets focused to the components that need refresh

tony.kay 2017-07-14T20:37:29.385197Z

focusing is this cool function that strips off all of the query branches that donā€™t lead to the component(s) of interest

tony.kay 2017-07-14T20:37:41.390278Z

so, your query is much lighter on a refresh

tony.kay 2017-07-14T20:37:58.397277Z

but it is still structured from root (unless path-opt)

tony.kay 2017-07-14T20:38:32.412171Z

with path-opt, it is basically hooked up with a join on the componentā€™s ident [{[:table id] (om/get-query component)}] so that the query can start from thereā€¦but since the parser needs to be told how to handle that, it is not on by default.

marvin 2017-07-14T21:00:02.967710Z

@tony.kay This is great stuff, Thanks for your detailed clarifications. I will make a practice to use idents. I can't seem to be able to locate references for path-opt and focusing from Om-next's documentation. Do you know if there is any documentation on these? Thanks

marvin 2017-07-14T21:01:22.002523Z

@wilkerlucio Thanks for your response. It was very helpful.

tony.kay 2017-07-14T21:06:36.130168Z

@marvin. path-opt is undocumented. I wasnā€™t even sure it was still supported (from 2 yrs ago, almost). Was told that it is. Focusing is an internal detail, not of importance to the app writer. It is an optimization. Read the source: next.cljc focus-query I think

marvin 2017-07-14T21:10:51.227491Z

@tony.kay Thanks Tony. I feel the need to dive into the Om-next's source code and swim like crazy.šŸ™‚

wilkerlucio 2017-07-14T21:10:59.230697Z

@marvin no problem šŸ™‚

wilkerlucio 2017-07-14T21:13:01.276903Z

@marvin one extra tip, it's great to learn how Om.next works, but if you just want to make an app, I recommend checking https://fulcrologic.github.io/fulcro/ written by @tony.kay, it already implements most of the basics that you need to write an app, also it has very good introduction videos that you can learn from (and they are made in format to beginners, so you don't have to learn Om.next before hand to learn Fulcro)

marvin 2017-07-14T21:19:22.420295Z

@wilkerlucio Thanks for the tip I will definitely look into fulcro

ajs 2017-07-14T21:23:02.501160Z

i'm trying to upgrade the version of Om I'm using in an older codebase. It does not use any Next features, but I understand that om.div and om.core should be the same in the current Om version. All I do is require these two namespace in the code. I removed the explicit loading of react.js as was necessary long time ago, but i'm getting error

dom.cljs:54 Uncaught ReferenceError: ReactDOM is not defined 
when i try to run the app after this upgrade.

ajs 2017-07-14T21:23:53.519676Z

i also get

Uncaught TypeError: Cannot read property 'ReactComponentTreeHook' of undefined 
in the react-dom.inc.js