Bootstrap ClojureScript React Native apps
Go to file
Artur Girenko 7e8f57c4b7 Update readme 2015-11-28 11:16:03 +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 2015-11-28 11:16:03 +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 There are lots of limitations currently, but IMHO this is the right way to go in order to support both platforms.

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.