Fork me on GitHub
#cljsrn
<
2017-10-02
>
bcbradley16:10:58

how does [:>... ] syntax work exactly?

pesterhazy17:10:19

it's a sign that the following object will be interpreted as a React (not reagent) component

pesterhazy17:10:06

it allows you to use native components from RN or from 3rd party js libraries

pesterhazy17:10:25

(def view (r/adapt-react-class (.-View rn)))
[view props ...]
is similar to
[:> view props ...]

pesterhazy17:10:06

it's not exactly the same because 1 will error at load time if rn.View doesn't exist, whereas 2 will throw at render time

bcbradley17:10:42

is there a convention for the names?

bcbradley17:10:54

[:> listView props ...]

pesterhazy18:10:16

kebab-case instead of CamelCase

pesterhazy18:10:26

or what do you mean?

pesterhazy18:10:41

listView is the name of the js function/class

bcbradley18:10:57

i was having trouble getting a FlatList to work

bcbradley18:10:23

was looking for guides, tutorials or documentation about reagent but there doesn't seem to be a lot

bcbradley18:10:07

i saw ([:> ) in the 0.6 patch and wondered if maybe i was just using an outdated way of getting a native react component, but based on what you've told me they are just similar

pesterhazy18:10:21

functionally equivalent yes

pesterhazy18:10:40

try translating the example from RN docs first

bcbradley18:10:02

so everything that could be snake case is snake case right?

bcbradley18:10:06

i want to make sure i'm getting that right

bcbradley18:10:10

the errors are hard to trace

pesterhazy18:10:21

not sure what you mean

bcbradley18:10:39

js/AppRegistry versus app-registry

bcbradley18:10:53

erm i guess that doesn't make much sense

pesterhazy18:10:10

the JS names are just what they are in JS

pesterhazy18:10:30

it's convenient to def them to clojurescript names using kebab-case

pesterhazy18:10:50

(sorry I meant kebab-case above)

pesterhazy18:10:20

plus reagent automatically translates props like :font-family to "fontFamily"

pesterhazy18:10:33

but you can always use the straight react names as well

bcbradley18:10:42

hrm so something like this?

bcbradley18:10:44

(defn app-root []
  (let [quizzes (subscribe [:get-quizzes])]
    (fn []
      [view {:style {:flex-direction "column" :margin 40 :align-items "center"}}
       [text {:style {:font-size 30 :font-weight "100" :margin-bottom 20 :text-align "center"}} "Oi"]
       [button {:title "Press me" :background-color "#555" :on-press #(alert "HELLO!")}]
       [flat-list {:data @quizzes
                   :render-item (fn [{:keys [name]}] [text {} name])}]])))

bcbradley18:10:54

with (def flat-list (r/adapt-react-class (.-FlatList ReactNative)))

bcbradley18:10:46

i was working in re-natal but adding the flat-list element there at the bottom causes things to break

bcbradley18:10:01

maybe i'm not really understanding something i should be

pesterhazy18:10:12

what error do you see?

pesterhazy18:10:35

try using :data (into-array @quizzes)

bcbradley18:10:59

hold on i'll try compiling it and getting it up i forgot the exact error

bcbradley18:10:31

srry i don't mean to spam, i'm just new to this and trying to figure it out

pesterhazy18:10:08

does it work if you comment out the flat list?

bcbradley18:10:36

yup works like a charm

pesterhazy18:10:08

try replacing [text {} name] with [text "asdf"]

pesterhazy18:10:11

does it work then?

bcbradley18:10:35

nope same error

pesterhazy18:10:54

(r/as-element [text name])

pesterhazy18:10:11

solved ✅

bcbradley18:10:47

thankyou so much?

bcbradley18:10:02

can you give me a resource that can help me understand why i needed the r/as-element?

bcbradley18:10:17

i don't want to get stuck like that again if i can avoid it with a little research

bcbradley18:10:25

its just been really hard finding any good documentation on this

pesterhazy18:10:08

think about it... the function passed as :render-item is expected to return a React element

pesterhazy18:10:22

but you're returning a PersistentVector

pesterhazy18:10:28

a React element this is not

bcbradley18:10:52

hrm thats true but i figured reagent would hide that from me

pesterhazy18:10:05

it can't possibly do that unfortunately

pesterhazy18:10:33

it's one of the things about pure-React interop you need to know about Reagent

bcbradley18:10:42

are there any other things?

pesterhazy18:10:44

unfortunately the docs on Reagent are a bit.. sparse

bcbradley18:10:57

yeah no joking

bcbradley18:10:14

i'm doing freelance work for someone and figured i'd give clojurescript a shot for a mobile app

bcbradley18:10:31

its been... well atypical of my experience with clojure and clojurescript

bcbradley18:10:36

unusually difficult

pesterhazy18:10:56

sometimes you need to pass js data structures to RN functions or get JS datastructures back in callbacks

pesterhazy18:10:43

remember to use #js[], #js{}, into-array, goog.obj/get to access/pass the data

pesterhazy18:10:54

you don't need to do that for styles and props

pesterhazy18:10:02

reagent handles this automatically

bcbradley18:10:16

is there a reason to not use js->clj for this kind of thing?

pesterhazy18:10:32

hm they're not very well liked

pesterhazy18:10:45

have some unexpected caveats

pesterhazy18:10:54

avoid if you can

pesterhazy18:10:08

(but I use them sometimes as well)

bcbradley18:10:14

i'm out of the loop

bcbradley18:10:27

what are the caveats, or how do they compare to the 4 methods you gave above?

bcbradley18:10:38

i'm assuming #js[] is an array and #js{} is an object

bcbradley18:10:41

i've seen into-array before

bcbradley18:10:52

goog.object/get ii've not seen

pesterhazy18:10:17

it's for accessing JS objects by key

pesterhazy18:10:34

instead of (.-property obj)

pesterhazy18:10:44

which will fail if you're using adv compilation

bcbradley18:10:15

hold on a second the basic dot form for field access fails if you are using an advanced compilation?

bcbradley18:10:19

thats a pretty serious weakness

pesterhazy18:10:19

rule of thumb is to use gobj/get for "data" as opposed to coe, methods and the like

pesterhazy18:10:45

well it'll be minfied away into or something like that

pesterhazy18:10:04

that's part of what adv compilation does

pesterhazy18:10:29

check this repo for usage of RN components in reagent: https://github.com/status-im/status-react

pesterhazy18:10:45

it's a larger app so may be hard to grok sometimes but can still be helpful

bcbradley18:10:14

yeah anything is helpful thankyou!

bcbradley18:10:21

i hope i get this done on time

bcbradley18:10:27

if i have questions i'll ask them here

pesterhazy18:10:35

do ask 🙂

pesterhazy18:10:42

maybe we should start a FAQ

bcbradley18:10:02

well i guess i have a unique perspective (not all that unique) as a new timer

bcbradley18:10:45

so i can see how its difficult to get started

bcbradley18:10:06

whereas some of the more veteran users of cljsrn might not remember

bcbradley18:10:16

or what they remember might be different or outdated

pesterhazy18:10:21

yeah I know the beginning is rough

pesterhazy18:10:29

let's start a faq

bcbradley18:10:37

how can i help?

bcbradley18:10:02

thanks! should i submit an issue or should i put something here if i think of something that would be good to add to the faq?

bcbradley18:10:25

i might submit a pull request, but i don't think i'd want to do that unless i already had the answer

bcbradley18:10:23

i guess one thing that might be nice to add to the faq is an explanation of why cljs->js and js->cljs isn't necessarily a good idea

bcbradley18:10:34

and when to use the 4 alternatives you gave and why

bcbradley18:10:07

for instance, you said that you don't have to use them in the properties map because reagent will do it for you'

bcbradley18:10:13

that would be worth mentioning

bcbradley18:10:00

i noticed that everything in reagent is snake case

bcbradley18:10:05

for instance, all the keys to the property maps

bcbradley18:10:24

i'm assuming that bird beak operator is always followed by snake case symbol too

pesterhazy18:10:53

that's really just a convention

pesterhazy18:10:14

but yeah reagent's camel-casing might be a good addition to the faq

bcbradley18:10:21

i'm just trying to think of things that caught me up at first

bcbradley18:10:26

i was new to both reagent and re-natal

pesterhazy18:10:28

feel free to add stuff that you bump into

bcbradley18:10:33

and i haven't used clojurescript seriously before

bcbradley18:10:37

i guess maybe i'm biting off a lot

pesterhazy18:10:52

let's make it a bit easier for the next gal or guy

bcbradley18:10:10

absolutely 🙂

pesterhazy18:10:15

once we add some more stuff, @mfikes might add a link to the FAQ to http://cljsrn.org

mfikes18:10:09

Definitely @pesterhazy, if there is content you’d like to see there, just PR and I’ll put it up there.

pesterhazy19:10:49

@drapanjanas hope you're ok with me adding a FAQ page to the wiki?

jeaye22:10:50

It seems that, when my device goes to sleep and I'm editing a bunch of code and saving several times, figwheel will end up reloading the code as many times as I saved once I wake up the device.

jeaye22:10:02

This can be pretty time consuming; has anyone else seen it?

jeaye22:10:48

Should've put that in #lein-figwheel