Fork me on GitHub
#cljsrn
<
2015-11-12
>
johanatan00:11:45

So (set! js/React (js/require "react-native/Libraries/react-native/react-native.js")) works fine for bringing in React Native itself but what about for other npm dependencies?

johanatan00:11:07

Is there any way to see a listing of what's in "react-native/Libraries/..." ?

johanatan00:11:37

How did we come up with that path originally? Maybe it will help me to re-trace your tracks...

mfikes00:11:00

@johanatan: even after reading the React Native packager source, I failed to come away with a good answer to the require path question and punted in http://blog.fikesfarm.com/posts/2015-07-24-using-react-native-components-in-clojurescript.html

johanatan00:11:36

Ahh, i see. That procedure should work for the time being then. Thx!

mfikes00:11:59

It is really a module ID, not a path as you can see in that post. :(

mfikes00:11:44

I even asked Brent Vatne (big in the React Native community) about his LinearGradient module ID, and he had no good advice. Ugh. We have to live with the packager's quirks because we can see the underlying implementation from ClojureScript JavaScript interop. :)

johanatan00:11:58

Hmm, I get an error when browsing to the packer bundle output in the browser: {"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for more details"}

johanatan00:11:58

With this: var { Button } = require('apsl-react-native-button'); in my index.ios.js

mfikes00:11:23

@johanatan: Hmm… this is not an answer to your actual issue, but I was able to make a “regular” React Native button, FWIW: https://www.youtube.com/watch?v=b1RLKxNxCtA

johanatan00:11:24

Ya, I thought about doing that but it would be basically re-inventing all of the code inside that package. simple_smile

mfikes00:11:31

yep. Well if you learn more about how to use the APSL button, share here, or write a summary post :)

johanatan00:11:15

Btw, this is the error that the React Packager shows:

Error: Error validating module options: child "platform" fails because ["platform" is required]
    at /Users/jonathan/Documents/SourceCode/glassplan/glassreact/native/node_modules/react-native/packager/react-packager/src/lib/declareOpts.js:60:13
    at /Users/jonathan/Documents/SourceCode/glassplan/glassreact/native/node_modules/react-native/packager/react-packager/src/Server/index.js:176:20
    at tryCallOne (/Users/jonathan/Documents/SourceCode/glassplan/glassreact/native/node_modules/react-native/node_modules/promise/lib/core.js:37:12)
    at /Users/jonathan/Documents/SourceCode/glassplan/glassreact/native/node_modules/react-native/node_modules/promise/lib/core.js:103:15
    at flush (/Users/jonathan/Documents/SourceCode/glassplan/glassreact/native/node_modules/react-native/node_modules/promise/node_modules/asap/raw.js:50:29)
    at doNTCallback0 (node.js:407:9)
    at process._tickCallback (node.js:336:13)

mfikes00:11:15

Oh. Add platform=ios or whatever they are adding now to distinguish from Android

mfikes00:11:18

Just a guess. As a URL param. In your browser tack on ?platform=ios

johanatan00:11:39

Yep. You should update that blog post

mfikes00:11:51

Away from a computer, but you will see this if you use the current react native cli

mfikes00:11:34

Yes, will update. My post becomes obsolete every 5 weeks it seems. :)

johanatan00:11:03

Hehe, so, for apsl button the module ID is: "apsl-react-native-button/Button.js"

mfikes00:11:36

Yeah. It seems the easiest approach is to peek in the packager's output to find the module ID.

mfikes00:11:48

Hey @mj_langford — glad to see you are into this craziness :)

mj_langford00:11:12

;D trying it from time to time.

mj_langford00:11:30

I haven’t tried to build anything permenant on it

mfikes00:11:22

Me neither. There are a couple companies taking that leap. Fy and Figly.

mj_langford00:11:54

I’m interested in trying some more native-esque UI stuff…just haven’t had time

johanatan03:11:05

Just converted my first .xib (+ backing code) to React Native/ Om Next and got about 90% reduction in line noise! [Almost pixel perfect rendition].

dvcrn03:11:08

@johanatan: Are you using remote sync already with next?

johanatan03:11:24

What's "remote sync" ?

dvcrn03:11:37

I mean errr, sending the state query to a server and returning data

johanatan03:11:55

Hmm, not sure. I am just using the template provided by @mfikes at this point

johanatan03:11:09

And there's no functionality in there yet-- just the presentation/view

mfikes03:11:39

@johanatan: If you are using http://cljsrn.org/ambly.html, then you are not using Om Next, which has the feature @dvcrn is referring to.

johanatan03:11:21

I used natal init projreact --interface om-next to create my project.

johanatan03:11:29

I assumed that 'om-next' had some effect. simple_smile

mfikes03:11:48

Ahh… then you are using Om Next. But, as you said you are not interacting with a server.

