Fork me on GitHub
#cljsrn
<
2017-01-27
>
misha11:01:22

@anmonteiro do you have a usage from cljs example? 🙂 specifically, how to add a navigationOptions static field to rum component

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  }; ...

vikeri12:01:56

@misha @anmonteiro Yeah that’s great! I’m going to try to get it to work with cljs next week.

misha12:01:52

(def props
  {:msgData "Components can store custom data on the underlying React component."})

(rum/defcc custom-props < {:class-properties props} [this]
   ;; using aget to avoid writing externs
   [:div (aget this "msgData")])

vikeri12:01:33

@misha Ok cool! I was thinking of trying to avoid the whole props thing and integrate it directly with re-frame

misha12:01:06

looks too javascripty. the only reasons I am keeping on reading the docs are: the native thread animations, and declarative settings.

misha12:01:12

@vikeri can you describe re-frame in 1 or 2 sentences for me? please

misha12:01:27

event-sourcing?

vikeri12:01:29

@misha (Redux/Elm in CLJS): One single atom for state, update the state only with event handlers that can be dispatched to from anywhere in the app. Define subscriptions to parts of the state, defererence these subscriptions in your components and they will automatically update whenever that part of the state changes. Uses reagent as React wrapper.

ejelome12:01:33

re-frame is the redux of cljs land

misha12:01:38

I don't know what either of elm/redux represent 😛

ejelome12:01:45

to add in the discussion: reagent is to reactjs while re-frame is to redux

misha12:01:36

@vikeri ok, looks like what I am doing with rum

vikeri12:01:01

Elm is a programming language that is like haskell but compiles to JS. Redux is probably the most popular way (along with Relay) of managing state in React

misha12:01:41

I know that, but not actual ideas behind them.

misha12:01:30

@ejelome thanks, but think I'll pass for now opieop (that's why I asked for just a few sentences)

vikeri12:01:39

@misha The foundation is from FRP (Functional Reactive Programming) and Unidirectional data flow. The data only flows in one direction. If you haven’t heard of it it’s quite a foreign concept but very intuitive once you grok it. I recommend reading the re-frame readme if you really want to understand it.

misha12:01:00

I am familiar with FRP, I just wanted to know what all the hype around reframe is about.

vikeri12:01:51

Ok great! Then it’s basically a very pragmatic but still elegant application to using FRP in UI development.

misha12:01:19

what I have is a few large atoms, derived from datascript, views, subscribed to those atoms (directly, or via smaller derived atoms in-between), and a bunch of functions, mutating those atoms (this is the piece to be replaced with events+dispatcher for event sourcing).

misha12:01:35

sounds pretty similar (on high level) to me (I read through the reframe docs a bit). does it? or am I missing something fundamental here?

vikeri12:01:24

@misha Not really, re-frame just takes care of everything for you in an opinionated to me mostly very good way. It adds things like middleware, so that you can log all your events etc.

misha13:01:20

hm, ok, I'll look closer into examples and docs. thanks

anmonteiro15:01:57

@misha @vikeri I haven't tried it, just knew that CLJS + RN had historically had problems with Navigator and saw that which may be a step in a different direction!

Rohit Thadani19:01:51

I am trying to use google maps in react native. The react native docs suggest I use the airbnb react-native-maps. However it doesnt seem to work. I see that the airbnb react-native-maps is written as an es6 component (extends React.component and has a constructor) as opposed to the createClass. I am not sure where to look or how to call r/adapt-react-class for this component. Any ideas?

pesterhazy22:01:45

@rohit_ I think you can just call it normally

pesterhazy22:01:40

however, you may need to access the module as .-default if it's a es6 module

pesterhazy22:01:47

like this: (def video (r/adapt-react-class (.-default (js/require "react-native-video/Video.js"))))

pesterhazy22:01:06

don't know if that's the issue you're seeing

pesterhazy22:01:55

but anyway I'm pretty sure ES6 classes should just work with adapt-react-class

Rohit Thadani22:01:42

ok yeah im trying to see how it works in both in the browser and on the web Thanks @pesterhazy

Rohit Thadani22:01:00

your suggestion was good for the web

Rohit Thadani22:01:39

@pesterhazy it doesnt seem to work for react-native-maps

levitanong23:01:40

@pesterhazy Is there a more idiomatic way to do that besides .-default? I use this method, but all the warnings around default being a reserved keyword kind of scare me.

misha23:01:26

that's a static field (named "default") access on a js object. probably can't be more idiomatic than this

misha23:01:59

try aget instead

(.-innerHTML el)
(aget el "innerHTML")

misha23:01:32

or maybe even better:

(goog.object.get el "innerHTML")

levitanong23:01:06

@misha I’m not sure how using aget or goog.object.get will resolve the warnings, as the compiler (only when compiling for production) seems to complain simply about the fact that i’m trying to access default, and not the method by which i’m trying to access it.

misha23:01:32

¯\(ツ)/¯

anmonteiro23:01:48

what's the problem? does it produce an error under advanced compilation?

misha23:01:44

@levitanong gets warning about accessing default filed in advanced compilation with ~this:

(def video (r/adapt-react-class (.-default (js/require "react-native-video/Video.js"))))

anmonteiro23:01:11

if it's just a warning, don't worry about it

anmonteiro23:01:14

as long as it works

levitanong23:01:18

haha alrighty

anmonteiro23:01:23

@levitanong can you paste the warning you're getting though?

anmonteiro23:01:29

and is it at compile or runtime?

levitanong23:01:11

@anmonteiro just need to finish something, then will do!