Why we built our Android app in React Native
and you probably should too
We recently released the Spare Rides Android App, built from scratch using React Native 😎. We took a leap of faith with React Native and I’m pleased to say, it paid off! Overall we are extremely satisfied with the result — the product works very well and development took a fraction of the time that a native app would have taken. Before getting into the seven(ish) reasons to choose React Native, go check out our app and try it for yourself!
1. Hotloading
If you have ever built an iOS or and Android application you know that debugging is the least fun part. There are days when your app keeps crashing and you keep trying different things until something finally works. Worse yet you have to wait for the app to compile, install on your device and start up between every little change. It can be a real nightmare.
Forget the waiting with React Native. It takes less than a second to see changes on a device after pressing save. 😯 If anything could immediately declare React Native a winner, hotloading would be it. It is by far the most amazing feature React Native has to offer. I don’t remember the last time I used a development platform that would allow me to iterate this quickly.
On the other hand, Java requires you to wait at least a minute for Gradle to compile and install the updated version on the device for even the slightest change. Depending on the size of the project it could take up to 10 minutes for everything to be recompiled from scratch.
In React Native I make my changes, save my file, tilt my neck to look at the phone screen and usually by the time my gaze falls on the device screen the changes are already there.
Unfortunately hotloading doesn’t yet work for every change and occasionally React Native trips up with strange errors and a full JS reload is required, but even then it takes roughly 5 seconds for everything to be updated.
2. JavaScript and JSX is faster and easier
React Native allows developers to to write all of their code in JavaScript and React. It’s perfect for someone like me who hates writing in Java for Android. Why do we like JavaScript so much?
NPM Community
This is the (most controversial) best part of writing JavaScript, you never have to reinvent the wheel. If you can think of it then someone has already made a module for it that you can add to your project with a one liner. Even left padding for text alignment!
npm install — save whatever-you-wantThis makes any project you need to accomplish substantially faster and easier. The React Native package community is still lagging behind and isn’t nearly as strong as the node community but we were able to find modules for almost everything that we needed in our Android app. Looking for some amazing React Native components? Check out this list: https://github.com/jondot/awesome-react-native
Dynamic Typing
Everything is much simpler in JavaScript. There aren’t any long and convoluted ArrayList<AsyncTask<Trip, String, String>> definitions. You never have to worry about which data type to use, everything is just a var.
Way less code
At the time of me writing this blog post, our iOS and Android app are about identical to the user. Here is the line count comparison.
Lines of Code
With over twice the lines of code, the iOS app essentially functions and looks identical to our React Native Android product. Here is an example of how some simple cell code in a ListView works in React Native. All you iOS developers, draw your own conclusions. 😋
<Cell {…this.props}>
<Switch
style={this.styles.switch}
onValueChange={this.props.onValueChange}
value={this.props.value}
/>
</Cell>3. Backend is written in Node.JS
Our backend is written in Node.JS and since both use JavaScript, switching between the two projects is a breeze. I just have to remember which window of Visual Studio Code has the right project open 😅
Furthermore, all of our data transfers over REST and Socket.IO are done in JSON so there is never any need to to parse incoming data into a native platform format. We send JavaScript objects and we receive JavaScript objects, it’s that simple.
4. Reusable components
Best part about React is how easy it is to reuse different components throughout the code. For example every single button in our app is an instance of a SimpleButton component (Which I admit, over time became a lot less simple. It’s probably time to rename that little guy) 😁
The beauty of being able to reuse components is that their internal logic is not relevant to any parent views. They just pass the component a few properties that’s the end of it.
5. Same Performance as Native (Almost)
The biggest reason why most developers and companies seem to be scared to jump into React Native is because they are scared of the performance loss. Let me assure you, this not WebView packager. React Native builds your JavaScript into actual native components.
Sure, it’s not going to be as performant as your fully native app, the animations might not be as fancy. But if the majority of your users are running an Android phone bought in the last 5 years I would be surprised if any of those users would notice the difference.
For us the difference in performance is slightly visible but easily worth cutting down the development time by 4 times. 💪💪
6. Cross platform
React Native also allows us to reuse all of the code we wrote to make Android work for iOS. Half the time to get the same thing done? As soon as we switch over our native iOS app to React Native, making any UI changes will be much easier and faster.
Maybe one day we will even add Windows Phone support 😉
7. Instant OTA (Over The Air) App Updates
The iOS App Store review times just got a lot faster and the Google Play Store updates barely take a few hours, but what about when you committed that terrible bug preventing your users from creating trips (as we did) or when your users don’t have auto update turned on and keep using an outdated version?
With React Native you can release a new JavaScript bundle, have your app download it next time a user opens it and update itself. Just like that, your users are running the latest version.
Curious how we are doing it? Check out CodePush http://microsoft.github.io/code-push/ 🚀
7.5 This is the future
Mobile is ubiquitous, and apps are now just as important, if not more important, than web products for many companies. Building an app for the future includes a client-side code base written in a modern, heavily-used, modularized language. This is Javascript and React Native.
Conclusion
Yes, React Native is still a beta product, and yes, it still has bugs — but our experience with development time cut down and near identical user experience prove that this is how apps should be built. Time will tell, but I’m of the opinion that very soon this is how most apps will be built. I’m glad to have been the guinea pig.
