As far as https://github.com/magomimmo/modern-cljs/tree/master/doc/second-edition, I found the first 4 chapters to be awesome re: explaining the boot build process.

I did kind of veer away when it started getting into domina, etc.

@jaen: > You could take a look at re-frame; it's not exactly redux, but inspired by it. For the record, this statement isn't true. re-frame was inspired by many things, but redux absolutely wasn't one of them. Redux didn't exist when re-frame was authored. Redux came much later. To give you a sense of timing, re-frame was published at roughly the same time that the "Elm Architecture" was published. To my knowledge they evolved around the same time. In designing re-frame I took some inspiration from the early Elm examples available in mid 2014. The Elm Architecture was not formally defined at that point, and I struggled to read the language -- no background in Haskell for me -- but I cottoned on to various concepts like Signals, foldp, lift etc. Most of the early Elm examples I can remember seemed to focus on how Signals were first class. Mouse position as a Signal etc. Games mostly as I remember it. So Elm influenced me to become very interested in FRP, and to understand what Reagent was doing through the lens of FRP, but I don't remember much about "Architecture" making its way into my head (that I'm aware of now). So, for me, the other, perhaps larger inspirations were Reagent itself, React/Flux, Hoplon, Pedestal, OM, etc. As I remember it, the approach of dispatch seemed to seep through from Pedestal, subscribe from Flux/Reagent.

But its all a bit of a blur. My brain was very full of what were new concepts to me. But I can be quite sure of that redux didn't exist or act as any "inspiration" whatsoever.

@mikethompson: what's up!

have you seen the fun we've been having?

https://hackpad.com/collection/wnikaeBENEE

Looking

Ah. Fending off the Slackpocalypse

yes

What database ?

not decided yet

I'd point you in the direction of rethinkdb

For anything realtime

They have something called "fusion" currently in the works

that hackpad is open for edit

I know, I know, you're not much of a writer...

I'm not actually. Its true!!

coulda fooled me and a whole lotta other folks

been paying a 👻 ✍️

Writing is torture. Takes so long !!

👻 ✍️ ㊙️

wha?

I can bearly write a slack comment without having to reedit it

not a wrench

wtf

the new app is gonna have great edit features

also helping with #C0J20813K

one contender in the race to save us from :slackpocalypse:

Will have a look.

so, I remember way back when you being interested in rethinkdb - been using it much?

A bit. Not to its full potential yet.

will check it out, thanks

hey guys

I ran into a little problem with react native. Someone an idea? Following:

Some components in react-native (mapview for example) require you to pass sub-components as properties:

