2015-11-20 20:07:09 +01:00
|
|
|
# Re-Natal
|
2015-11-21 10:42:24 +01:00
|
|
|
### Bootstrap ClojureScript-based React Native apps with Reagent and re-frame
|
2015-11-21 12:30:33 +01:00
|
|
|
Artur Girenko, MIT License
|
|
|
|
[@drapanjanas](https://twitter.com/drapanjanas)
|
2015-08-30 00:01:40 -04:00
|
|
|
|
|
|
|
---
|
|
|
|
|
2015-11-21 12:30:33 +01:00
|
|
|
This project is a fork of [dmotz/natal](https://github.com/dmotz/natal) by Dan Motzenbecker with
|
2015-11-20 20:07:09 +01:00
|
|
|
the goal of generating skeleton of native app for iOS and Android based on
|
2015-11-21 12:07:33 +01:00
|
|
|
[Reagent](https://github.com/reagent-project/reagent) and [re-frame](https://github.com/Day8/re-frame).
|
2015-11-20 20:07:09 +01:00
|
|
|
|
2015-11-28 00:45:38 +01:00
|
|
|
The support of figwheel is based on solution developed by [decker405/figwheel-react-native](https://github.com/decker405/figwheel-react-native)
|
|
|
|
|
2015-11-20 20:07:09 +01:00
|
|
|
Re-Natal is a simple command-line utility that automates most of the process of
|
2015-11-21 10:42:24 +01:00
|
|
|
setting up a React Native app running on ClojureScript with Reagent an re-frame.
|
2015-08-30 00:01:40 -04:00
|
|
|
|
2015-11-21 10:42:24 +01:00
|
|
|
Generated project works in iOS and Android devices.
|
2015-08-30 00:02:14 -04:00
|
|
|
|
2015-11-28 00:45:38 +01:00
|
|
|
## State
|
|
|
|
- Same codebase for iOS and Android
|
|
|
|
- Figwheel used for REPL and live coding
|
|
|
|
- For Android figwheel does not work yet, but auto-compile and reload works fast
|
|
|
|
- Figwheel is only working in "Debug in Chrome" mode
|
|
|
|
- You can reload app any time, no problem.
|
|
|
|
- Compiler with optimizations :simple is
|
|
|
|
|
2015-08-30 00:02:14 -04:00
|
|
|
## Usage
|
2015-08-30 22:03:00 -04:00
|
|
|
|
2015-10-03 14:50:12 -04:00
|
|
|
Before getting started, make sure you have the
|
|
|
|
[required dependencies](#dependencies) installed.
|
2015-08-30 22:03:00 -04:00
|
|
|
|
|
|
|
Then, install the CLI using npm:
|
2015-08-30 00:02:14 -04:00
|
|
|
|
|
|
|
```
|
2015-11-20 20:07:09 +01:00
|
|
|
$ npm install -g re-natal
|
2015-08-30 00:02:14 -04:00
|
|
|
```
|
|
|
|
|
2015-11-20 20:07:09 +01:00
|
|
|
To bootstrap a new app, run `re-natal init` with your app's name as an argument:
|
2015-08-30 00:02:14 -04:00
|
|
|
|
|
|
|
```
|
2015-11-20 20:07:09 +01:00
|
|
|
$ re-natal init FutureApp
|
2015-08-30 00:02:14 -04:00
|
|
|
```
|
|
|
|
|
2015-10-17 13:17:29 -04:00
|
|
|
If your app's name is more than a single word, be sure to type it in CamelCase.
|
2015-08-30 00:02:14 -04:00
|
|
|
A corresponding hyphenated Clojure namespace will be created.
|
|
|
|
|
2015-11-21 10:42:24 +01:00
|
|
|
Re-Natal will create a simple skeleton based on the current
|
2015-11-20 20:07:09 +01:00
|
|
|
version of [Reagent](https://github.com/reagent-project/reagent) and [Day8/re-frame](https://github.com/Day8/re-frame).
|
2015-11-28 00:45:38 +01:00
|
|
|
If all goes well you should see printed out basic instructions how to run in iOS simulator.
|
2015-08-30 00:16:58 -04:00
|
|
|
|
|
|
|
```
|
|
|
|
$ cd future-app
|
|
|
|
```
|
2015-11-28 00:45:38 +01:00
|
|
|
To run in iOS:
|
|
|
|
```
|
|
|
|
$ cd re-natal xcode
|
|
|
|
```
|
|
|
|
and then run your app from Xcode normally.
|
|
|
|
|
|
|
|
To run in Android, run your simulator first or connect device and:
|
|
|
|
```
|
|
|
|
$ react-native run-android
|
|
|
|
```
|
|
|
|
|
|
|
|
Initially the ClojureScript is compiled in "prod" profile, meaning `index.*.js` files
|
|
|
|
are compiled with `optimizations :simple`.
|
|
|
|
Development in such mode is not fun because of slow compilation and long reload time.
|
|
|
|
|
|
|
|
Luckily, this can be improved by compiling with `optimizations :none` and using
|
|
|
|
figwheel (unfortunately not working in Android yet)
|
|
|
|
|
|
|
|
To start development in `optimizations :none` mode you have to start "Debug in Chrome"
|
|
|
|
in your React Native application.
|
|
|
|
|
|
|
|
Then execute commands:
|
|
|
|
```
|
|
|
|
$ re-natal use-figwheel
|
|
|
|
$ lein figwheel ios
|
|
|
|
or
|
|
|
|
$ re-natal use-reload
|
|
|
|
$ lein cljsbuild auto android
|
|
|
|
```
|
|
|
|
This will generate index.ios.js and index.android.js to make `optimizations :none` possible.
|
2015-08-30 00:16:58 -04:00
|
|
|
|
2015-11-28 00:45:38 +01:00
|
|
|
You have to reload your app,
|
|
|
|
and if you have used figwheel the REPL should come up with prompt.
|
2015-10-04 19:29:36 -04:00
|
|
|
|
2015-11-28 00:45:38 +01:00
|
|
|
At the REPL prompt, try loading your app's namespace:
|
2015-08-30 00:16:58 -04:00
|
|
|
|
|
|
|
```clojure
|
2015-11-21 12:01:44 +01:00
|
|
|
(in-ns 'future-app.ios.core)
|
2015-08-30 00:16:58 -04:00
|
|
|
```
|
|
|
|
|
2015-10-04 19:29:36 -04:00
|
|
|
Changes you make via the REPL or by changing your `.cljs` files should appear live
|
|
|
|
in the simulator.
|
2015-08-30 00:16:58 -04:00
|
|
|
|
|
|
|
Try this command as an example:
|
|
|
|
|
|
|
|
```clojure
|
2015-11-22 10:57:51 +01:00
|
|
|
(dispatch [:set-greeting "Hello Native World!"])
|
2015-08-30 00:16:58 -04:00
|
|
|
```
|
|
|
|
|
2015-11-28 00:45:38 +01:00
|
|
|
## "Prod" build
|
|
|
|
Do this with command:
|
2015-11-21 10:42:24 +01:00
|
|
|
```
|
2015-11-28 00:45:38 +01:00
|
|
|
$ lein prod-build
|
2015-11-21 10:42:24 +01:00
|
|
|
```
|
2015-11-28 00:45:38 +01:00
|
|
|
It will clean and rebuild index.ios.js and index.android.js with `optimizations :simple`
|
|
|
|
After this you can reload the app exit "Debug in Chrome".
|
2015-11-21 12:01:44 +01:00
|
|
|
|
2015-08-30 00:02:33 -04:00
|
|
|
## Tips
|
2015-10-04 19:29:36 -04:00
|
|
|
- Having `rlwrap` installed is optional but highly recommended since it makes
|
|
|
|
the REPL a much nicer experience with arrow keys.
|
|
|
|
|
|
|
|
- Running multiple React Native apps at once can cause problems with the React
|
|
|
|
Packager so try to avoid doing so.
|
|
|
|
|
|
|
|
- You can launch your app on the simulator without opening Xcode by running
|
2015-11-21 12:07:33 +01:00
|
|
|
`re-natal launch` in your app's root directory.
|
2015-10-04 19:29:36 -04:00
|
|
|
|
|
|
|
- By default new Natal projects will launch on the iPhone 6 simulator. To change
|
2015-11-21 12:07:33 +01:00
|
|
|
which device `re-natal launch` uses, you can run `re-natal listdevices` to see a list
|
|
|
|
of available simulators, then select one by running `re-natal setdevice` with the
|
2015-10-04 19:29:36 -04:00
|
|
|
index of the device on the list.
|
|
|
|
|
2015-11-21 12:07:33 +01:00
|
|
|
- To change advanced settings run `re-natal xcode` to quickly open the Xcode project.
|
2015-08-30 00:02:33 -04:00
|
|
|
|
2015-10-04 20:55:16 -04:00
|
|
|
- The Xcode-free workflow is for convenience. If you're encountering app crashes,
|
|
|
|
you should open the Xcode project and run it from there to view errors.
|
|
|
|
|
2015-08-30 00:02:51 -04:00
|
|
|
|
2015-10-03 14:50:12 -04:00
|
|
|
## Dependencies
|
2015-11-28 00:45:38 +01:00
|
|
|
As Re-Natal is the orchestration of many individual tools, there are quite a few dependencies.
|
2015-10-03 14:50:12 -04:00
|
|
|
If you've previously done React Native or Clojure development, you should hopefully
|
|
|
|
have most installed already. Platform dependencies are listed under their respective
|
|
|
|
tools.
|
|
|
|
|
|
|
|
- [npm](https://www.npmjs.com) `>=1.4`
|
|
|
|
- [Node.js](https://nodejs.org) `>=4.0.0`
|
|
|
|
- [Leiningen](http://leiningen.org) `>=2.5.3`
|
|
|
|
- [Java 8](http://www.oracle.com/technetwork/java/javase/downloads/index.html)
|
2015-10-04 19:34:09 -04:00
|
|
|
- [Xcode](https://developer.apple.com/xcode) (+ Command Line Tools) `>=6.3`
|
2015-10-03 14:50:12 -04:00
|
|
|
- [OS X](http://www.apple.com/osx) `>=10.10`
|
|
|
|
- [Watchman](https://facebook.github.io/watchman) `>=3.7.0`
|
|
|
|
|
|
|
|
|
2015-08-30 00:02:51 -04:00
|
|
|
## Aspirations
|
2015-10-04 19:29:36 -04:00
|
|
|
- [x] Xcode-free workflow with CLI tools
|
2015-10-31 15:07:53 -04:00
|
|
|
- [x] Templates for other ClojureScript React wrappers
|
2015-11-21 10:42:24 +01:00
|
|
|
- [ ] Automatic wrapping of all React Native component functions for ClojureScript
|
2015-08-30 00:02:51 -04:00
|
|
|
- [ ] Automatically run React packager in background
|
|
|
|
- [ ] Automatically tail cljs build log and report compile errors
|
2015-10-26 21:04:17 -04:00
|
|
|
- [ ] Working dev tools
|
2015-10-04 15:20:13 -04:00
|
|
|
- [ ] Automatic bundling for offline device usage and App Store distribution
|
2015-11-21 12:01:44 +01:00
|
|
|
- [x] Android support
|
2015-08-30 00:02:51 -04:00
|
|
|
|
|
|
|
|
|
|
|
Contributions are welcome.
|
2015-10-17 13:17:29 -04:00
|
|
|
|
|
|
|
For more ClojureScript React Native resources visit [cljsrn.org](http://cljsrn.org).
|