dvcrn03:11:10

I'm still torn apart if I should write my app that's going to the appstore in om or classic react. The part that makes things difficult is the complex remote query of next

dvcrn03:11:12

that's why the question

mfikes03:11:14

(Architecturally speaking, this feature of Om Next is great for mobile, with respect to flexibility and performance.)

johanatan03:11:42

We are planning to use Firebase for our mobile backend. Does it still make sense to use Om Next Server in that case?

dvcrn03:11:47

yes it is amazing. I'm actually presenting about that on staurday

dvcrn03:11:06

well next is quite specific about what it wants back

mfikes03:11:41

Om Next appears to be easiest to satisfy if you are using Datomic, but it doesn’t require a specific backend.

dvcrn04:11:21

I tried implementing a highly generic python parser of the query bit that interacts with django but gave up after a few hours of messing around

dvcrn04:11:25

Correctly querying components itself (subqueries of subcomponents of subcomponents) is already mind bendingly complex by itself (at least for me). Or maybe I just didn't 'get it' yet.

dvcrn04:11:40

I asked because I was hoping that you managed to get it working so I can steal code 😛

dvcrn04:11:33

but yeah, if you use clojure on the server things get a lot easier

johanatan04:11:59

Well, we do have a server in Clojure but the mobile clients also can connect directly to Firebase (which is a MBaaS)

johanatan04:11:38

I'm not sure that Firebase and Datomic are comparable though-- Firebase's querying capabilities are not nearly as powerful as a Datalog implementation

johanatan04:11:03

It's more like S3 but for JSON and with the ability to watch particular paths and get notified of updates in real time

johanatan04:11:07

So, is there a document explaining how to connect vim to natal/ambly REPL?

johanatan04:11:23

[or any other editor really]

dvcrn05:11:56

mhh I don't think so. You could try something with piggyback and nrepl but I am not experienced enough with that to give constructive advice

dvcrn05:11:05

I usually have the repl inside emacs inferior mode open

johanatan05:11:15

Does that let you have your file open and highlight a block to send to the REPL?

dvcrn05:11:11

ah what am I talking

dvcrn05:11:13

it is possible

dvcrn05:11:29

I confused it with something else, whoops

dvcrn05:11:49

