Building Mobile Apps (iOS and Android) with Clojurescript

Mohak Puri
Dec 21, 2019 · 4 min read
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

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

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


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

3. Run your android emulator using the following command

// If you are unaware of the emulators, you can find that usingemulator -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 :D (Credit: Gigphy)

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 .

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)

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

MindOrks

Our community publishes stories worth reading on Android…

Mohak Puri

Written by

Product Engineer GO-JEK | GSoC 2018 @openMF | Mobile | Backend | mohak1712 everywhere

MindOrks

MindOrks

Our community publishes stories worth reading on Android Development

More From Medium

More from MindOrks

More from MindOrks

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade