This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2015-11-12
Channels
- # admin-announcements (3)
- # beginners (13)
- # boot (52)
- # cbus (1)
- # cider (13)
- # cljs-dev (70)
- # cljsjs (16)
- # cljsrn (124)
- # clojure (129)
- # clojure-austin (3)
- # clojure-boston (2)
- # clojure-russia (238)
- # clojure-sg (3)
- # clojurescript (119)
- # cursive (18)
- # datomic (22)
- # editors-rus (2)
- # events (1)
- # hoplon (160)
- # jobs (1)
- # jobs-rus (8)
- # ldnclj (31)
- # ldnproclodo (1)
- # lein-figwheel (4)
- # leiningen (8)
- # off-topic (3)
- # om (335)
- # onyx (29)
- # re-frame (15)
- # reagent (12)
- # robots (1)
- # yada (19)
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?
How did we come up with that path originally? Maybe it will help me to re-trace your tracks...
@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
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. :)
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"}
Trying to use this package: https://github.com/APSL/react-native-button
With this: var { Button } = require('apsl-react-native-button');
in my index.ios.js
@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
Ya, I thought about doing that but it would be basically re-inventing all of the code inside that package.
yep. Well if you learn more about how to use the APSL button, share here, or write a summary post :)
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)
Yeah. It seems the easiest approach is to peek in the packager's output to find the module ID.
Hey @mj_langford — glad to see you are into this craziness :)
;D trying it from time to time.
I haven’t tried to build anything permenant on it
I’m interested in trying some more native-esque UI stuff…just haven’t had time
Just converted my first .xib (+ backing code) to React Native/ Om Next and got about 90% reduction in line noise! [Almost pixel perfect rendition].
@johanatan: Are you using remote sync already with next?
@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.
Ahh… then you are using Om Next. But, as you said you are not interacting with a server.
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
(Architecturally speaking, this feature of Om Next is great for mobile, with respect to flexibility and performance.)
We are planning to use Firebase for our mobile backend. Does it still make sense to use Om Next Server in that case?
Om Next appears to be easiest to satisfy if you are using Datomic, but it doesn’t require a specific backend.
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
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.
Well, we do have a server in Clojure but the mobile clients also can connect directly to Firebase (which is a MBaaS)
I'm not sure that Firebase and Datomic are comparable though-- Firebase's querying capabilities are not nearly as powerful as a Datalog implementation
It's more like S3 but for JSON and with the ability to watch particular paths and get notified of updates in real time
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
(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 replEven getting a node.js REPL on localhost was a pretty involved process last time I checked/tried it though
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)))
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
I might check it out soon but it's hard to throw away the investment I've made in vim's environment/setup etc
Has anyone successfully using react-native bundle?
I tried both react-native v0.14.2 and react-native v0.13.0, both not work
It just shows: Unable to resolve module goog.debug.Error
meanwhile, I found https://github.com/chendesheng/ReagentNativeDemo works fine with compiler optimizations set to whitespace.
@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
Actually, I find @mfikes had explained this very well: https://github.com/reagent-project/reagent/issues/119
@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
@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
@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.
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.)
FWIW, even using :simple
with Planck (in JavaScriptCore) increased startup latency compared to just using :none
.
Don't even know this, thank you so much! Thought that bigger bundle size will increase the app loading latency...
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.
You mean bundler compiled again by the closure compiler?
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.
is that url bundler equal to the generated bundler by react bundle
?
(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.)
fine, I think I need to try this, maybe this weekend.
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.
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
Now i'm sink to the mobile hole.
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.
(I also find it a testament that I have been able to contribute a decent amount to the ClojureScript compiler itself without knowing JavaScript!)
Yeah, the power of parens abstraction is so huge!
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
@tiensonqin: so then you’re just doing react-native bundle
and loading the resulting file directly in XCode?
I don't do react-native bundle
, just cljsbuild.
You can test it
Time to go bed, maybe it's cache, I lost my mind now!
thanks!
how can I (print "something")
on React Native? there is a setup function to use as print-fn?
I found out that I can just use console.log
@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.)
@mfikes: thanks for the details