Fork me on GitHub
#cljsrn
<
2016-12-19
>
pesterhazy10:12:35

for those non-cljs concerns 🙂

vikeri10:12:37

Sweet! It would be nice if it was in Matrix though… Not convinced slack could handle a RN community...

pesterhazy10:12:57

not convinced in the long term viability of slack either personally

pesterhazy10:12:11

but maybe cross that bridge when we get to it kind of thing?

vikeri10:12:48

Yep! The discussion is on in #community-matrix for those who haven’t heard of it.

savelichalex10:12:26

What is it Matrix? 🙂

nikki10:12:56

posted in #clojure but was thinking -- could be neat to impl this type of interface to live edit an app on the ipad with the app itself on the side in iphone-sized window, maybe using suggestions from clojure.spec for local UI like colorpicker for colors or predefining child sexp layouts etc.

nikki10:12:54

i think it can like remove the idea of buffers and you just look up names through namespaces to edit their source and the namespace in which that source is meant to be interpreted is known

artemyarulin10:12:17

@nikki have you seen planck for iOS?

nikki10:12:50

i thought it was just macOS

artemyarulin10:12:52

oh, no, it’s called replete

nikki10:12:59

yeah seen that one

artemyarulin10:12:13

PR are welcome I guess 🙂

nikki10:12:26

the nice thing about running in a runtime that is enriched by React Native and some other things is that you can build UIs in it easily 😮

nikki10:12:43

i'm among the people working on http://getexponent.com and lein new exponent makes an exponent project 😄

nikki10:12:58

but the whole dev experience is desktop based, but i'm toying with idea of doing it in tablet

artemyarulin10:12:09

@mfikes is author, but pretty much you can hack it https://github.com/mfikes/replete

nikki10:12:18

kewl gonna check it out

vikeri10:12:34

@savelichalex The protocol that powers Riot

nikki10:12:45

@artemyarulin do u know if replete and planck code is shared

nikki10:12:05

