Fork me on GitHub
#reagent
<
2015-12-13
>
mikethompson12:12:25

@jaen @mbertheau In a minor attempt to clarify the discussion around () and [] I've tweaked this section: https://github.com/Day8/re-frame/wiki/Using-%5B%5D-instead-of-()#which-and-why And I've added this: https://github.com/Day8/re-frame/wiki/When-do-components-update%3F#appendix-1 Modest improvments.

naomarik12:12:36

how do i compose components made with reagent/create-class? here's an example: https://www.refheap.com/112643

naomarik12:12:53

i would expect two h1's saying "map1" and "map2" but I only get one

mikethompson13:12:29

(defn gmap-parent
  [:div 
    [gmap 1]
    [gmap 2]])

naomarik13:12:24

could have sworn i tried that ;(

naomarik13:12:27

works though!

mikethompson13:12:45

You look to have made a bunch a fairly basic errors. Are you sure you have gone through all the basic material?

naomarik13:12:10

i've skimmed it 😉

naomarik13:12:03

i've got at least 8 docs i'm referring to

mikethompson13:12:04

Go here: https://github.com/Day8/re-frame/wiki Read through that cluster of tutorials down the bottom under "Reagent Tutorials"

mikethompson13:12:34

It will take you 30 mins, but you'll be old and wise by the end of it simple_smile

naomarik13:12:42

thanks for that one 😉

naomarik13:12:12

this stuff works so well though you almost feel you don't need to read any docs until you get caught up in something 😉

mikethompson13:12:28

I know what you mean

jaen13:12:17

@mikethompson: I've taken a look at the changes you mentioned and they do look good. It probably should cause less confusion for people coming to reagent. Though I think somehow underlining that (component-fn ...) is exactly the same as calling a Clojurescript function outside of reagent context might be helpful to point out.

jaen13:12:31

Also, since you know reagent so well - how would a form-2 component behave if used with ()? Wouldn't that effectively mean the state you set up in the outer fn is recreated on each re-render, not on re-mount only as with []?

mikethompson13:12:51

Form-2 in () won't work

jaen13:12:33

Yeah, I imainge, I'm just curious if you happened to know offhand what is the exact failure mode.

mikethompson13:12:27

A function call via () only works because it returns hiccup, which is then placed inside other hiccup. If a Form-2 is called via () then it returns a function which will then be placed amongst the hiccup which will .... Hmm ... badness will follow.

mikethompson13:12:49

Not sure what the exact failure would be

mikethompson13:12:33

Actually ... [(some-form-2) ...] would work

mikethompson13:12:09

Because the render function returned by the call, would be plonked in the first element of a vector.

mikethompson13:12:24

But in the main, no, won't work

jaen13:12:43

Well, yeah, you have to have at least one React component after all. I guess I'll just check out how it behaves exactly when I have some time.

jaen13:12:53

Anyway, nice clarification.

mikethompson13:12:04

Yeah, I'm starting to feel too close to some of this stuff. You loose your ability to explain things when they get too second nature

jaen13:12:00

And Reagent is simple, but at points deceptively so - it's probably hard to appreciate how a beginner can be misled if you know how it works.

naomarik13:12:49

agreed with that

naomarik13:12:32

knowing nothing about react and being able to hack on components immediately just cause the code seems so obvious

mccraigmccraig13:12:57

ha, a regular re-read of https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components reminds me of common n00b errors, most of which i have made at some point or other

jaen13:12:57

Form-3 was probably the most confusing one for me, since at the point I didn't know of dom-node or current-component and the like.

jaen13:12:55

That needs a running node or am I understanding that wrong?

mikethompson13:12:15

Yeah, SPAs suffer from slow startup time. You have to get all that js loaded and parsed before you can render the HTML. Prerenderer actually generates the HTML for the first page on the server (Nodejs), and sends that PLUS the full SPA. As a result the user sees HTML much faster.

mikethompson13:12:54

I think they plan to do Nashorn, after Node

mikethompson13:12:29

To get the HTML, they actually run reagent/re-frame on the server. gather up the HTML generated and send that. Plus all the normal SPA stuff.

jaen13:12:34

I guess being able to do it with Nashorn would be nicer, since you could shim requests to use your database connectivity in Clojure directly, which might be faster than even going through a local socket.

mikethompson13:12:27

Prerenderer allows you to make those database calls on the server (Nodejs currently), generating the HTML as the calls return.

mikethompson13:12:57

And, yes, if you are using servers which are JVM based, then Nashorn will be the go, when Prerenderer can run on it.

jaen14:12:29

Oh, so the prerender has some sort of shims so you can write the database logic in Clojurescript/Node instead of doing XHR?

mikethompson14:12:45

Prerender uses a (temporary?) fork of: https://github.com/driverdan/node-XMLHttpRequest So that you can run the same ClojureScript/Reagent/re-frame code on the server (Nodejs) as you would in hte browser.

jaen14:12:46

So yeah, what I mean is it does exactly the same thing the application does in the browser - requests through XHR.

jaen14:12:01

I was just curious if there is something planned to not have it do requests.

mikethompson14:12:14

So you are running your SPA on the Nodejs Server, just as it would run in the browser. No modifications made. Making XHR calls, etc. And then, at a certain point, you effectively scoop up the HTML and send it to the browser. The idea is that your code runs on the server without modification. You only want one version of your code. Not a browser version and server version.

mikethompson14:12:17

Off to bed here.

jaen14:12:15

Yeah, I understand that, but I imagine it will probably be slower than if data were requested without an XHR roundtrip and was curious if there's some investigation into what is the overhead and whether there might be some solutions. Also, good night.

roelof15:12:15

how do I start a reagent function. Lein figwheel does work but I cannot find out how to start a server

jaen15:12:22

I think figwheel just starts the server for your static files automatically. Unless you mean server as in your application backend?

roelof15:12:31

you are right. when click the link I see the first component

roelof15:12:59

I will play and experiment with this today and tomorrow

roelof18:12:50

I wonder if this example :

(ns example
  (:require [reagent.core :as r]))
(def click-count (r/atom 0))

(defn counting-component []
  [:div
   "The atom " [:code "click-count"] " has value: "
   @click-count ". "
   [:input {:type "button" :value "Click me!"
            :on-click #(swap! click-count inc)}]])

roelof18:12:08

could easily be changed so I can also decrease the number

roelof18:12:34

and later maybe a input field so I can change the number in or decreased ?

roelof18:12:09

Could be handy for something I have in mind for another project I have in mind

si1419:12:04

am I right that this https://github.com/reagent-project/reagent/issues/5 means that http://hacker0x01.github.io/react-datepicker/ giving "Uncaught TypeError: this.refs.input.blur is not a function" error can't be fixed?

si1420:12:58

somewhat related question: how can I change non-Reagent component's state in Reagent? e.g. to use this http://www.gpbl.org/react-day-picker/docs/GettingStarted.html

mikethompson20:12:47

(ns example
  (:require [reagent.core :as r]))

(def click-count (r/atom 0))

(defn counting-component []
  [:div
   "The atom " [:code "click-count"] " has value: "
   @click-count ". "
   [:input {:type "button" :value "+"
            :on-click #(swap! click-count inc)}]
   [:input {:type "button" :value "-"
            :on-click #(swap! click-count dec)}]])

si1420:12:41

sorry, I misunderstood how that thing works

roelof20:12:50

yes, I found out myself by trying

roelof20:12:22

@mikethompson: im learning reagent and I hope I can use it on a ecommerce site which I have in mind

mikethompson20:12:26

@roelof: the question above is pretty basic, so you'll have to be sure to read through the various tutorials

roelof20:12:53

i m just reading the readme of reagent for my first steps

roelof20:12:18

and try to understand it

roelof20:12:43

I see that reagent puts a lot of javascripts on the code

roelof20:12:28

@mikethompson: any recommendations.I thought first reagent and then this one : https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components

si1420:12:49

is there any better way to handle this local state? In particular, I'm a bit worried about [_ @choosen-day]. Without this bit Reagent doesn't register the dependence of this component on choosen-day

mikethompson20:12:20

@roelof There's other Wiki pages there too which will be useful. Then there's, say: https://github.com/jonase/reagent-tutorial Plus look at the cookbook: https://github.com/reagent-project/reagent-cookbook

si1420:12:25

of course I can move that local state to the global state atom, but AFAIK it won't change much

mikethompson20:12:06

Plus also have a look aver the reagent cookbook

roelof20:12:42

Thanks, enough to do in the next few days

si1420:12:22

@mikethompson: thanks, I've just thought that it can be made easier, it's React component, too, after all

si1420:12:11

(sorry, didn't want to sound offensive)