Fork me on GitHub
#re-frame
<
2015-10-22
>
mbertheau03:10:19

Is there something I can plug in that'll let me inspect app-db on the SPA?

emil0r07:10:32

(ns ^:figwheel-always x.core (:require [re-com.core :refer [v-box label title p gap]] [re-com.util :refer [get-element-by-id]] [reagent.core :as reagent])) (defn main [] [gap :size "1em"]) (defn ^:export mount-ui [] (reagent/render [main] (get-element-by-id "app"))) (mount-ui) ---- I get this exception when I try to run that code: Uncaught TypeError: Cannot read property 'call' of undefined. Any ideas what can cause it? If I use [p "text here"] it works, and any normal functions that I define ala reagent works

mccraigmccraig07:10:42

@mbertheau: do you mean something more than inspecting @re-frame.db/app-db in the repl ?

Pablo Fernandez10:10:22

When you are waiting for an AJAX request, how do you show the user that progress is happening?

quantisan10:10:18

@pupeno: i use a flag in app-state and show a loading component when it's true

quantisan10:10:34

loading view component*

Pablo Fernandez11:10:00

quantisan: what about forms? the form is submitted and I’m waiting for the reply that might me OK or validation errors.

quantisan11:10:05

you can add a modal, alert box, etc. on your form to show it's loading

quantisan11:10:14

this seem like a design choice

Pablo Fernandez11:10:26

It’s part design, part coding. I’m also interested in how to keep track of waiting for something without having to do it explicitly every time. Some useful pattern.

quantisan11:10:16

i've also done dispatch for redirect or whatever inside the submit dispatch

quantisan11:10:29

event driven

Pablo Fernandez11:10:41

re-frame + reagent is awesome!

mikethompson11:10:31

@mbertheau: Here is a useful debugging tip I picked up from @escherize ... When you are debugging a reagent view ... and particularly the value coming through in a cursor or subscription (re-frame) or props ... ... add something like this to the hiccup in your view ... [:pre (with-out-str (pprint @some-ratom))] ;; assuming that @some-ratom is the value you want to observe You don't even have to use pprint, you could just do this: [:pre (pr-str @some-ratom)] If you do use the pprint version then you'll need to require it in at the top of your view.cljs: [cljs.pprint :refer [pprint]] Further note: the advanced version of this technique is to not use pr-str or pprint but instead to use @yogthos' excellent json-html library: https://github.com/yogthos/json-html for an even more carefully arranged display.

escherize11:10:06

I've added something to that

escherize11:10:52

I'm not sure if it's a great idea, but I add the json-html'd table to the bottom of the top level form, in a div with a class that has display:none.

escherize11:10:33

I hacn't noticed any performance issues with it so far.

escherize11:10:32

btw, @mikethompson I've been using recom (and learning flexbox) more lately, it's by far the better way to build html.

mikethompson11:10:22

@escherize: excellent. I actually think that the layout side of re-com is probably the most useful and reusable part of the whole thing

mikethompson11:10:28

flexbox is still pretty terrible (compared to other non-browser technologies I've used) BUT it is still waaaaaaay better than the rest of the HTML layout tech available

mikethompson11:10:34

@escherize: just to state the obvious ... be really sure to read the docs supplied: http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/layout

mikethompson11:10:17

There's some hard-fought-for knowledge in those docs. A lot of the flexbox tutorials drown you in detail. But the key thing to understand when nesting them, is the flex attribute (aka :size in re-com). It always resolves to a triple of values (GSB).

mikethompson11:10:41

You probably know that already, but I always like to stress it.

mikethompson11:10:40

BTW, we have been working on a "grid" component for re-com. Virtual vertical scrolling (ie. can handle 100K rows). Row headers, Col headers. Scrollbars etc

ivanbokii12:10:06

@mikethompson: do you think it's still too early to use flexbox for modern web apps development?

ivanbokii12:10:20

because I just discovered re-com and it's beautiful

gjnoonan12:10:54

ivanbokii: flexbox has pretty good support across the board now for, as you say, modern development http://caniuse.com/#search=flexbox

ivanbokii12:10:36

@gjnoonan: yep, checked that, but a bit afraid about firefox problems listed here https://github.com/Day8/re-com#warning-re-com-might-not-be-for-you-just-yet

mangr3n14:10:57

What is going on here? "Reactive deref not supported in lazy seq"

jaen15:10:25

What it says on the tin

jaen15:10:30

You need to force the seq

jaen15:10:35

With something like doall

mangr3n15:10:47

yeah, I need to look up lazy sequence and understand better, I'm new to clojure (relatively)

jaen15:10:51

IIRC reagent tracks invalidation with reading a mutable var referring to the currently rendered component; I imagine if you put a deref in a lazy seq then the component might end up being different than what you expect and it will break

mangr3n15:10:12

how do I lookup a db value without having it change?

jaen15:10:15

Basically any sequence in Clojure is lazy (unless something explicitly says in docs it's eager)

mangr3n15:10:47

ok, thanks, I'll do more learning and figure that part out

jaen15:10:28

Things like map, filter and so on return lazy sequences by default (there was one frequently usedseq function that is eager, but I'm not 100% sure which one so I don't want to confuse)

mangr3n15:10:35

BTW, nevermind that request, I thought that because I wasn't seeing a value that I'd "missed" the signal from the mutation. It seems that a subscription always fires the first time.

mangr3n15:10:09

I was failing to de-ref a value from a reaction as I moved from statically defined data to data from a subscription.

mangr3n15:10:01

I'm building the first page into an SPA replacement of an existing J2EE, jquery/Struts/Hibernate + Backbone + handwritten JS/Java knitted castle...

mikethompson19:10:51

@ivanbokii: regarding using flexbox now, or not, I wrote this in the the re-com README > the grinding pain and longevity of IE6 has conditioned many to expect 8, 9 and 10 to hang around forever too. But, this time around, there's quite a different dynamic. Microsoft itself is very actively forcing their demise - come Jan 12th 2016 corporates will have to be on IE11. See http://blogs.msdn.com/b/ie/archive/2014/08/07/stay-up-to-date-with-internet-explorer.aspx > So, by Q1 2016, the market share of IE9 and IE10 will have diminished sufficiently that they could be ignored. Probably. Maybe. If so, a modern flexbox implementation will be available on all the browsers you then care about. So that's surprisingly soon, but not now!

mikethompson19:10:58

I'm in the fortunate position that I don't have to worry about the retail web. My target is Chrome.