This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-05-20
Channels
- # beginners (49)
- # boot (139)
- # cider (10)
- # clojure (82)
- # clojure-belgium (59)
- # clojure-dusseldorf (5)
- # clojure-russia (11)
- # clojure-sanfrancisco (2)
- # clojure-uk (56)
- # clojurebridge (4)
- # clojurescript (138)
- # cursive (19)
- # datomic (8)
- # dirac (1)
- # editors (11)
- # emacs (18)
- # flambo (21)
- # hoplon (45)
- # jobs (1)
- # juxt (3)
- # keechma (1)
- # mount (43)
- # off-topic (2)
- # om (64)
- # om-next (1)
- # onyx (2)
- # other-languages (8)
- # re-frame (72)
- # reagent (99)
- # ring-swagger (7)
- # rum (3)
- # spacemacs (21)
- # specter (5)
- # untangled (42)
- # vim (4)
- # yada (7)
The apps Ive work on typically have it at the root level component and dispatch to either a set of unsecure or secure pages depending on the auth
how would you handle it at the router level?
If you were using secretary it would catch a route and youd check and re-dispatch?
check login creds for every path not matching a login point and redirect to login if not existing
I think the former works better with a global app state
the latter at the router level is probably fine for a couple page system
I dont think that would scale out very well
or it would get very messy I'd think
with the root level component though you could use lifecycles to handle prop changes which would be more centralized logic
and easier to debug perhaps?
Ex. I trigger a page loading indicator and such during transitions
coming from the react world I’m used to doing such things with router logic, so it’s kind of a shift
“feels” wrong to me to have a top level stateful component at the top of every view, versus just routing to a series of components that represent any one route etc
secretary/bidi work in a very different way from react-router though, so its not as easy to do this in as expressive a way
hmm I think maybe we are speaking about different things perhaps. When you say "top level .. at the top of every view" I don't think thats the structure Im using
I mean I have 1 top level component thats acting as if it were react-router in a way
except it doesnt have the cool nesting and inheriting properties
it just has a subscription on like a session/page value that would get changed from a dispatch (re-frame) in a secretary route
so my secretary routes pretty much just relay to a handler called :route-changed with the params, path, and page id expect to load
yeah i mean like, every view is a composition of several components and is matched with a route.. like /settings would load [loading-component [top-nav [side-nav [settings-page]]]]
@sbmitchell @mattsfrey with Keechma you can isolate the session part of the app to the “outer” application that can start the real app only when the user credentials are present. It is in my (extremely biased) opinion one of the nicer way to handle that problem (here’s an (annotated) example http://keechma.com/annotated/login.html).
We should celebrate Reagent: https://twitter.com/wazound/status/733561237569556480 With almost no fanfare, and none of the hype, it has grown organically to now comfortably be the most used CLJS React library.
All credit to Dan Holmstand. Just a great bit of work.
This has happened also thanks to your great documentation efforts, @mikethompson !
Guys, what a common way in reagent to work with children
, smth like react top level api?
Ok, react has API to work with children in component, React.Children have map, filter and etc. for work with children. How do the same in reagent? Do I understand correctly that in reagent children is seq and I can work with it like it regular clojure seq?
@savelichalex: kinda sorta... mostly reagent render functions produce hiccup and reagent converts that to the actual react components behind the scenes - do you have something in particular you want to achieve ?
@savelichalex: maybe if you post a code of the output you want or describing conceptually what you want it'll be clearer
@savelichalex: you can also post the react version?
0.14.8
Has anyone been able to use third party ReactNative components with reagent? Any special loops and hoops you need to run through?
@pez: I’m use
with re-natal all works fine
it should be possible with one atom, if the input event handler directly adds the value to the atom
@savelichalex: thanks! Will check that out.
@thomas: you could use a single atom and reagent reaction
s https://github.com/reagent-project/reagent/blob/master/src/reagent/ratom.clj#L5 to let each component to subscribe to its part of the data held in the atom... which is half of what re-frame does
I was hoping somebody might have some insights into ratom/reaction - Basically how expensive it is to reference a reaction to a fairly complicated bit of transformation logic? Is it computed frequently or is it “smart” enough to only do the calculation when one of the ratoms used in the calculation logic actually changes ?
Hi all, I’ve got a string like this, coming from an external source: “blabla <b>some important text</b> bla”. The question is if it is possible to get it rendered the way it is expected; but without having to parse this string and construct all the [:b ] elements.
you can use http://google.github.io/closure-library/api/namespace_goog_string.html#unescapeEntities
just have seen that https://github.com/reagent-project/reagent/issues/104
@mattsfrey: have a read of https://github.com/Day8/re-frame#a-more-efficient-signal-graph and chain your expensive reactions... if you want to see which reactions are being triggered in your code then you can use the techniques described here https://github.com/Day8/re-frame/wiki/Debugging which can equally be applied to a vanilla reagent app as to a re-frame app (since they just trace cljs functions)
Hello everyone!! I need some directions here… ( i hope this is easy to follow) I’m porting a react app with the exact same structure, a select box updates the key in where to find the relevant data and that re-renders the app, and while react is able to only change the relevant bits (some divs width in style tags in my case) reagent regenerates the whole div…and that prevents css animations when changing the data… Should the updating of the data be handled differently here? 🙂
Hey @vectorsize do you have a code snippet you can share?
I can share yes but then it will be the whole thing, otherwise i dont whats relevant haha
leme try to strip the important parts…
Whole thing is fine, especially if just a single namespace, otherwise trying to make it more minimal would be helpful
thanks in advance @gadfly361
I’m pretty new with clojurescript/reagent and I don’t have a clear picture on how to use the r/atom etc
i wouldn't thank me just yet, not sure if i will be able to help 😉 Can you show me what bars
is?
haha yeah but ur trying haha, bar is a component that taks the data in the given key and renders divs it’s a visualization with horizontal bars
i mean it loops and renders a bar per data point
but from down there all the data comes from the already derefed value
gotcha, i was asking just to see if there was a way to reorganize when/where data is flowing / dereferenced (also because reagent components are usually called with [..]
instead of (...)
). Currently, because you are defrefing current
in the body of stacked-chart, you will indeed see its whole div rerender. if that is a problem for however you are animating, you can break up the sup-pieces of stacked charts into their own named components, and have the sub-components deref as needed.
here’s how the thing should work http://vsaiz.me/example/
I mean it does make sense that reagent is re-rendering the bars, but then react’s algorithm should diff only what changes and not the whole div
the link is the react version
i think to help at this point, i do need to see bars
and whatever it depends on css wise. the link is helpful, because i know what you want now
sure here you have the whole app https://gist.github.com/vectorsize/646c82c34f3bbe76615c94e6614002f7
in the javascript version the data comes from the top and changes top to bottom each time but that didnt work, and i’ve tried using the “global” reference and derefing it in different places without luck
what should i use for x-scale
..when i tried pasting the gist over, i got undeclared for data
and x-scale
haha yeah i stripped the data because I’m not sure if I could share it… sorry
thanks yourself ^_^
at some point I should learn more about r/atoms derefing lenses and whatnot, this was supposed to be a 1-to-1 port but then the updating didnt work…
I’m guessing there’s no quick answer then along the lines of “don’t deref that there, do it like this instead” 😄
it may be a simple answer like that, just trying to parse the code first. will be a little bit, but i'll get back to you
but hey don’t worry, I don’t want you to work on it for long, I was just hoping there would be something obvious that I didnt know since I’m a noob
The react code is working, was just trying to learn 🙂
also I’m not staying online for long…
thanks a lot anyways, if you find something just ping me I would love to see the “proper way"
@vectorsize: this may not be helpful to you, but here is a minimal example to get the css transitions you are after: