This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
- # 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
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
with the root level component though you could use lifecycles to handle prop changes which would be more centralized logic
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
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.
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
Has anyone been able to use third party ReactNative components with reagent? Any special loops and hoops you need to run through?
it should be possible with one atom, if the input event handler directly adds the value to the atom
@thomas: you could use a single atom and reagent
reactions 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.
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? 🙂
I can share yes but then it will be the whole thing, otherwise i dont whats relevant haha
Whole thing is fine, especially if just a single namespace, otherwise trying to make it more minimal would be helpful
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
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
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.
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
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
what should i use for
x-scale..when i tried pasting the gist over, i got undeclared for
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
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:
steps to reproduce:
lein new reagent-figwheel vectorize
2) add the css to the index.html file
lein figwheel dev ... then go to localhost:3449