(also i'm aiming to keep it also android compatible)

artemyarulin10:12:13

nope, not aware about internals

nikki10:12:24

i am working on exposing webgl basically, and planning on using it for graphics

nikki10:12:21

could be fun to code graphics live on ipad with colorpickers etc. don't u think @artemyarulin 😄

nikki11:12:26

i want to just forget about buffers tho and just edit directly by looking up source from namespace

artemyarulin11:12:33

well I spend 99% time in my emacs so hardly I’m your target audience 🙂 but idea is cool

nikki11:12:01

haha i spend same amt of time in emacs 🙂

nikki11:12:12

but yeah target audience is idk -- dj'ing some music live or teaching kids to make fun apps

nikki11:12:28

thx for listening and advice!

nikki11:12:40

planning on hacking on similar idea around christmas break so will hit you up if i do something

rukor13:12:58

Hi, i do experience delays with re-natal (reagent) on text inputs. If using plain JS, those lags do not occur. Does anyone have any ideas as to what I might be missing?

mfikes14:12:52

@nikki When Replete was developed (mid-2015), we barely had self-hosted ClojureScript running properly, and at the time ClojureScript on React Native was still very new. I specifically decided to avoid mixing two immature things and went with Replete having a fully native UI. But now, more than a year later, I could see a React Native REPL with a rich UI experience being completely feasible.

nikki14:12:39

@mfikes: nice! I was reading ur blog like planck's eval and stuff, your work / insight into this space is helpful! :)

nikki14:12:25

I think bootstrapping in a sense of the editor UI be codeable from itself would be so nice

nikki14:12:06

@mfikes: one of the things i did recently was expose opengl to javascriptcore in a webgl-like api that works on android and ios (just uses jsc c api directly with crossplatform cpp) but in a non-browser jsc (so no jit for now :( ) and want to see if i can make a playground env for it sort of ... https://getexponent.com/@community/gl-test you can try it out and https://github.com/exponentjs/gl-test is the code

nikki14:12:26

It runs in the same js env as where the react native ui happens, and so u can use react native to make gui stuff over the gfx, had some folks try making games on it and people ended up doing that for menus a lot -- with clj's nice paradigm for reacty uis could be neat

mfikes14:12:55

Ahh. @nikki perhaps the Ejecta stuff here could be inspiration or maybe you are doing some similar stuff: https://youtu.be/ByNs9TG30E8?t=2143

nikki15:12:11

Yeah i do what ejecta does

nikki15:12:19

But in crossplatform cpp so that it works on android too

nikki15:12:02

I actually borrow ejecta's typedarray conversion hack haha, a lot of exponent's gl thing owes itself to looking at ejecta's code

mfikes15:12:20

Ahh. Yes. The horrific hack 🙂

nikki15:12:28

Making it go through khronos' conformance tests slowly

nikki15:12:02

Luckily the hack isnt needed in latest jsc which is in ios10, you can get direct access to typedarray's underlying buffer

nikki15:12:03

Yeah u still want to probs memcpy out or GC pin it if ur gonna access the data later tho 😮

nikki15:12:43

Cool that ejecta was demoed in that talk!

nikki15:12:22

Is the code for that visual around somewhere

nikki15:12:11

@mfikes: this might be too future or something but

nikki15:12:28

I want to see if i can write the rasterizer itself in glsl with raymarching style rendering

nikki15:12:37

So that the data transfer from cpu to gpu is lower

nikki15:12:52

Like basically impl react for gpu and write the ui renderer in it

nikki15:12:57

But thats for much later lol

nikki15:12:11

regl.party is my fav layer over webgl atm

nikki15:12:18

Raymarching style rendering sort of allows u to use manifold transforms to construct scenes: you can do crazy operations like twisting and subtracting objects from other objects but its written down as the actual algebra of those ops

nikki15:12:25

Its like macros for scenes

nikki15:12:19

The demoscene is big on it

nikki15:12:05

You could still gen that out of a bocko / quil / logo like api i think

mfikes15:12:22

That would be cool 🙂

nikki15:12:48

Yea kids just want to put pretty pictures on screen asap

nikki15:12:36

@mfikes: im still new to clojurescript and learning -- do u think living clojure is pretty good you've said nice thingd

nikki15:12:00

Been doing braveclojure over and over and getting distracted at some point

nikki15:12:10

But i learn well with "course" type things

misha15:12:05

@rukor it is an issue with every RN wrapper. I workaround it (in rum) by wrapping input with a stateful component, which passes :defaultValue to input on every value change, instead of using :value. The other workaround I heard of here – is to interop with js.

rukor15:12:59

@misha thanks. I worked around it by using the react’s local state in a controlled way for the wrapper ‘form’, and doing some js interop. thanks again

misha16:12:38

@rukor mind share it here as a code snippet? you are, like 3rd person with input lag with reagent issue here in 5 weeks or so

rukor16:12:42

(defn basic-form [props & _]
  (let [ref             (cljs.core/atom nil)
        init-state      (fn [r]
                          (reset! ref r)
                          (when r
                            (.setState r #js{:__formstate (:init props)})))

        get-state       (fn []
                          (when-let [r @ref]
                            (when-let [s (.-state r)]
                              (.-__formstate s))))

        set-state       (fn [v]
                          (when-let [r @ref]
                            (.setState r #js{:__formstate v})))

        set-field-value (fn [k]
                          (fn [v]
                            (let [current   (get-state)
                                  new-value (if (vector? k)
                                              (assoc-in current k v)
                                              (assoc current k v))]
                              (set-state new-value)
                              (when-let [f (:on-field-change props)]
                                (f k v)))))

        get-field-value (fn [k]
                          (when-let [state (get-state)]
                            (if (vector? k)
                              (get-in state k)
                              (get state k))))

        do-submit       (fn []
                          (when-let [f (:on-submit props)]
                            (f (get-state))))
        ]
    (r/create-class
      {:display-name "basic-form"
       :component-will-mount
                     #(this-as this (init-state this))
       :reagent-render
                     (fn [props & children]
                       [apply vector rn/view
                        (dissoc props :init :on-field-change)

                        (for [child children :let [[component child-props & vs] child]]
                          (cond
                            (= component field)
                            (apply vector component
                                   (assoc child-props :value (get-field-value (:key child-props))
                                                      :on-change (set-field-value (:key child-props)))
                                   vs)

                            (= component submit-button)
                            (apply vector component
                                   (assoc child-props :on-press do-submit)
                                   vs)
                            :else
                            child))])})))

rukor16:12:37

where field & submit-button are components that just render text-input & button respectively

rukor16:12:45

this allows me to use the form like this

rukor16:12:57

(defn a-form []
  (let [init {}]
    (fn []
      [basic-form {:init            init
                    :style           {:padding 15}
                    :on-field-change (fn [k v] (log/debug "field" k "=" v))
                    :on-submit       (fn [v] (log/debug "submitting: " v))}
       [field {:type :text :key :name :label "Name"}]
       [field {:type :switch :key [:details :crazy] :label "Crazy?"}]
       [submit-button {:label "OK"}]
       ])))

rukor16:12:16

without any lag in the inputs

mfikes17:12:29

@nikki Yes, Living Clojure has a very gentle introduction in the first few chapters

pesterhazy19:12:30

@ruko, I had the react-native input lag issue with reagent too