Fork me on GitHub

I've worked through . This uses wikipedia as the remote end point. Is there a tutorial on writing my own remotes erver (also in clojure) ?


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.


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?


That’s interesting @danvingo as in It looks like I should just be defining a function and not a component, like the clear-button or footer


@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.


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


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


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


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.


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


From,-Identity-&amp;-Normalization ListView is a component that only renders - don't know why a function wouldn't be just as good.


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


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.


Are you not using it now?


Om Next that is


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.


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


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.


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


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.


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.


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?


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" ?


I see:

(def 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?


does 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


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


qqq: FWIW I have been using which is a wrapper for There is a nice example using this with in


@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 🙂


@qqq If you are doing generalised drawing have you looked at I have found that useful for rendering diagrams within some components in my ui tree.


@U1BSJDTNG looks interesting, thanks for recommendation!


There was someone talking about in the #om-next channel


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


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


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


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


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


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


Untangled has got a UI library too


I’ve not used it though


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


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


@bunkers: can you help me get started with 1 example? 1) I know that semantic-ui-react is documented at 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 ?


so if we could get me to load even a button: it should be enough for me to get started


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


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"


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


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

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


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


No probs, glad you got it working


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


@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 🙂


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

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


oh, nice, it worked in :optimizations :none


so that's what goog.object/get does


does not appear to work with :optimiozations :advanced


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


ok, interesting


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


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


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


but this is all guessing


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