Fork me on GitHub
#reagent
<
2015-06-11
>
escherize04:06:50

I've tried to stay away from the reagent cursor, in favor of re-frame.

gadfly36105:06:36

I like re-frame and its subscriptions. However, I have been unsuccessful to convince a few friends of their value over cursors. Anyone have an opinion on using cursors or subscriptions (or using neither approach)?

ul05:06:48

I use subscriptions, they are fine. I've migrated to freactive.core rx mechanics as the underlying basis for subscriptions because it has more knobs to control evaluation lazyness and more sane in notifying watchers than reaction, which is critical to because I need to use non-Reagent renderers and like to use them with re-frame architecture.

ul05:06:23

My first attempt was to use Javelin cells, they are superior for description of derived data, but I had some problems to make them dynamic enough.

ul05:06:16

They force spreadsheet-like approach, which is fine per se, but forces some architectural decisions which I was not ready to make.

ul05:06:51

Subscriptions has two selling points: they help you to have derived data without a hassle and they are read-only, enforcing one-way data-flow.

ul05:06:19

cursors are just too poor in derived data representation capability

ul05:06:43

access by path, maximum — by transforming function (lenses case)

ul05:06:02

latter may look like subscriptions, but it is not

ul05:06:41

because subscriptions provide very valuable thing over lenses — cutting evaluation of non-changed branches of your derived data graph

ul05:06:12

you have not to make expensive recomputations all the time

gadfly36105:06:32

Awesome, I'm going to give freactive another look then! I haven't played around with it yet.

escherize11:06:35

alright, I want to recreate this demo of f-reactive in reagent:

escherize11:06:46

(ns example1
  (:refer-clojure :exclude [atom])
  (:require [freactive.core :refer [atom cursor]]
            [freactive.dom :as dom])
  (:require-macros [freactive.macros :refer [rx]]))

(defonce mouse-pos (atom nil))

(defn view []
  [:div
    {:width "100%" :height "100%" :style {:border "1px solid black"}
     :on-mousemove (fn [e] (reset! mouse-pos [(.-clientX e) (.-clientY e)]))}
    [:h1 "Hello World!"]
    [:p "Your mouse is at: " (rx (str @mouse-pos))]])

(defonce root (dom/append-child! (.-body js/document) [:div#root]))

(dom/mount! root (view))

escherize11:06:49

Here's what I've got so far:

(defn home-page []
  (let [mp (reagent/atom nil)]
    [:div.container {:on-mousemove (fn [e]
                                     (.log js/console "mouse moved.") ;; does not fire
                                     (.log js/console e) ;; <- nil for clientX and Y
                                     (reset! mp [(.-clientX e) (.-clientY e)]))}
     [:pre (pr-str @mp)]]))

escherize11:06:08

:on-mousemove doesn't seem to work

rohit11:06:51

How to use facebook’s Fixed Data table with reagent. Thanks to @ul! https://gist.github.com/ducky427/10551a3346695db6a5f0

mikethompson12:06:20

@escherize: Won't that need to be a form-2 fucntion?

mikethompson12:06:55

(defn home-page []
  (let [mp (reagent/atom nil)]
    (fn []               <----  added 
      [:div.container {:on-mousemove (fn [e]
                                     (.log js/console "mouse moved.") ;; does not fire
                                     (.log js/console e) ;; <- nil for clientX and Y
                                     (reset! mp [(.-clientX e) (.-clientY e)]))}
       [:pre (pr-str @mp)]])))

escherize12:06:31

derp, yes this was an obvious mistake, even with the updated function :on-mousemove doesn't register

escherize12:06:55

it does work with :on-click though (I'm on chrome)

mikethompson12:06:06

Isn't it on-mouse-move ?

mikethompson12:06:30

Yep, replace :on-mousemove with :on-mouse-move

escherize13:06:33

thanks Mike!

escherize13:06:15

wow that's cool simple_smile