status-im
/
re-natal
mirror of https://github.com/status-im/re-natal.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
Bootstrap ClojureScript React Native apps
178 Commits 5 Branches 68 Tags 716 KiB
CoffeeScript 56.7%
Clojure 31.3%
JavaScript 12%
Go to file
Artur Girenko ce5e22cd6b Update readme about problem with static images 
RN 0.14 provides unified way of accessing static images, but it does not work unless all code is statically accessible (when compiled with optimizations :simple)
 		2015-11-28 11:13:53 +01:00
resources mention original source in figwheel-breidge.js 2015-11-28 00:46:17 +01:00
.gitignore Add .gitignore 2015-11-20 20:07:42 +01:00
LICENSE license 2015-08-25 23:38:07 -04:00
README.md Update readme about problem with static images 2015-11-28 11:13:53 +01:00
index.js Implement android support in re-natal.coffee 2015-11-20 20:44:36 +01:00
package.json v0.2.0 2015-11-28 01:37:32 +01:00
re-natal.coffee Use lein-figwheel 2015-11-27 23:57:14 +01:00

README.md

Re-Natal

Bootstrap ClojureScript-based React Native apps with Reagent and re-frame

Artur Girenko, MIT License @drapanjanas

This project is a fork of dmotz/natal by Dan Motzenbecker with the goal of generating skeleton of native app for iOS and Android based on Reagent and re-frame.

The support of figwheel is based on solution developed by decker405/figwheel-react-native

Re-Natal is a simple command-line utility that automates most of the process of setting up a React Native app running on ClojureScript with Reagent an re-frame.

Generated project works in iOS and Android devices.

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.
  • Optimizations :simple is used to compile "production" index.ios.js and index.android.js
  • Unified way of using static images of rn 0.14 work ONLY with prod-build...

Usage

Before getting started, make sure you have the required dependencies installed.

Then, install the CLI using npm:

$ npm install -g re-natal

To bootstrap a new app, run re-natal init with your app's name as an argument:

$ re-natal init FutureApp

If your app's name is more than a single word, be sure to type it in CamelCase. A corresponding hyphenated Clojure namespace will be created.

Re-Natal will create a simple skeleton based on the current version of Reagent and Day8/re-frame. If all goes well you should see printed out basic instructions how to run in iOS simulator.

$ cd future-app

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.

You have to reload your app, and if you have used figwheel the REPL should come up with prompt.

At the REPL prompt, try loading your app's namespace:

(in-ns 'future-app.ios.core)

Changes you make via the REPL or by changing your .cljs files should appear live in the simulator.

Try this command as an example:

(dispatch [:set-greeting "Hello Native World!"])

"Prod" build

Do this with command:

$ lein prod-build

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".

Tips

  • 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 re-natal launch in your app's root directory.

  • By default new Natal projects will launch on the iPhone 6 simulator. To change 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 index of the device on the list.

  • To change advanced settings run re-natal xcode to quickly open the Xcode project.

  • 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.

Dependencies

As Re-Natal is the orchestration of many individual tools, there are quite a few dependencies. 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.

Aspirations

  • Xcode-free workflow with CLI tools
  • Templates for other ClojureScript React wrappers
  • Automatic wrapping of all React Native component functions for ClojureScript
  • Automatically run React packager in background
  • Automatically tail cljs build log and report compile errors
  • Working dev tools
  • Automatic bundling for offline device usage and App Store distribution
  • Android support

Contributions are welcome.

For more ClojureScript React Native resources visit cljsrn.org.