This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2015-12-13
Channels
- # admin-announcements (208)
- # beginners (53)
- # boot (46)
- # cider (10)
- # cljs-dev (26)
- # cljsjs (10)
- # clojure (66)
- # clojure-dev (3)
- # clojure-russia (14)
- # clojurecup (5)
- # clojurescript (302)
- # cursive (22)
- # data-science (1)
- # datomic (10)
- # emacs (1)
- # events (2)
- # hoplon (91)
- # incanter (1)
- # ldnclj (3)
- # leiningen (1)
- # off-topic (2)
- # om (41)
- # re-frame (40)
- # reagent (78)
@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.
how do i compose components made with reagent/create-class
? here's an example: https://www.refheap.com/112643
(defn gmap-parent
[:div
[gmap 1]
[gmap 2]])
You look to have made a bunch a fairly basic errors. Are you sure you have gone through all the basic material?
Go here: https://github.com/Day8/re-frame/wiki Read through that cluster of tutorials down the bottom under "Reagent Tutorials"
It will take you 30 mins, but you'll be old and wise by the end of it
this stuff works so well though you almost feel you don't need to read any docs until you get caught up in something 😉
I know what you mean
@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.
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 []
?
Form-2 in ()
won't work
Yeah, I imainge, I'm just curious if you happened to know offhand what is the exact failure mode.
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.
Not sure what the exact failure would be
Actually ... [(some-form-2) ...]
would work
Because the render function returned by the call, would be plonked in the first element of a vector.
But in the main, no, won't work
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.
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
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.
knowing nothing about react and being able to hack on components immediately just cause the code seems so obvious
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
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.
Isomorphic re-frame lives: https://carouselapps.com/2015/12/13/prerenderer-0-2-0-released
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.
I think they plan to do Nashorn, after Node
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.
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.
Prerenderer allows you to make those database calls on the server (Nodejs currently), generating the HTML as the calls return.
And, yes, if you are using servers which are JVM based, then Nashorn will be the go, when Prerenderer can run on it.
Oh, so the prerender has some sort of shims so you can write the database logic in Clojurescript/Node instead of doing XHR?
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.
So yeah, what I mean is it does exactly the same thing the application does in the browser - requests through XHR.
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.
Off to bed here.
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.
how do I start a reagent function. Lein figwheel does work but I cannot find out how to start a server
I think figwheel just starts the server for your static files automatically. Unless you mean server as in your application backend?
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)}]])
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?
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
(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)}]])
@mikethompson: im learning reagent and I hope I can use it on a ecommerce site which I have in mind
@roelof: the question above is pretty basic, so you'll have to be sure to read through the various tutorials
@mikethompson: any recommendations.I thought first reagent and then this one : https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components
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
@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
of course I can move that local state to the global state atom, but AFAIK it won't change much
@si14: https://github.com/Day8/re-frame/wiki/Using-Stateful-JS-Components (has a re-frame orientation, but you'll get the idea)
Plus also have a look aver the reagent cookbook
@mikethompson: thanks, I've just thought that it can be made easier, it's React component, too, after all