At Cantina we constantly seek to evaluate and implement new technologies that streamline our workflows. In recent years, we have shipped several projects using React Native, including the Newport Folk Festival and Your Call Football mobile applications, which has allowed users to experience both IOS and Android versions of the app. React Native allows developers to build mobile applications using JavaScript instead of native languages like Objective-C (iOS) or Java (Android). Choosing React Native to build mobile projects has translated into many benefits for Cantina teams including: utilization of a shared code base, quick uptake for new developers, and more efficient app development. All of which translates into streamlined projects for our customers and an improved end-user experience.

While React-Native provides reusability, efficiency, and flexibility, it’s not without its limitations. Critics cite that React Native adds unneeded complexity as well as the management of an extra code base. To learn more about the advantages/disadvantages, check out the recent post from Daniel Bostwick which discussed questions to consider when deciding between native and React Native.

In today’s post, I’ll focus on a useful feature of React Native, Over-the-Air (OTA) updates, which allows for quick and painless delivery of bug fixes and in-app improvements.

Over-the-Air Updates

OTA allows React Native developers to publish updates directly to their users’ devices without submitting a new version to iTunes connect (iOS) or the Google Play Store (Android). This functionality provides a dynamic deployment experience similar to web application development. To understand how and when OTA can be used, let’s take a high-level look at the React Native architecture.

React Native Architecture

React Native applications are composed of two things—native code and Javascript code. Native code is written in Objective-C (iOS) or Java (Android). While native code is required for the application to function, it is largely left untouched by React-Native developers. Most React Native development is done in JavaScript and while these changes interact with underlying native implementations they don’t change them—this allows us to deploy OTA. Because these changes only affect our bundled Javascript and assets, we can sync our bundle with a third-party server and bypass the traditional native deployment process. Modifying native code requires an update through each platform’s store.

Native Mobile Deployment

Deploying native mobile apps is a lengthy process; developers need to compile and distribute a platform-specific binary to their respective stores. .ipa (iOS) binaries are uploaded to iTunes connect, while .apk (Android) binaries are uploaded to the Google Play store, each with its own set of upload steps. Once a binary is submitted, a rigorous review process begins, which historically has been slow and unpredictable. While this review process has become expeditious over time, it can still be highly variable. For example, this past spring, a cosmetic update for a client was rejected from the App Store, which delayed its release by several days, due to missing information about a feature that previously had been approved. Surely, such headaches can be avoided by allowing adequate time to process updates, but sometimes mistakes happen that require a quick fix and this is when OTA becomes very useful.

When to use OTA

OTA allows developers to quickly resolve bugs and deploy quick updates. Below are a couple examples of OTA reducing pain on Cantina projects:

While building the 2017 Newport Folk Festival app, we failed to enforce timezones for each event. On the east coast, events appeared correct, but elsewhere, event times were incorrect, causing concern for artists’ managers. Utilizing OTA updates, we were able to quickly publish a patch.

During the inaugural Your Call Football season, game start times were rescheduled at the last minute, requiring a quick copy change in the app. With OTA updates, we were able to modify the game schedule right away.

While OTA is great for bypassing the Apple or Google approval process for minor updates such as these, a brief note of caution: If making major application updates, these changes should be published through each platform’s store, to avoid trouble with Apple/Google.

Microsoft Code Push

Microsoft’s CodePush is a great tool for managing OTA updates; it’s easy to configure, integrate, and best of all, it’s free. CodePush offers a few notable features. First, it maintains a copy of the previous update, so if a new change causes an app crash, CodePush will revert to the previous crash-free version. This is helpful in preventing any downtime for users. Second, CodePush offers multiple deployment strategies, allowing developers to control the frequency and presentation of updates to end users. For more information, CodePush offers great documentation.

Conclusion

In summary, OTA allows React Native developers to streamline mobile app deployment and deliver updates to their users in minutes rather than days without the headache of Apple/Google store approval. While OTA is not a replacement for major app store updates, OTA is an efficient tool to have in your back pocket when app store deployment hits an unforeseen roadblock or you simply need a quick fix. Stay tuned for future posts, discussing the benefits of using React Native for mobile development.