Fork me on GitHub
#reagent
<
2015-08-10
>
goodwind8908:08:06

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

jhchabran09:08:19

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

goodwind8909:08:05

@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?

jhchabran09:08:23

yeah exactly

goodwind8909:08:19

I see. simple_smile Thanks!

jhchabran09:08:33

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

jhchabran09:08:38

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

goodwind8909:08:22

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...

jhchabran09:08:26

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

goodwind8909:08:01

actually I tested it just now

goodwind8909:08:52

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

goodwind8909:08:05

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

jhchabran09:08:25

I gave you a link just above simple_smile

jhchabran09:08:43

that’s where it explains all of this

goodwind8909:08:53

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

goodwind8909:08:59

Thanks again simple_smile

jhchabran09:08:40

np np simple_smile 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

jhchabran09:08:14

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

jhchabran09:08:23

@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

jhchabran09:08:22

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

goodwind8909:08:42

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

martinklepsch09:08:05

@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.

jhchabran09:08:15

@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

jhchabran09:08:53

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

goodwind8909:08:27

@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.

jhchabran09:08:03

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

jhchabran09:08:21

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

jhchabran09:08:08

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

gregg09:08:36

@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.

goodwind8909:08:30

@jhchabran: that's encouraging to hear.

gregg10:08:44

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 simple_smile

owenrh10:08:05

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.

danielcompton10:08:06

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

danielcompton10:08:46

or is that rate limiting calls?

owenrh10:08:21

@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.

danielcompton10:08:54

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

danielcompton10:08:12

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

danielcompton10:08:17

Do you have a concrete example?

owenrh10:08:23

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

danielcompton10:08:52

that’s a goodie

danielcompton10:08:42

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

owenrh10:08:33

cool, no probs

shem12:08:44

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

owenrh12:08:18

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.

borkdude12:08:45

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

coyotespike16:08:24

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.

coyotespike16:08:47

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

coyotespike16:08:12

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

coyotespike16:08:19

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?

coyotespike17:08:06

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

coyotespike17:08:07

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

coyotespike18:08:08

Never mind, I finally got it. simple_smile 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...

gadfly36122:08:09

@borkdude not sure, but good question