Building Mobile Apps (iOS and Android) with Clojurescript

Credit: Google

React native is one of the most popular frameworks out there for creating mobile applications from a single codebase. React Native combines the best parts of native development with React. However one of the arguable downsides of React Native is **Javascript**.

Just another JS meme (Credit: Reddit)

With Clojurescript into the picture, it is now possible to create mobile apps using a beautiful and powerful language. In case you are not aware, ClojureScript is Clojure that compiles to JavaScript. It combines the power of Clojure with the reach of JavaScript. It can run in all browsers and on mobile devices as well.

Tools

1. Re-Natal is a utility for setting up ClojureScript based React Native projects. If you have some prior experience with react native, I am sure you are aware of create-react-native-app command-line tool. Re-Natal does the same thing.
2. Reagent enables us to write react components as Clojure functions. It uses Hiccup-like markup instead of React’s sort-of HTML.
3. Figwheel provides stateful hot reloads for faster feedback during development.

Setup

Setting up a new project using Re-Natal is easy and straight forward. Let’s first install Re-Natal using the following command

npm install -g re-natal

Once we have installed re-natal, we can initialize a new project

re-natal init <AppName>

By default, re-natal uses Reagent as the React wrapper but that is not the only option. You can specify a different wrapper like Om or Rum using the following command

re-natal init <AppName> -i [om-next | reagent6 | rum]

Run

Now that we have a dummy project, let’s get it running.

I would only be covering running the project on an android emulator. Getting this running on iOS should be pretty straight forward.

1. Inside your application folder run npm install
2. Now inside the android folder create a new file local.properties with the location of your Android SDK

sdk.dir = /Users/<USERNAME>/Library/Android/sdk

3. Run your android emulator using the following command

cd /Users/USERNAME/Library/Android/sdk/emulator && ./emulator @<EMULATOR_NAME>
// If you are unaware of the emulators, you can find that using
emulator -list-avds

4. Now let’s install the app on the emulator using npm run run-android

Hello World from Clojure :)

Voila! We now have an Android Application created with React Native written in Clojurescript !

Now let’s change the background color of the button and the text shown when we press the button.

Let’s re-install the app using npm run run-android.

Even after changing the code and reinstalling our application everything looks the same.

Still not working [Credits: giphy]

Although we have made changes to our cljfile, one thing we still haven’t done is rebuild our code to update index.android.js, the file which is actually loaded by the bundler.

This is where figwheel comes into the picture. Without it, you need to manually rebuild and install the application every time you make some changes to your code. If you check project.clj you will notice this is exactly what happens in the prod profile. There is no figwheel, and every time you build the project it updates the index.android.js and index.ios.js .

lein with-profile prod cljsbuild auto

However, this is a really slow feedback cycle during development. Therefore we have a separate dev profile that uses figwheel. To start using figwheel run the following commands (Make sure your emulator is running beforehand)

1. re-natal use-android-device avd
2. re-natal use-figwheel
3. lein figwheel android
4. npm run run-android

Using figwheel for development

Now you can make changes to your code and see the result in realtime!

That’s about it! Thank you for reading, and I hope you enjoyed the article. In the next part let’s build an application from scratch!

You can also follow me on Medium and Github. 🙂