Fork me on GitHub
#reagent
<
2020-03-04
>
frozar14:03:54

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?

ouvasam14:03:37

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

frozar14:03:49

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

ouvasam14:03:51

(js-keys canvas-elt)

👍 4
frozar15:03:37

nice, thank you for the sharing 🙂

👍 4
coby18:03:14

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": https://projects.invisionapp.com/prototype/MC-Web-App-animation-ck57dkvx0008tgp01lho18cp8/play/d8eec5ea 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?

ouvasam20:03:39

(ns app.motion
  (:require
   [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})

ouvasam21:03:35

with somethiing like thiis you're able to do

ouvasam21:03:37

(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
     content}])

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

coby21:03:13

framer-motion looks really promising. Thank you!

coby23:03:20

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

coby00:03:11

Well, anyway I'm having a decent amount of luck with react-reveal. It's surprisingly easy. Framer looks cool regardless, thanks for the link!

ouvasam07:03:08

Framer motion is open source ! But framer is a another tool from the same company

ouvasam07:03:34

i think you should go directly with framer motion as it is a breeze to use and so powerful

coby20:03:03

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

coby20:03:50

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

ouvasam20:03:50

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

ouvasam20:03:41

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

otwieracz21:03:00

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?

ouvasam21:03:13

may be look at #pathom ?

lilactown21:03:25

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

lilactown21:03:52

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

otwieracz21:03:46

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

ouvasam21:03:37

it can be used without fulcro

ouvasam21:03:42

and i find it really interesting and useful

otwieracz21:03:09

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

lilactown21:03:09

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

lilactown21:03:24

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

lilactown21:03:36

I expect this is because Fulcro currently handles that

otwieracz22:03:35

Yeah, it might be that the answer to my question is just fulcro. 🙂

ouvasam07:03:33

May be i am missing something here but for me it is just a data provider. So you should be able to insert the library you need to get the data from the server in each resolver ?

lilactown15:03:03

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

lilactown15:03:46

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

👍 4