This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-01-12
Channels
- # admin-announcements (8)
- # alda (11)
- # announcements (53)
- # architecture (2)
- # aws (10)
- # beginners (69)
- # boot (403)
- # braid-chat (160)
- # cider (10)
- # cljs-dev (14)
- # cljsjs (26)
- # cljsrn (34)
- # clojure (223)
- # clojure-art (1)
- # clojure-brasil (4)
- # clojure-dev (10)
- # clojure-france (1)
- # clojure-gamedev (1)
- # clojure-nl (14)
- # clojure-russia (20)
- # clojure-seattle (8)
- # clojure-sg (1)
- # clojurebridge (2)
- # clojurescript (156)
- # code-reviews (2)
- # community-development (305)
- # cursive (5)
- # datavis (33)
- # datomic (38)
- # devcards (4)
- # dirac (39)
- # dunaj (3)
- # emacs (5)
- # events (2)
- # funcool (45)
- # hoplon (3)
- # instaparse (24)
- # jobs (2)
- # ldnclj (77)
- # lein-figwheel (4)
- # leiningen (1)
- # mount (49)
- # nyc (14)
- # off-topic (52)
- # om (125)
- # omnext (4)
- # onyx (13)
- # other-lisps (1)
- # overtone (8)
- # parinfer (31)
- # plastic (6)
- # portland-or (3)
- # quil (4)
- # re-frame (6)
- # reading-clojure (16)
- # reagent (212)
- # ring-swagger (11)
- # robots (5)
- # spacemacs (4)
- # specter (1)
- # yada (26)
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.
@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!
Looking
Ah. Fending off the Slackpocalypse
What database ?
I'd point you in the direction of rethinkdb
For anything realtime
They have something called "fusion" currently in the works
I'm not actually. Its true!!
Writing is torture. Takes so long !!
I can bearly write a slack comment without having to reedit it
Will have a look.
A bit. Not to its full potential yet.
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>
How react-native works under the hood (afaik) is that it decodes data to JSON, passes it through the native bridge to objc which will then work with it and set things as native properties@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"]]))
Turns into a circular structure so when trying to stringify it, it throws TypeError: Converting circular structure to JSON
I'm not sure if r/as-element
is the right tool for this but in console the rendered component looks good to me
@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 '
Ah, I see. Well https://github.com/binaryage/cljs-devtools might help to understand a Clojurescript more clearly. But that's Javascript, right?
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>
would createAnd 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)}]]
doesn't work?the problem comes when passing a component as a property like [foo {:something [view (...)]}]
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.
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
.
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)]
(...)
Though still not working the way it should. I'm gonna experiment a little bit morebut 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
> was my reagent call above wrong by chance? Which one? I'm not sure which you refer to.
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 "..."}}]])]
@dvcrn: yup, that looks like it should have worked. I guess your problem was you were trying to pass [some-component {} ...]
, right?
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)...
As you can see - you don't. Reagent tracks dereferences to ratoms at runtime using a kind of dynamic scoping.
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...
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
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...
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..
@dvcrn this is what I will probably do, make a builder function that will modify params to my components accordingly..
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
all I want is a wrapper around react and if I want more functionality then I take something like re-frame into the mix
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.
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
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.
I think it could; composable component-scope queries and automatic data merging and normalisation it offers are great things.
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
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.
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).
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.
I am secretly hoping that someone writes a query fragment parser for django to support om until I start the next app 😛
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?
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.
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:
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.
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.
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
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.
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
... I am fully aware that Clojure is very different and probably doesn't need that kind of hinting. But I think they are useful for stability/development.For such type validation Clojure land usually uses - https://github.com/Prismatic/schema