Townske app in react native

The experience of a web developer building an iPhone app.

About 6 months ago we were at a crossroads with our travel publishing platform Townske. Townske was officially launched on the web and we were ready to move on to developing and releasing an iOS app.

As we are rocking a development team of one, we didn’t want to have to put on a native iOS developer for a single app, and also didn’t want to outsource to a third party for development and maintenance. At that time I stumbled over Facebook’s announcement of React Native.

React Native is a framework that allows you to compose native UI with Facebook’s fantastic front end javascript framework React. We use React for the front end of townske.com, so the appeal of using the same framework for both native and web apps was strong.

We discussed the merits and risks of using such fresh tech, but decided that it would be worth the risk.

Now that we have had our app in the app store for a few months, I thought I would take a moment to reflect on our experience.

Development experience

The team at Facebook have done a fantastic job with providing an exceptional development experience with React Native. The system messages are verbose and precise, often suggesting probable causes to errors. In debug mode, the app can be set to live reload on changes, and real devices can be remotely debugged via chrome dev tools.

Debug menu

Compared to trying to decode compile errors in objective-c / swift, this was very refreshing. Having hot reloading of the app is also a godsend in terms of development speed, as waiting for compilation is the biggest productivity killer.

Developing for react native is very similar to developing for standard react. The biggest points of deviation from a normal react app are styling and navigation. Native apps are usually structured differently to web apps, so this can require a bit of thought for web developers getting into app development.

React Native contains a port of the web’s flexbox model for laying out UI, and a subset of CSS properties for styling. Flexbox has been around for a while now in browser-land, but be wary that there are few deviations in the standard flexbox properties to the web standard (e.g. default flex-direction).

Hiccups

There were remarkably few road blocks while developing this app. The biggest problems we ran into were feature related. For example, when I started building out the app, there was no way to click a marker on a map. However, without fail, every time I ran into an issue like this, there would already be a github ticket open about it, or a fix already scheduled for the next release.

So how did it turn out?

Overall, developing for iOS in React Native was nearly completely painless. The only small pangs are easily chalked up to the growing pains of new, rapidly evolving software.

I would bet money that the vast majority of iOS apps could be made comparably well in React Native in a reasonable amount of time. For us, it took a designer and developer just over a month from start to finish for our first public release, including design and build time for the app and its supporting web services.

One of the best things particularly for us, is that a large portion of business logic (data handling, etc) could literally be lifted from our web front end to the app.

We are really happy with the quality of the product that we’ve managed to create with React Native, and feedback so far has been overwhelmingly positive. We have been featured twice in the App Store under best new apps, go to http://townske.com/app to check it out!

There were some minor performance issues with our earlier versions, but the community around react native on Facebook were really great in giving detailed feedback and assistance in resolving perf issues.

Who is react native for?

I would recommend React Native in a heartbeat to anyone in similar shoes to ours. It is obviously ideal for those with a web development background, especially if you have ever used React. React Native probably won’t persuade many native iOS developers at the moment, but React Native brings a few really strong qualities to the table.

• Speed of development. Live-Reload is something most web developers don’t think twice about now, having it around certainly speeds up code / test dev cycle. Any time waiting for compilers or emulators to load is time waisted.
• Speed of deployment. Because React Native loads the application from a single javascript file, utilising services like https://microsoft.github.io/code-push/ you can push immediate updates to production apps. This is an epic win for React Native, as having to wait for minor bug fixes to be released is not ideal.
• Code share/javascript everywhere. If you are making an android or web app alongside your iOS app, much of the same core logic can be used. The added benefit of being able to write for all the above in the same language is also great for not having to shift context between platforms.
• Community. This is not directly related to the framework, but the community around React Native is really helpful, friendly and engaged. Check out the Facebook React Native community group in particular if you’re getting started, there are lots of people hanging around to help.

Want to see what I’m up to now? Check out Paperform, it’s like medium meets a form builder.