The component was rendered, but I cannot edit the input field, and I hope to understand why.

@goodwind89: if you remove the inner function, you’ll re-create your atom val each time shared-state get rendered, overwriting it

@jhchabran: so when I make an edit to the field, the entire thing is re-rendered with the old value "foo" set to atom val?

yeah exactly

I see. Thanks!

there’s more info on this subject here : https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components

basically when you’re not returning a function, you’re collapsing component creation and rendering, which is fine in many cases where you don’t have to create an initial state

I think almost everyone shot himself in the foot with this one at some point 😄

yeah, that I understand. The tricky part is when you do return a function. I guess I'd need to test a few scenarios to see how Reagent handles, for example, if a function returns a function that returns a function...

there are only form 1, 2 which returns a fn and 3 a map of functions managing lifecycle, so no worries 😄

actually I tested it just now

the div was rendered. So I guess Reagent would try to unwrap the function, until it sees a component for rendering.

@jhchabran: when you say form 1,2 and 3, are you refering to some documentation? That would help my newbie understanding.

I gave you a link just above

https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components

that’s where it explains all of this

oh I see, soorrry. Well need to read it through first before asking any further questions.

Thanks again

np np and I’m a rookie too, I’ve been toying with a google map component that actually updates its position based on an atom value

think I’ve got it right this time, but I’m waiting that coffee reaches my brain to finish it 😄

@goodwind89: I actually did a mistake while implementing my gmap that could have been avoided if I looked how it should have been done in ReactJS in the first place

so at some point, take some time reading more about reactjs, it will really help imho

yeah, that makes sense. The documentation in Reagent probably assumes some fundamentals from Reactjs. I can only go so far monkey patching from tutorials.

@gregg: regarding the unpack resources stuff mentioned here https://github.com/Day8/re-com/blob/master/project.clj#L37-L48 — Boot provides a bunch of facilities to move files around on the classpath. Maybe that’s an option to explore. If you have any questions let me know, happy to help etc.

@goodwind89: re-frame`s readme is really well written, if you’re looking to build a fully fledged SPA, I’d suggest reading it too

it gives you keys to structure your app, while reagent is (as expected) just the “view” part of your app

@jhchabran: this is actually pretty cool. I have no front-end development experience before, so this is going to be quite useful. And I thought that Clojure documentation is sparse, turns out I am wrong haha.

well having toyed a lot with front-end, either with QT or web stuff, how state is handled with clojure/om/reagent is reaaalllly refreshing and makes a lot of sense

you’re not missing very much by not having the used to traditional players in this field while learning how to do it with reagent I’d say; amazing libraries, and great code ofc, I’m not saying the traditional players are crap at all, but that I find that how state is managed explicitly a much saner way to build UIs

I strongly suggest watching Rich Hickey talks, like simple made easy and value as values, it’s all in the same spirit after all

@martinklepsch: thanks for your info. We intend to switch to boot around here at some point so perhaps this will push us along a little quicker now.

@jhchabran: that's encouraging to hear.

Couldn't agree more @jhchabran. ClojureScript, functional programming, immutable data, React, Reagent, re-frame is one killer combination and it's been a breath of fresh air for web application development, for me at least

Just wondering if anyone has a 'best practice' pattern for handling debounce with reagent/re-frame? Had a look at the re-frame source but couldn't see anything in the handler code.

@owenrh: by debouncing, do you mean yielding to the browser?

or is that rate limiting calls?

http://davidwalsh.name/javascript-debounce-function

@danielcompton: yep, rate limiting events. Can be done with core.async or RxJS. Just wondered if there was a built-in approach with re-frame handlers, or an approach that was preferred.

I don’t think I’ve come across a need for that, Reagent, Re-frame, and React all do a pretty good job of avoiding unnecessary work in rendering

which leaves side effects, which are typically triggered by the user or external events

Do you have a concrete example?

@danielcompton: I guess a typeahead search going to the back-end

that’s a goodie

I think you’d need to write something yourself there, core.async would probably be a good fit

cool, no probs

@owenrh https://gist.github.com/Deraen/8fbc90721c801e487332

i used that one w reagent. not reagent/re-frame specific but works

thanks @shem - yeah, I came up with something along those lines https://gist.github.com/owenrh/8baeb98c5081ea648381 - although I'm not sure if mine fits into the reagent/re-frame flow well.

does Reagent still work when I upgrade? [cljsjs/react "0.13.3-1"] is available but we use "0.12.2-8"

I'm trying to capture a Bootstrap event in a reagent component, so the google map will load after switching to the Bootstrap tab. I can call the function at the bottom of the file, and that works with lein figwheel, but not after compilation, and anyway doesn't feel right.

(defn nav-tab-on-event []
    (-> (js/$ js/document)
        (.on "shown.bs.tab"
             "a[href='#maps']"
             (fn [e] (map-creator)))))

This also doesn't work when I put the body in [:div], like normal components.

If I put the body of this function inside my tabs, then the tabs don't render properly. Maybe I'm lacking some understanding of how React/Reagent works?

I'm rendering this like so (and this works in lein figwheel but not in a JAR):

(defn google-map []
  (reagent/create-class {:reagent-render map-div
                         :component-did-mount nav-tab-on-event}))

Never mind, I finally got it. I had to add $.on = {}; to my externs file. Working in dev but not after compilation should always be a hint to look at externs...

@borkdude not sure, but good question