React Native for non-technical Founders
In this article, I’ll share some common frustrations about building cross-platform mobile applications; a bit about React Native and what it does; why we’re excited about it and who is using it; and, finally, an example of our first internal test to define, design, and launch a micro-product in just one week.
Are you overwhelmed with the seemingly endless ways to solve a business problem with mobile technology? If you’re a design and development consultancy like us, you have most likely felt this frustration at some point — maybe even all the time. But, if you’re a non-technical person, these topics can be even more overwhelming.
At Adjust, we have been exploring ways that we can efficiently bridge the gap between web & mobile for our clients and ourselves to alleviate this frustration. For our team, this means a few things:
- Using existing skills and programming languages in smarter ways;
- Thinking more and more API-first: create the business logic and how the backend works so that you can display it anywhere — in a browser on your computer, natively on a phone or tablet, or on any number of other devices that make sense;
- Continuing to look for ways to make first-class cross-platform solutions (iOS, Android, and more) without completely separate code bases
For those reasons, we’re excited to explore Facebook’s framework, React Native, for new client projects — especially those that are “greenfield” (where no current technology stack or code debt exists).
What is React Native?
Let’s start with what it is not: React Native is NOT a “hybrid” or “HTML5/mobile web app.” From the source:
“With React Native … You build a real mobile app that’s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.”
Unlike hybrid apps of the past that are written in pure HTML/CSS/JavaScript and then embedded in an internet browser wrapped inside an “app” facade, React Native does two primary things: first, it uses JavaScript to call and use native components, modules, and functionality; and second, it allows the creation of custom components directly via JavaScript. The React app runs native code and custom JavaScript on separate threads. This means the application receives all of the first-class benefits of being a native app, including fast touch events and scrolling, use of native interface libraries and hardware APIs, and more.
In short, a React Native app acts, looks, and feels like an app exclusively written in native code!
There are other solutions that try to do this as well, including Corona and Unity on the high-end gaming side and Appcelerator on the JavaScript side and we’ve tried them, too. However, since our browser-based applications are now being developed with React, decreased development time and a shared code base is key.
Development Advantages
In addition to allowing us to flex longstanding JavaScript development skills, we’re excited about React Native because:
- It is easier to incorporate developers with a traditional front-end programming background into the project;
- It can be bridged to integrate native Objective-C or Swift (iOS), and Java (Android) code libraries;
- It is possible to repurpose as much as 85% of the codebase when building for both iOS and Android;
- It is possible to push incremental app updates without submitting new versions to the iOS App Store and Google Play Store;
- It is built for developer happiness and introduces greatly improved debugging tools alongside a familiar language in JavaScript;
- It was created and is sponsored by Facebook and has an exponentially growing Open Source community behind it.
Does it make coffee, too?
React Native sounds too good to be true and that should set off at least some alarms. It’s not perfect; every native UI component is not directly available yet and, given that iOS was the first target, it enjoys a more feature-complete set of tools than does Android — but this will continue to even out as React Native and its ecosystem matures.
Startup Advantages
We think this is important for companies at all stages because the days of building for just one platform are quickly becoming a thing of the past. Choosing a technology stack that allows for the potential of both a smaller development team and one that leverages a greater pool of talent (by allowing JavaScript developers to contribute); one that allows for such a significant amount of shared code between native platforms; and one that allows for incremental testing, updates, and releases without app store approval processes all seem like a great fit for companies that need to iterate and move fast with small teams.
Who is using React Native?
Well, Facebook, of course! They have written about integrating React Native into portions of the main Facebook mobile apps, such as in the Events dashboard. The stand-alone Facebook Groups app on iOS is built with both React Native and native code; and Facebook Ad Manager and F8 Conference apps on both iOS and Android are built with React Native.
SoundCloud recently published an article about their experience using React Native to create the iOS version of Pulse, their app for creators. Spoiler alert: it went so well that they’re rebuilding their existing Android Pulse app to be part of the same React Native code base. They’re also using it to build an internal app; and they’re starting to identify components of the main SoundCloud app to re-write in React Native views.
Discovery created a VR app using React Native and published an article from a developer’s perspective on the switch from Objective-C and Swift.
For a startup perspective, the solo developer for Townske, which launched web-first, writes about the advantages of creating their iOS app in React Native. They have since added an Android app, too.
There’s also a React Native Showcase that Facebook published if you’re curious.
Adjust Creative, React Native and Peruse
To test out React Native, we decided to run a design and development spike — a 1 week experiment with the goal of proving out our assumptions above in an app worth publishing to the world.
The good news? We did it!
We’re proud to release Peruse: Design News, a beautifully simple micro-product to peruse the latest design industry news from your favorite sources. Chris wrote about the 30 hour experience from a developer’s perspective and we’re excited to continue to use React in both our web and mobile applications.
Go get the Peruse app for FREE from the Apple App Store or the Google Play Store and keep up with the design industry news!
We’re here to get it done.
We’ve been honing our craft for years and we love design. We’ve got the proof, the friends, and the know-how.
Are you considering a cross-platform mobile app?
Are you interested in how much time/money it may take your organization or future venture to build out your idea?
Do you have an idea you’re ready to get going now?
If you have a quick question, ask in the comment below and I’ll gladly jump on and answer it for you.
