Fork me on GitHub
#om
<
2017-02-26
>
qqq00:02:42

I've worked through https://github.com/omcljs/om/wiki/Remote-Synchronization-Tutorial . This uses wikipedia as the remote end point. Is there a tutorial on writing my own remotes erver (also in clojure) ?

bunkers05:02:00

Thanks @cjmurphy! I think that’s confirmed what I was starting to think, which is that the http-protocol should be given an ID and then referenced in the address.

bunkers05:02:35

It seems strange that you can’t have a component that’s only reliant on parent props. Something like a profile picture would be a similar situation. Same component but used in various other components. In that circumstance would you give the profile picture and ID and then reference/join it in the maps for the other components?

bunkers05:02:48

That’s interesting @danvingo as in https://github.com/swannodette/om-next-demo/blob/master/todomvc/src/cljs/todomvc/core.cljs It looks like I should just be defining a function and not a component, like the clear-button or footer

cjmurphy06:02:15

@bunkers: Makes sense that a profile picture could just be a function, doesn't even need to be a query-less component, if the state is held in the parent (or at least not held in your app state). Same function used in various other components - why not?? Even if the profile picture was optional you could get away with having just a function. But if there are many possible profile pictures, perhaps with relationships with other entities, then you would definitely want the profile picture to be an entity in its own right - which would mean that it has an ident.

cjmurphy06:02:17

To be honest at the moment I can't think of why you would want to have a query-less component.

bunkers06:02:01

Yeah I think I was getting confused that if something has props then it needs to be component, which isn’t the case. You can just have a function and pass in the needed props

bunkers06:02:53

…and this example probably isn’t great too, as I’m just playing with some stuff to get my head around it all!

cjmurphy06:02:14

Ident-less components (have query) have a use case - can't think of what that would be at the moment either. Seems like similar to just using a function - except you had trouble with them just then.

bunkers06:02:44

I’m sure I’ll come across it! For now it seems a bit of a revelation that I should be using a function when the component is only reliant on a subset of the props from the parent

cjmurphy06:02:30

From https://github.com/omcljs/om/wiki/Components,-Identity-&amp;-Normalization ListView is a component that only renders - don't know why a function wouldn't be just as good.

bunkers06:02:10

Is it because there’s more than one ListView so you wouldn’t want to render them both?

cjmurphy06:02:31

Also Root is always a component with a query but without an ident. When I programmed in Om Next last I pretty much used idents everywhere.

bunkers06:02:35

Are you not using it now?

bunkers06:02:47

Om Next that is

cjmurphy06:02:56

I haven't gone to anything else, except Untangled, which isn't something else. Just not been doing UI work for a while. But about to get back into it again. Quite excited about the Untangled Forms stuff - nice and high level.

bunkers06:02:09

Untangled looks great, but I decided one thing at a time! I’m pretty sure that remoting is going to take some learning too

cjmurphy06:02:02

Yes the hardest part is interacting with the parser. You still have to know how to deal with it with Untangled, but it only comes up on the server, so you deal with it a lot less.

cjmurphy06:02:33

i.e. remoting (talking to server) requires the parser in Om Next, whereas it is straight calls from the client in Untangled.

bunkers06:02:55

Interesting, that sounds as if it’s more like Relay, where (if I understand it) some of the work to query and merge data is done for you.

cjmurphy06:02:19

Just thinking back perhaps the ListView (having it as a component rather than just a function) uses React diffing better, as React will only need to re-render the details, not the master, if the details change but the master stays the same. Seems to me like that wouldn't gain you much 99% of the time.

bunkers06:02:28

I think you’re right, about the reason. I’m not sure what circumstances that would provide a performance improvement. I suppose if you had lots of lists?

qqq08:02:14

In om/next, I understand the wikipedia auto complete example, which sends XhrIO requests on key strokes. However, I need some data to even initialize the root element. Is there a way to tell the Root element "on startup, make this call to get data" ?

qqq08:02:45

I see:

(def reconciler
  (om/reconciler
    {:state ..., :normalize ..., :parser ..., :send ...}))
now, my question is: suppose my initial state is not available on the client, but I need to make a request to the server to get the initial state -- how do I do that?

qqq12:02:36

does om.next have a nice feature for: clojure data -> dom elements? I have a clojure map of vectors of ... and I just want to dump it to screen

qqq19:02:26

I have finally got the hang of normalizations, iquery, and remotes. Question now: is there a list of nice GUI libraries that work with Om/Next? Given Om/Next's opiniated views, it seems libraries need to be specially written to work with Om/Next