(require
	'[cljs.repl :as repl]
	'[cemerick.piggieback]
	'[ambly.core :as ambly])

(cemerick.piggieback/cljs-repl
	(ambly/repl-env :choose-first-discovered true))
this is the code that I have auto-executing with a shortcut when I am connected to a repl

johanatan05:11:44

Hmm, so from one REPL it connects to another?

johanatan05:11:07

Even getting a node.js REPL on localhost was a pretty involved process last time I checked/tried it though

dvcrn05:11:36

once you have figwheel running it's very simple. Figwheel can embed a nREPL

dvcrn05:11:42

for js / node that is

johanatan05:11:56

Hmm, ok. I'll check it out. Thx!

dvcrn05:11:32

that's my elisp code I use with figwheel:

(defun figwheel-repl ()
  (interactive)
  (save-some-buffers)
  (with-current-buffer (cider-current-repl-buffer)
    (goto-char (point-max))
    (insert "(require 'figwheel-sidecar.repl-api)
             (figwheel-sidecar.repl-api/cljs-repl)")
    (cider-repl-return)))

johanatan06:11:13

[Though I'm not really an emacs user simple_smile]

dvcrn06:11:39

I was like that one day too 😛 Then I peaked into emacs land and never came back

johanatan06:11:09

Haha, do you use vim mode?

johanatan06:11:27

I prefer the functional/compositional nature of vim commands over emacs chords

dvcrn06:11:46

I hate emacs commands. Take a look at https://github.com/syl20bnr/spacemacs/, it's a pre-configured emacs made for vim people. Has support for all major languages (including clojure and repls and what not) baked in

dvcrn06:11:02

That's what made me drop my .vimrc right away

johanatan06:11:58

Yea, I've heard about it. Last I looked it was still pretty immature

johanatan06:11:08

I might check it out soon but it's hard to throw away the investment I've made in vim's environment/setup etc

tiensonqin07:11:37

Has anyone successfully using react-native bundle?

tiensonqin07:11:08

I tried both react-native v0.14.2 and react-native v0.13.0, both not work

tiensonqin07:11:40

It just shows: Unable to resolve module goog.debug.Error

tiensonqin07:11:14

meanwhile, I found https://github.com/chendesheng/ReagentNativeDemo works fine with compiler optimizations set to whitespace.

johanatan07:11:27

What is 'react-native bundle'?

johanatan07:11:06

I'm using 0.13.0

johanatan07:11:21

[which is what you'll get by using 'natal' to create a new project]

dvcrn08:11:47

@johanatan: to actually ship an application, you need to bundle your javascript code and put it on the device. Without that your device will always need a packaging server in the background

dvcrn08:11:58

react-native bundle is doing exactly that

mfikes11:11:05

@johanatan @dvcrn : Piggieback is probably the way now. Maybe Vim can be made to support Socket REPL. See http://blog.fikesfarm.com/posts/2015-11-11-ambly-and-socket-repl.html

mfikes11:11:07

(Piggieback is described in the Ambly wiki on Cursive setup)

mfikes12:11:31

@tiensonqin: yes, I had successfully used a bundle with QTTT project. It is so old now things may have regressed with recent React Native releases. But the ideas in that repo were sound. You can see the bundle sitting in the tree https://github.com/mfikes/qttt/tree/master/iOS/QTTT/iOS

tiensonqin13:11:28

@mfikes: Socket REPL is cool, I finally make a bundle using chendesheng's method, just make goog global to act as common js module, I can confirm react-native v0.13.0 is working fine, still don't like this way too much, cause the losing of dead code removal and code splitting.

mfikes13:11:52

Yeah, we have a ways to go before we can sort out how to employ :advanced. But, the nice thing is that JavaScriptCore doesn’t seem to even need it. (Many of the optimizations in :advanced are evidently done in JavaScriptCore on the fly anyways—so really :advanced ends up being about making the code small, not faster.)

mfikes13:11:55

FWIW, even using :simple with Planck (in JavaScriptCore) increased startup latency compared to just using :none.

tiensonqin13:11:49

Don't even know this, thank you so much! Thought that bigger bundle size will increase the app loading latency...

mfikes13:11:26

Right, it could be more stuff to read from flash and also the download from the App Store could be bigger. So minimizing code size via :advanced is still a good thing, if it can be achieved. Perhaps :advanced works if you make a dump of the bundler output and then treat the resulting JavaScript as a gigantic :foreign-lib. I haven’t gone down that path.

tiensonqin13:11:48

You mean bundler compiled again by the closure compiler?

mfikes13:11:09

Yes, essentially use curl or something to get the bundle as spit out by the React Native packager, put it on disk, and then configure your ClojureScript project to treat it somehow as a :foreign-lib that gets a synthetic namespace, and let ClojureScript run the show. Then turn on :advanced and cross your fingers that things still work. simple_smile

tiensonqin13:11:56

is that url bundler equal to the generated bundler by react bundle?

mfikes13:11:00

(This is better than trying to treat the individual React Native JavaScript files as individual :foreign-lib entries for a couple of reasons for now: 1. The :foreign-lib spec would be huge. 2. The React Native packager uses a Facebook-proprietary module format for some of the files.)

mfikes13:11:24

Ahh, yes, I suppose react bundle is the same as using curl manually.

tiensonqin13:11:18

fine, I think I need to try this, maybe this weekend.

mfikes13:11:56

Yeah, I’m glad we have more people hacking on this stuff as time goes forwards. As a group we will discover the optimal ways to skin this cat.

tiensonqin13:11:37

Yes, and i just write an app using cljs even without any js experience, and it's working very well, thanks for your help, dnolen and the community

tiensonqin13:11:10

Now i'm sink to the mobile hole.

mfikes13:11:56

Hah! Me too. Classroom Checkout was written essentially entirely in ClojureScript, and at the time I didn’t know much at all about JavaScript. Still don’t. See https://github.com/mfikes/shrimp for an example project that works essentially the same way Classroom Checkout works.

mfikes13:11:53

(I also find it a testament that I have been able to contribute a decent amount to the ClojureScript compiler itself without knowing JavaScript!)

tiensonqin13:11:00

Yeah, the power of parens abstraction is so huge!

tiensonqin15:11:55

I just test react-native v0.14.2, with optimizations set to :simple, it works well, even no need to hack the goog variable, this is the example repo: https://github.com/tiensonqin/issues

decker40515:11:26

@tiensonqin: so then you’re just doing react-native bundle and loading the resulting file directly in XCode?

tiensonqin15:11:28

I don't do react-native bundle, just cljsbuild.

tiensonqin15:11:50

You can test it

tiensonqin15:11:08

Time to go bed, maybe it's cache, I lost my mind now!

decker40515:11:21

I’ll play around with it, good work!

wilkerlucio20:11:42

how can I (print "something") on React Native? there is a setup function to use as print-fn?

wilkerlucio20:11:03

I found out that I can just use console.log simple_smile

mfikes22:11:49

@wilkerlucio: Cool. If you happen to be using Ambly, if you are connected via a the REPL, print output should be redirected back to your REPL session; otherwise such calls will be output via NSLog—appearing in Xcode's console if you are running that way. (See [ABYServer setUpPrintCapability] for this logic.)

wilkerlucio22:11:01

@mfikes: thanks for the details simple_smile