Fork me on GitHub
#cljsrn
<
2015-12-16
>
artemyarulin10:12:50

Hi, I’m working on advanced build for om-next. With help of figwheel-react-native(FRN) we can pretty much use only this during development:

(om/add-root! (om/reconciler {:root-render js/React.render :root-unmount js/React.unmountComponentAtNode})
              RootComponent 1)
FRN includes JS file which will call all the needed AppRegister and application initialisation. Question is how to achieve the same for the production build without any help from FRN Does anyone know how to implement the same but for the om-next?
(defn runProduction []
  (.registerRunnable (.-AppRegistry js/React) "figTest"
                     (fn [params]
                       (r/render [root] (.-rootTag params)))))

artemyarulin10:12:40

specifically the second argument for the registerrunable function

artemyarulin10:12:38

@mfikes: Have you tried making production builds with om-next? AppRegister has to be called but I cannot figure out what it wants as a second parameter

artemyarulin10:12:07

btw - finally mystery about root index = 1 resolved:

(.registerRunnable (.-AppRegistry js/React) "RootViewRN"
                   (fn [params]
                     (.log js/console “Root tag:" (.-rootTag params)) ;; -> Root tag: 1

artemyarulin11:12:18

Figured it out:

(.registerRunnable (.-AppRegistry js/React)
                   "RootViewRN"
                   (fn [params] (om/add-root! (om/reconciler {:root-render js/React.render
                                                   :root-unmount js/React.unmountComponentAtNode})
                                   RootViewRN
                                   (.-rootTag params))))

artemyarulin14:12:49

So I have an issue for the Om-Next, but I would like to discuss it here first. As you may know browser version of React exposes React global which is OK for the browser, but with React-Native they are using package manager so there is actually no reason to use globals anymore as you can always do require(‘react-native’) The reason why all the RN integration with Om-Next (and Reagent as well actually) has this line: (set! js/React (js/require "react-native/Libraries/react-native/react-native.js")) is that Om-Next (coming from the browser) works with React by using global React variable. But actually if we go though the Om-Next source code - the only place (apart from om.dom which has no use on mobile) where React is used is here: https://github.com/omcljs/om/blob/master/src/main/om/next.clj#L175 (.apply js/React.Component this# (js-arguments)) https://github.com/omcljs/om/blob/master/src/main/om/next.clj#L186 (set! (.-prototype ~name) (goog.object/clone js/React.Component.prototype)) https://github.com/omcljs/om/blob/master/src/main/om/next.cljs#L303 (js/React.createElement class I've just tried with following global and everything works just fine:

(set! js/React (js-obj "Component" (js/require "ReactElement")
                       "createElement" (.-createElement (js/require "ReactElement"))))
If we can make OmNext less depentend on React global, it will make mobile support without ANY hacks which will make the whole thing much more stable in the long run. What do you think? For the reference - here the gist with working example: https://gist.github.com/artemyarulin/17bf9034ad4712b8edf2

artemyarulin14:12:25

So should I create an issue to make those 3 places configurable in Om-Next (like we have for the :render and :unmount already) or it doesn’t worth it?

artemyarulin15:12:04

and to the @mfikes: In your auto-completion example you have to assign react global two times because you forgot to exclude browser react dependency as [[org.omcljs/om "1.0.0-alpha25" :exclusions [cljsjs/react cljsjs/react-dom]]]

artemyarulin15:12:41

and actually related to this - advanced compilation doesn’t work because if you exclude cljsjs/react you also exclude react Closure externs. Just add it… and receive compilation error from the Closure that you cannot override read only react global because it’s defined in the externs simple_smile sry for the wall of text

anmonteiro15:12:03

@artemyarulin: thanks for all this, it's good to see someone digging into these things simple_smile

adamfrey15:12:58

@artemyarulin: when I was doing some poking around with react-native and om last week I ran into that problem with advanced compilation as well and one thing that worked for me in the short term was to exclude react and then add my own handwritten React externs file. And in that externs file I made react no longer read-only

artemyarulin15:12:43

@adamfrey: Thanks, it may work 👍 But I think it may be a better idea to change om-next and remove any need of react global at the end

adamfrey15:12:06

Yeah I definitely agree.

mfikes16:12:42

@artemyarulin: FWIW https://github.com/dmotz/natal/commit/28136be55e8325f4872e3a2c411b4b3891561b79 (even without the :exclusions, which is probably worth investigating)

mfikes16:12:08

Also, I think David’s keen on tweaks to make this stuff work seamlessly with React Native.

artemyarulin16:12:09

@mfikes: Well, without exclusions my build bundle is 100KB more because it includes browser react which hopefully doesn’t conflict with react native. I guess it should be considered as a good practice to exclude it

artemyarulin16:12:32

I’ll create an issue then in Om, maybe it will an easy task

artemyarulin16:12:08

David response for the reference:

OK but this doesn’t seem very important or hard to work around
`goog.global` exists for a reason
the real fix would be a better import global name story for `:foreign-libs`
that’s about the only thing I would actually consider
so somebody could fix the real root issue and then I would be happy to switch that.
not interested in quick fixes on my side when quick fixes exist downstream

rohit16:12:13

I’ve translated part of the Movies app in the RN repo using the re-natal template. https://github.com/ducky427/movies-cljs-rn

rohit16:12:39

Only focussed on getting it working on iOS

rohit17:12:39

here is a video showing the app: https://youtu.be/ccgMVoaSuD4

mfikes18:12:43

@artemyarulin: Dunno if you govareet, but some Russian-language meetup discussing your cross-platform thing: https://www.youtube.com/watch?v=sYPoqHnudNI&amp;t=25m40s

artemyarulin18:12:13

ha, I was presenting it simple_smile

mfikes18:12:00

I can barely understand it. Fortunately lots of words are the same as in English.

artemyarulin18:12:06

Heard many times in Russia - “English is not hard - all the words from C++”

mfikes18:12:40

(Man, the Russian language sounds beautiful. Ochen krasnia. English is coarse-sounding, like Orcs from Tolkien’s world.)