title: 'More Info...',
        rightCalloutView: (
          <TouchableOpacity
            onPress={() => {
              alert('You Are Here');
            }}>
            <Image
              style={{width:30, height:30}}
              source={require('image!uie_thumb_selected')}
            />
          </TouchableOpacity>

@danielcompton: perhaps you know what to do about ^

The problem I ran into is, that

(def view (r/adapt-react-class (.-View js/React)))
(def text (r/adapt-react-class (.-Text js/React)))

(.stringify js/JSON (r/as-element [view {:style {:flex 1}}
                                           [text {:style {:flex 1}} "test"]]))

I'm not sure if r/as-element is the right tool for this but in console the rendered component looks good to me

where is the circular structure

somewhere in the rendered thing from as-element

how can you view it without passing it to stringify

I dumped it into (.log js/console) or what do you mean?

@mikethompson: I've just checked what was the original facebook's architectural proposal for React and it seems I've mixed up Flux with Redux for some reason '

Sorry for mixing that up.

@jaen: can you help with ^

@meow: thanks for the support

With RN? No idea, sorry. I don't even have smartphone : V

@dvcrn: np

no, just with how to go about debugging

@jaen: you know more about this than I do

Ah, I see. Well https://github.com/binaryage/cljs-devtools might help to understand a Clojurescript more clearly. But that's Javascript, right?

yeah it's mostly javascript I believe

I need to somehow get the exact same result from reagent that

<TouchableOpacity
            onPress={() => {
              alert('You Are Here');
            }}>
            <Image
              style={{width:30, height:30}}
              source={require('image!uie_thumb_selected')}
            />
          </TouchableOpacity>

or maybe this is a case where I need to escape to raw interpolated js, hmm

let me try if a reagent-less version works

minimal is best

And the obvious

(def touchable-opacity (reagent/adapt-react-class (.-TouchableOpacity js/React)))
(def image (reagent/adapt-react-class (.-Image js/React)))

(defn alert[content]
  (.alert (.-AlertIOS js/React) "" content))

[touchable-opacity {:on-press #(alert "You Are Here")}
  [image {:style {:wifth 30, :height 30} :source(not sure what here)}]]

the problem comes when passing a component as a property like [foo {:something [view (...)]}]

afaik

And foo is something from RN?

foo is a play on FUBAR, which means fucked up beyond all repair

If so, I'll try [foo {:something (reagent/as-element [view ...])}]

but we can't say fuck on slack

I'm asking about semantic meaning not etymology P ;

i'm so bad

Yeah, I can see you like to troll a bit ; d

reactji performance artists have that tendency

@jaen are you actually trying with react-native right now?

I can't, no smarpthone like I said ; d

I suppose I could have tried with an Android emulator on muh loonix, but I don't have that set up.

But in web-reagent land if you interact with something that came from js-React you usually have to call (reagent/as-element ...) on the hiccup vector of your component.

So maybe the same would apply in RN-land.

does it wrap the component with some reagent specific stuff or is it the pure react component like react would render it?

(reagent/as-element ...) produces a plain React component from a reagent description of component.

Form-3's are already plain React components IIRC, but form-1 and form-2 aren't and thus the need for as-element.

hmmm

Basically, React requires something derived from their Component class; for < ES6 React.createClass takes care of it. reagent/create-class uses it modulo some Clojurescript -> Javascript transforms.

But form-1 and form-2 are - respectively - functions that return Clojurescript vectors and functions that return functions that return Clojurescript vectors. Both are not valid React components so you need to pass them through reagent/as-element so it appropriately calls reagent/create-class for you.

I tried a direct call from cljs to js and don't have the error anymore:

(let [e1 (.createElement js/React (.-Image js/React) (clj->js
                                                              {:style {:width 30 :height 30}
                                                               :source {:uri ""}}))

              e2 (.createElement js/React (.-TouchableOpacity js/React) #js {} e1)]

(...)

but was my reagent call above wrong by chance? Because it if creates the same output, it shouldn't throw an error when passing into mapview

Well, that looks kinda awful xD

😛

> was my reagent call above wrong by chance? Which one? I'm not sure which you refer to.

just a sec, finishing this experiment up real fast

ok the direct call to react works. Now to try the reagent approach again

Sure. I think just using reagent/as-element should work, but let's see.

phew! got it working with:

(set! js/React (js/require "react-native/Libraries/react-native/react-native.js"))
(def touchable-opacity (r/adapt-react-class (.-TouchableOpacity js/React)))
(def image (r/adapt-react-class (.-Image js/React)))

              (let [r1 (r/as-element [touchable-opacity {}
                                  [image {:style {:width 30 :height 30}
                                          :source {:uri "..."}}]])]

I am not sure where the exact problem was but I am a happy hippo now

thanks a lot for the great assistance @jaen!

@jaen gets 2 ⭐

@dvcrn: yup, that looks like it should have worked. I guess your problem was you were trying to pass [some-component {} ...], right?

So you basically wanted to pass a whole Clojurescript persistent vector structure.

No wonder it might have not wanted to serialise properly.

No I had it already inside as-element

It was something else

Oh, then that's weird.

But I can't find your original code so not sure what that could've been.

Good you got it working though.

What is the best way to get something like react context/dynamic scoping in reagent? I want to avoid repetition and pass arguments to some descendants (not all of them and not necessarilly direct)...

You can just use ratoms you have defined elsewhere as-is.

(def counter (reagent/atom 0))

(defn component []
  [:div "Counter: " @counter])

Well, I would have to pass the reference to them in that case...

As you can see - you don't. Reagent tracks dereferences to ratoms at runtime using a kind of dynamic scoping.

So the above just works.

I didn't mean i would need to thread that value through all the functions, but I need it altogether... and I need many of this counters from your example so hardcoding it is not good...

Oh, then I must have misunderstood what you want to achieve, sorry.

My example is maybe not the best...

This is I think analogue to what I wanted: If I model all my data in a single atom, and I want to avoid cursors (re-frame).. I have a bunch of inputs that all take edited property as a parameter. If all the props are paths withe the same prefix can the prefix be passed dynamically from the parent? I can use local functions to generate paths and avoid repetition, but just wandering....

Hmmm... First off - re-frame is not cursors. For reading you have reactions which are function evaluations cached in an atom. For writing you have event handlers. So not really cursors.

But about the real question - I'm not exactly sure how that could be approached. You mentioned Javascript-React doing it. Any example?

Haha, thats what I thought I said... about cursors.. I think I will avoid this for know by 'preprocessing' arguments to my components with a function that will fill needed data in without so much repetition... I just need to structure the components accordingly... I just wandered if there is an easy solution to this..

you could of course pass the prefix as a component property down. {:data-from-parent {:prefix "foo"}} or something like that

does anyone use specter with reagent

I am passing it currently, but it is geting repetitive...

I watched spectre but didn't use it yet 😛

I have been using specter a bit..

does it help with this

deep maps

I had quite a complicated model, and it certainly helped isolate the update functions into more composable parts...

@nbdam: then how about a function / macro that wraps reagent and creates the component for you and automatically passes the parents reference down

Just that there are some other lense libs for cljs, and there is synthread so I don't know which are better...

I liked it all in all..

is this not addressed in any of the docs - oops, I was thinking about re-frame

what does mike recommend with re-frame

Mike posted synthread link recently, so he is probably looking into it... superficially it looks like it can be used to achieve many of the same things like specter..

I saw a new lens lib today

posted a link to it in braid

@dvcrn this is what I will probably do, make a builder function that will modify params to my components accordingly..

gotta think of something I can search on so I can go find it

braid is not like slack

fuck

were still working on the search capability

actually the search works great, I just can't think what to...

nevermind

https://github.com/laforge49/dewdrop

no idea if it would help

just looked interesting

as did https://github.com/laforge49/aatree

are any of the ideas from om.next making their way into reagent or do they remain separate beasts

I think they should stay separate. I went to reagent because om became too much of a general framework like falcor or graphql

the ideas are good but IMO it is too complex for most apps

all I want is a wrapper around react and if I want more functionality then I take something like re-frame into the mix

Om.prev is too complex as a React wrapper compared to reagent.

And Om.next just solves different issues.

Reagent is only a view layer, while Om.next is also a data layer.

The approach Om.next has is something I agree is a great way to build more complex apps, but sometimes you just don't need that.

I kinda liked om.prev 😛

So yeah, I agree Om.next should not supersede reagent. But something like Om.next using reagent... that would be nice. In fact it's so nice I'm trying to make a thesis out of it : V

Hah, Om.prev felt too verbose to me.

well the query and mutation system next uses is very similar to reagent+re-frame

well, we were talking about the challenge of state management and lenses/cursors

so was wondering if any of that could fall out of om.next, but probably not

Well, not exactly - re-frame takes care of the event loop, but does not impose on you how you updated your data. Om.next has this whole machinery for merging state.

right - but I see users struggle with data

so

I think it could; composable component-scope queries and automatic data merging and normalisation it offers are great things.

Just possibly a bit too much hassle for small scope.

the thing that gave me probably the most headache was querying and remote querying

questions like: how do I query the state with my query and queries from sub components and their sub-components. And then: Implement something on the server that does the same with an existing database if you don't use datomic

my brain went 💥

I actually have a fairly "popular" project written in om.next, just without the server stuff - https://github.com/dvcrn/markright. The server stuff killed me

Well, I can't talk about how to exactly do that in practice since I didn't play with the implementation, just have been reading up on concepts like that since even before om.next was a thing (like Relay/GraphQL), but what it basically does it take your query and walk it like the tree it is, calling functions you registered for given types of vertices.

And yeah, I can agree that figuring out how to write a server-side parser to construct SQL queries from that would be non-trivial.

it is not

On the other hand - if you have an event sourced application or microservices it would be quite easy - you walk the query, make queries asynchronously and build up the response (if I understand correctly that's basically the idea behind how Falcor or GraphQL servers work).

But with SQL? Yeah.

It got me stumped enough that I decided to switch to event sourcing in my thesis to make it easier on me xD

When I have enough free time I will definitely go into om.next territory again but for now I am very very happy that something like reagent+re-frame exists

Yeah, I can see that. For a simple CRUD-y application, where a backend maps to SQL queries it just might be not what you want.

And working with reagent+re-frame will just be simpler and more fun.

I am secretly hoping that someone writes a query fragment parser for django to support om until I start the next app 😛

Django, ewww D :

(I came from Ruby, Django always looked awful to me)

Well, not sure about Om.next, but GraphQL parsers and servers will probably happen. Not sure why Om.next didn't decide to reuse that, but maybe the queries could be translatable between either?

I wonder who wrote the initial django pub/sub system

Python is pretty cool as a language, but all the big things made in it, like Django, always looked awful to me for some reason.

agreed

cuz their big and awful

I never used django

they forked my event/pub/sub library for all their internal event handling

and then evolved it

Oh, curious.

Django is awesome. Never liked a framework this much before

But I guess it comes down to personal preference

What do you not like about it?

Jaen if you are writing a thesis that is somehow about a future great Client / Server framework, or thinking in that space, then just want to make sure you have heard of this one:

https://github.com/samroberton/bureaucracy

I think I've came across it before; right now I'm just focusing on the synchronisation part, since that's the focus of the thesis, but if I ever decide to make a bigger framework out of that I'll be sure to keep it in mind. Thanks for reminding me of it.

@rafd: evaluate bureaucracy mentioned by @cjmurphy ^

Does anyone have any suggestions for building a search input bar type component with reagent, where an external resource is fetched on change of the value of the input text? The complexity is that you don't have to fetch the resource on every keystroke but only if the text is stable ie it hasn't changed for x milliseconds. I've seen this being done using react-timer-mixin but wanted to ask if anyone has any experience?

The issue I had with react-timer-mixin is that I just couldn't get it in a shape to be used in the browser. Its meant to be used with babel or something and I am not familiar with it

If you need something that needs preprocessing with Clojurescript there's no running from webpack or browserify unfortunately.

So you could process it with that and then use in :foreign-libs

Or alternatively maybe write a debounce based on core.async?

Something like this maybe - https://gist.github.com/xfsnowind/e15cc2e6da74df81f129?

I have no idea how they are doing it but the search input bar in #C0J20813K works as you described - at least, it works really well

@rohit: ^

@rafd: how do you guys do the search in braid?

@jaen, @meow, thanks!

looks like #C0J20813K uses the same debounce function @jaen mentioned

https://github.com/braidchat/braid/blob/a6c9200c95e7c652949fb37e600ab88bd72b6840/src/chat/client/views/threads.cljs#L69

Slightly different it seems (probably the original; the one I linked says it was modified to make the first call after the timeout instead of at the beginning), but yeah.

cheers!

No problem

if you come up with something better let us know

will do @meow

Hello folks, I've got a, probably noob, question regarding props in Reagent/React. How can something like this be achieved?

propTypes:
  age:  React.PropTypes.number.isRequired
  data: React.PropTypes.array

For such type validation Clojure land usually uses - https://github.com/Prismatic/schema

Since props in reagent are just function arguments you can use schema's function annotations and validations.

thanks @jaen