craigmalone22:02:40

qqq: FWIW I have been using https://github.com/madvas/cljs-react-material-ui which is a wrapper for http://www.material-ui.com/#/ There is a nice example using this with om.next in https://github.com/madvas/cljs-react-material-ui-example

qqq22:02:51

@U1BSJDTNG : thanks for the recommendation; I got semantic-ui-react working with om/next, looked at some other libs, and have now pretty much decided to go with raw svg 🙂

craigmalone23:02:12

@qqq If you are doing generalised drawing have you looked at http://quil.info/? I have found that useful for rendering diagrams within some components in my om.next ui tree.

qqq23:02:12

@U1BSJDTNG looks interesting, thanks for recommendation!

bunkers19:02:08

There was someone talking about https://clojars.org/cljsjs/semantic-ui-react in the #om-next channel

bunkers19:02:01

I would have thought you could make most react libraries work with Om.Next. You might need to just wrap elements in your own components

bunkers20:02:14

Could you use some sort of pretty printing library for dumping your vectors to the screen? Alternatively you could just map a function over the vector that called the appropriate dom functions

bunkers20:02:59

Not sure about your remote question, but I think the idea is that missing data is requested from the appropriate remote source, so as long as it knows where to get it, the query will be sent to the server

qqq20:02:18

this looks like it's not a cljs lib, but an js extern lib ?

bunkers20:02:55

yeah that’s right a cljs interface to the js lib

bunkers20:02:09

there’s probably loads of others you could use in that way

bunkers20:02:45

Untangled has got a UI library too

bunkers20:02:49

I’ve not used it though

qqq20:02:55

so I'm fairly new to om/next, and not all that comfortable with hacking it; are any of these 'plug and play' solutions? I'd prefer to not write my own wrappers / deal with component life cycle

bunkers20:02:40

From what I understand Untangled is the closest to that. Writing your own components based on some thing like Semantic UI or Bootstrap wouldn’t be too tricky though. It kind of depends what you need

qqq20:02:43

@bunkers: can you help me get started with 1 example? 1) I know that semantic-ui-react is documented at http://react.semantic-ui.com/addons/radio 2) I know how to do a basic om/next ui via

(dom/div nil "Hello WOrld")
3) I have cljs/js/semantic-ui-react 0.64-7.0 installed 4) what I don't know is: from cljs land, how do I launch a semantic-ui-react component ?

qqq20:02:16

so if we could get me to load even a button: http://react.semantic-ui.com/elements/button it should be enough for me to get started

qqq20:02:58

it sounds like my problem really is "how do I use a pure react component from within om/next"

qqq20:02:27

Now , in trying the examplea bove -- is "js/semanticUIReact" a literal name, or osmething I need to replace (as I'm getting an error of not finding semanticUIReact"

bunkers21:02:33

That looks like a good approach to me, you could define the components and then you should be able to use them in your render method

qqq21:02:53

for anyone else struggling: it works, now, the precise line is:

(js/React.createElement
  (goog.object/get js/semanticUIReact "Button")
  #js {}
  "Click Me")

qqq21:02:17

@bunkers: thanks for all your help on this wonderful Sunday

bunkers21:02:14

No probs, glad you got it working

hlolli21:02:48

@qqq interesting approach, never seen such an interop, but good for the idea bank.

qqq21:02:59

@hlolli : I don't think this is the idiomatic way to make it working -- this is just the first example I got to work -- if you know of a more standard / idiomatic way, I'd love to see it 🙂

hlolli21:02:14

what does this do (too lazy to start a cljs browser repl)

(js/React.createElement
  js/semanticUIReact.Button
  #js {}
  "Click Me")
but my main concern would be if this code survives advanced compilation. You'll find out.

qqq21:02:30

oh, nice, it worked in :optimizations :none

qqq21:02:34

so that's what goog.object/get does

qqq21:02:09

does not appear to work with :optimiozations :advanced

qqq21:02:43

okay, verified the following: js/semanticUIReact.Button: works in :none, not :advanced (goog.object/get js/semanticUIReact "Button"): works in both

hlolli21:02:49

ok, interesting

bunkers22:02:02

It is. I don't know enough about that but why would the first be optimised out?

qqq22:02:46

I don't know; but I suspect js/semanticUIReact is registered as a foreign, but js/semanticUIReact.Button is not

qqq22:02:00

so js/semanticUIReact.Button gets renamed to something like js/semanticUIReact.short-name, which then evals to nil

qqq22:02:03

but this is all guessing

qqq22:02:05

========== Is there an om example which live displays current window width/height ?