Fork me on GitHub
#cljsrn
<
2017-05-19
>
amorokh06:05:11

I've updated my https://github.com/amorokh/om-navigate example so that the om-next context (reconciler, depth, parent etc) is no longer lost for components

carocad06:05:27

@pesterhazy Well as you know I'm trying to see if hot reload could work better than figwheel. But after some tests I concluded that the hot reload works by diffing files not code. Therefore I had several problems trying to play it together with cljsbuild auto since I get a single file out (:simple)

carocad06:05:05

So I thought that if I could make the react native packager recognize goog.require statements then it could work. That's when I stumbled upon your patch. But I saw it in the issue description not on a pr. Which made me think that it didn't work or that it was dropped :(

carocad06:05:22

Since that could benefit the whole cljs ecosystem would you consider making it part of react native itself? Not only as a patch to boot :) ?

seantempesta06:05:02

@vikeri: I’ve had good luck just increasing the timeout. Edit: ./node_modules/react-native/packager//src/JSTransformer/index.js and add a couple zeros to const TRANSFORM_TIMEOUT_INTERVAL = 30100000;

seantempesta06:05:57

They seemed to fix the out of memory errors, so it just takes forever to parse a large cljs file. It’s taking me around 12 minutes every time I package my app.

seantempesta06:05:16

