A minimalistic ClojureScript interface to React.js
frozar 2020-03-04T14:44:54.075900Z

Hi, I'm trying to find a way to retrieve the string printed by the js/conlose.log to a clojurescript variable. For example, I retrieve a HTML element with canvas-elt (.getElementById js/document "svg") and I want to get the HTML string with the variable canvas-elt. Does anyone have any hint for me?


Hi, (.-outerHTML canvas-elt) should do this

frozar 2020-03-04T14:56:49.077200Z

Nice, it works, thank you πŸ™‚ Is it possible to know which field/method are available on a given js object?


(js-keys canvas-elt)

frozar 2020-03-04T15:00:37.078400Z

nice, thank you for the sharing πŸ™‚

coby 2020-03-04T18:35:14.083300Z

Hey folks, I'm new-ish to frontend and I'm wondering if there's an idiomatic way in Re-frame/Reagent to do animated transitions between pages (secretary routes). There's sort of a two-step transition where the page 1.) goes blank, and then 2.) staggers in the elements one at a time. Example is here - click on "Get Care": Do I need a stateful component for this? Or could I get away with just firing a "blank out the page" event and then (in setTimeout or something) a "load in page contents" event? Or something completely different?

coby 2020-03-05T20:03:03.102Z

huh. I wonder how I failed to find this. Error exists between keyboard and chair, apparently. πŸ˜› Thanks a ton!!

coby 2020-03-05T20:04:50.102200Z

I will definitely give Motion a shot, it's definitely more expressive than what I'm hacking on currently.


If you use shadow-cljs framer motion is simple to use for this


look at animatePresence in framer motion. It does all what you want i think


(ns app.motion
   [framer-motion :refer (motion AnimatePresence useSpring useMotionValue useTransform useViewportScroll) :as motion]
   [cljs-bean.core :refer [bean ->clj ->js]]))

(def div
  (.-div motion))

(def span
  (.-span motion))

(def li
  (.-li motion))

(def img
  (.-img motion))

(def button
  (.-button motion))

(def input
  (.-input motion))

(def textarea
  (.-textarea motion))

(def label
  (.-label motion))

(def transform #(motion/transform (->js %1) (->js %2) (->js %3)))
(def animate-presence AnimatePresence)
(def use-spring useSpring)
(def use-motion-value useMotionValue)
(def use-transform useTransform)
(def use-viewport-scroll useViewportScroll)
(def spring
  {:type :spring
   :damping 1000
   :stiffness 10700})


with somethiing like thiis you're able to do


(ns app.core
  (:require [cljs-bean.core :refer [bean ->clj ->js]]
            [re-frame.core :refer [dispatch subscribe]]
             [app.motion :as motion]
            [herb.core :refer [<class]]
(defn page
  [id content]
  [:> motion/div
    {:key (str "page" id) ; IMPORTANT UNIQUE ID 8
      :class [:page (<class styles/page)]
      :variants {:initial {:opacity 0}
                 :animate {:opacity 1}
                 :exit {:opacity 0}}
      :initial :initial
      :animate :animate
      :exit :exit

(defn pages
  (let [page @(subscribe [:page/current])]
    [:> motion/animate-presence
      (case page
        :page-1 [page :page-1 [page1]]
        :page-2 [page :page- ...]

otwieracz 2020-03-04T21:14:54.088Z


otwieracz 2020-03-04T21:17:00.090200Z

I've been looking at Fulcro recently and I've somehow "rediscovered" full stack. Until now, full stack for me was always reagent and for example Liberator on backend. However, it really feels unnecessary to create full-blown REST API only to talk with UI which are both versioned together and developed together. Are there any interesting approaches to frontend-backend communication in reagent (+ possibly re-frame) stack? I don't have any experience with GraphQL, maybe it's what I am looking for?

lilactown 2020-03-05T15:43:03.099600Z

for large applications I want something like Apollo GraphQL or Relay, to handle sharing and subscribing to queries across components

lilactown 2020-03-05T15:43:46.099800Z

so the server uses pathom, and the client uses something else to interface with pathom and intelligently cache


may be look at #pathom ?

lilactown 2020-03-04T21:21:25.091100Z

graphQL is good if you have multiple front-ends (e.g. a web app and a mobile app, or multiple web apps) that you want to serve from one service

lilactown 2020-03-04T21:22:52.091300Z

so sort of the opposite of what you’re thinking of; GraphQL is possibly more general than REST

otwieracz 2020-03-04T21:23:19.091500Z


otwieracz 2020-03-04T21:23:46.091700Z

Pathom is used in Fulcro. But I haven't seen it used together with reagent.


it can be used without fulcro


and i find it really interesting and useful

otwieracz 2020-03-04T21:26:09.092400Z

Do you have any examples somewhere? I'd love to have a look.


did you look at the docs ?

lilactown 2020-03-04T21:31:09.092800Z

I recently reviewed the docs, and they do not go into front-end usage at all

lilactown 2020-03-04T21:33:24.093Z

there’s a lot of information about how to build a parser and query it, but I would expect that to be done on the back-end. there’s no information about patterns or libraries that you can use to e.g. query, cache and re-render a component on the front-end

lilactown 2020-03-04T21:33:36.093200Z

I expect this is because Fulcro currently handles that

coby 2020-03-04T21:42:13.093400Z

framer-motion looks really promising. Thank you!

otwieracz 2020-03-04T22:00:35.093600Z

Yeah, it might be that the answer to my question is just fulcro. πŸ™‚

coby 2020-03-04T23:37:20.093800Z

wait a sec, is this not open source? I don't really have time to jump through procurement hoops for this project unfortunately. 😞