We really need to figure out a way to bypass it. If we had a way to only run the packager on all of the (js/requires and then append the clojurescript file to the output it would work, right? Because the cljs compiler is doing all the same stuff (ie minifying, converting ES6 javascript to normal js, etc).

vikeri07:05:51

@seantempesta Ok interesting, for now I reverted back to not using advanced compilation and compiling all files separately. Yeah the issue is that I use things like promises and other ES6 stuff in my cljs code. But other than that all code generated by the Closure Compiler is good ol ES3, so very frustrating that Babel spend insane amounts of time analyzing it…

vikeri07:05:16

@carocad The fb devs themselves aren’t too excited about the built in hmr so maybe not worth spending a lot of effort getting that working: https://github.com/callstack-io/haul/issues/2#issuecomment-289016826

carocad07:05:37

@vikeri thanks a lot. That explains the behavior I was having when hot reloading my app. It displayed "hot reload" I the screen but no update. What a shame, but thanks for the heads up

carocad07:05:09

On another topic, has anyone tried to compile cljs code with nodejs target? I have tried it several times but react native always fails bundling the app. I thought it would be a better fit for rn apps ...

vikeri07:05:30

@carocad I also tried it but the issue I ran into is the lack of modules like path, fs etc. If you shim them you might have better luck compiling it.

carocad07:05:31

Jummm I thought rn was smart enough to provide a shim for those, like browserify does. But do I need to do that even if I don't require those modules? Or is it something that cljs is doing by itself on the background?

vikeri07:05:31

@carocad The build generated by cljs uses those libs

jouerose08:05:43

Greetings all. I am quite interested in react native clojurescript (re-natal) and I was wondering whether from your experience there is anything related to performance I should know upfront ? thank you.

pesterhazy08:05:37

@carocad I see thanks for the explanation

jouerose08:05:50

android specifically is an important concern as my target users are mostly android

pesterhazy08:05:54

I did start the process of submitting a patch: https://github.com/facebook/react-native/issues/9084

pesterhazy08:05:31

but the response was so slow that I ended up being discouraged

pesterhazy08:05:48

I agree that this should be upstreamed

pesterhazy08:05:08

I will say that just patching RN works surprisingly well

pesterhazy08:05:28

@jouerose I did a one week spike to get an android version of an ios app started

pesterhazy08:05:41

that was almost a year ago

pesterhazy08:05:08

my general impression was that in the emulator things were slower than in the ios simulator

pesterhazy08:05:49

"dev" mode slowed things down tremendously (it doesn't on iOS) so turning that off improved performance a lot

pesterhazy08:05:37

but I didn't get much farther for lack of time

jouerose08:05:01

@pesterhazy thanks for your input.

thheller08:05:24

@pesterhazy do you know if there is any way in babel or the react native package to stop it from using their plugins/loaders in a certain directory?

thheller08:05:46

babel mentions .babelrc but that doesn't have any effect it seems

thheller08:05:55

the packager is scary .. I didn't get anywhere trying to figure out how it works

thheller08:05:44

seems stupid to run all their babel transforms on CLJS code since that already is ES3 and doesn't need any of them

jouerose09:05:02

if there is anybody who as react-native android experience please let us know what you think we should know upfront. thanks

carocad09:05:41

@jouerose I am doing rn in android (ubuntu pc)

carocad09:05:14

up front: beware of gradle and of the build tools for android. They are painful to get right and you need very specific tool-versions. One slight change in the version and it all crashes

jouerose09:05:23

@carocad oh, thank you. when you manage to go past this, what about performance ?

carocad09:05:55

I have had some slow performance on dev (with figwheel) but I am not sure if it is because of the code or because my phone is just too old. Whenever I compile with lein prod-build (I am using re-natal) then the perf its quite good

jouerose09:05:49

@carocad thanks. which phone are you using ?

carocad09:05:05

moto g first generation I think

vikeri09:05:44

@jouerose The end result is very pleasing and very performant. The problem is the infrastructure around it. RN+CLJS is fairly new and everyone agrees we haven’t fully nailed the infrastructure parts of it yet. And it’s hard to do it since RN itself has not fully settled on that part, some major changes seems to hit the packager soon for example. So be prepared to spend some time on your setup.

wojciech09:05:47

Also, on Android check beforehand if people have issues with your particular model. I taught a React Native class at a university and a couple of students had problems using their (Sony Experia) phones for development.

jouerose09:05:37

@vikeri the end result is reassuring. "very pleasing and very performant"

vikeri09:05:02

@jouerose Yeah, but don’t hold it against me if that’s not your experience 😅 We use React Navigation and Realm for navigation and storage respectively.

jouerose09:05:33

@vikeri RN Navigation and Realm. good to know. thanks. and yes I will hold it against you, I will send the night king and if not available mortal kombat's Sub Zero will do. 🙂

vikeri09:05:15

Haha, not RN Navigation, React Navigation: https://reactnavigation.org/

carocad09:05:01

@vikeri are you using seantempestas wrapper or your own?

carocad09:05:29

I checked out the quick hack that you published on github but couldnt get my head around it 😞

vikeri09:05:15

@carocad Yeah I’m using my own, but it’s not ideal when it comes to the tabs. So if seantempesta solved that I might migrate

carocad13:05:57

@seantempesta to be honest I havent throughly checked your library but could you please give us a heads up on that 🙂 ?

pesterhazy09:05:41

@thheller no I gave up pretty quickly trying to disable babel transforms the last time, but that was a while ago - maybe things have changed for the better

pesterhazy09:05:09

the RN packager will soon be extracted as a separate repo, maybe that will give its issues more visibility

thheller09:05:27

but we can't be the only ones suffering from that issue no? seems like every compile-to-JS language shouldn't need those presets

thheller09:05:16

1335 open issues on the react-native repo doesn't inspire confidence 😛

thheller09:05:44

wonder how many of those are packager related

jouerose09:05:36

i am starting cljsrn and wondering: i see the definitions of components at the beginning of the file. is it not something that could be done automatically ? any idea what has prevented this so far ?

jouerose09:05:01

example: (def text (r/adapt-react-class (.-Text ReactNative)))

pesterhazy10:05:34

@thheller packager related issues I've raised in the past were pretty much ignored

pesterhazy10:05:18

@jouerose you mean write a macro like (import-react-native '[text view touchable-highlight])?

pesterhazy10:05:37

yup that would be a possibilty 🙂

pesterhazy10:05:54

I think it's just not enough of a pain for people yet

jouerose10:05:56

i see. thanks

pesterhazy10:05:35

also adding macros has a cost - additional complexity, plus you can't easily grep for the definition of TouchableHighlight or whatever

pesterhazy10:05:59

not saying this is not a good idea, but these are reasons why I haven't used a macro for this yet

jouerose10:05:56

i see. 👍

vikeri14:05:49

@seantempesta In your navigation library, did you get tabs to work well with re-frame? I.e. overriding the tab state with the re-frame state?

carocad16:05:33

native support of js modules in clojurescript. I guess that would include rn modules since it is just a semantic transformation. Of course you would still need to call r/adapt-react-class but that is another history 😉

carocad18:05:31

Nice ! If I understand that right, he is also getting the documentation of the components? Did you try it?

kurt-o-sys18:05:43

Hey all, using re-natal, how d'you make parametrized builds? I mean, depending on the profile (dev/prod), I'd like to add other configs to the application. I haven't found a good way to do so yet - it should be added at build-time, so probably a macro or so?

kurt-o-sys18:05:30

Ideally, it would read a config file (so I don't have to set all config in separate system properties) - at compile time, of course.

kurt-o-sys19:05:03

so, if I add :closure-defines to defproject:

:profiles {:dev  {:dependencies [[figwheel-sidecar "0.5.8"]
                                   [com.cemerick/piggieback "0.2.1"]]
                    :source-paths ["src" "env/dev"]
                    :cljsbuild
                    {:builds [{:id           "ios"
                                < ... >}}
                              {:id           "android"
                               < ... >
                               :compiler     {:output-to     "target/android/not-used.js"
                                              :main          "env.android.main"
                                              :output-dir    "target/android"
                                              :optimizations :none
                                              :closure-defines {conf "from project.clj"}}}]}
I'd expect that the output of (goog-define conf "from code") would set conf to from project.clj. It doesn't. It shows from code.
(defn init []
  (goog-define conf "from code")
  (.log js/console conf)
  (mount-app)
  (.registerComponent < ... >)
Why is that? (Or maybe I should ask on #leiningen ? Or on #clojurescript )

jouerose19:05:35

@carocad I have not tried it yet but it is on my list. I also saw this https://github.com/artemyarulin/ktoa

carocad20:05:45

do we have a sort of cljs rn library register? it seems like there is tons of stuff to try out and lots of development going on but (at least I) it gets missed somehow 😞

jouerose20:05:49

@carocad I would be interested in knowing what you think of the natal-shell especially whether you think it fits re-natal

jouerose20:05:41

@pesterhazy you too 🙂 when you have some time, check it out, would like to know what you think

seantempesta23:05:14

@vikeri: I think the tabs are working well. I have an example you can download and run if you wanna check it out.