Why choose React Native

Posted by Aaron on September 24, 2017

If you’ve spent any time in the mobile space, either as a user or as a developer, you’re probably wary about non-native mobile app frameworks. They either provide a non-native experience (Unity, Xamarin, Cordova or any other webview based mobile app) or compile some non-iOS or non-Android language to native code, in which case you end up having to learn how the underlying APIs work anyway. React Native provides a solution to both of these problems, as well as bringing a new declarative paradigm to mobile UI that makes developing with it fast and enjoyable.

Why Mobile Web isn't good enough

That isn't quite true. Mobile web is good enough in a number of cases. For displaying information, or simple interactions that require neither a lot of time nor use of mobile capabilities like push notifications, mobile web can work just fine. But mobile web suffers from several deficiencies: it does not use native widgets; it cannot access mobile phone capabilities without help; it has the performance overhead of the webview; and it does not handle common touches and gestures without major work. Moreover it will never equal native in look and feel, no matter how attentive the frameworks are to various platform-specific details because of the challenges inherent in dealing with touch handling, and native OS UI continues to change and evolve. The UX designers at Apple and Google have crafted many subtle details that add up to a pleasant experience. Details like the feedback on switches and the way different scenes transition between each other. Users will notice these small changes, even if they won’t be able to tell you why it doesn’t feel right.

This is unfortunate, since web provides a number of advantages over mobile. Web has a larger developer base, with both increased talent and increased online resources and libraries available. Web can have one code base for both Android and iOS, and is likely to work on any unknown platforms that might emerge. Web requires no install step. And web can leverage existing code logic for applications.

Fortunately, some Facebook folks took a look at the web framework they built to deal with Facebook.com’s challenges and realized that, with a large but reasonable effort, they could bridge the gap and make a framework for building apps with a native look and feel (by using native components and native touch handling) but with many of the aforementioned advantages of web development. They adapted React so that it would render in UIViews and ImageViews instead of "div"s and "span"s. And called it React Native.

How does it work?

Simply it runs a Javascript engine along with some native code - using the native core to build native views, detect touches and provide access to various native features and using Javascript to render views, dispatch and handle touches and make network calls. A bridge handles all the communication between the two parts. The end result is a smooth and performant native look and feel with a web-like development cycle.

Advantages

UI = λ(state)

The first great advantage of React Native is its React paradigm. That is, having the UI rendered as a function of of the state. If you are not familiar with React, React works by building component trees with one-way data flows and then rendering them to the DOM through its reconciliation algorithm, which compares the current tree with its next iteration and then makes only a minimal set of changes. Each component has a render function that returns a component tree based on the state of the component. Changes to the state trigger new renders. This makes it easy to reason about the state of the UI at any given point, and easy to make changes to it. And it avoids entire classes of bugs and errors by constraining the dataflow.

Read-Eval-Print

React Native’s second great advantage is the speed of development feedback. Unlike purely native code, React Native code does not need to be compiled and re-launched every time a change is made. Though the native platforms have made strides in this regard, neither is as fast as the React Native development server spitting out code to its client app. Moreover, with tools like Expo, it is possible to develop certain iOS apps without a Mac, and distribute apps for testing without needing to install anything but the Expo client.

Distribution

Tools like CodePush allow apps to be updated without having to go through the normal app store approval process. Yes, this is totally kosher.

Ok, so how does it perform? Does it look like a native app? What about memory and speed?

React Native looks and feels like a native app since it is building with native components. iOS switches are round and move like iOS switches. Because they are. Its list views are constructed in a very similar way to the native lists, and so they scroll smoothly. You do need to worry about performance but less than you’d think.

Memory-wise, RN is more memory intensive. It has to be, since it uses a Javascript engine. But it’s not as bad as you’d think. React Native competes pretty closely with native apps for memory usage, and I have not experienced memory alerts or problems writing React native apps.

Here’s a deeper dive into performance questions with graphs and numbers:

https://medium.com/the-react-native-log/comparing-the-performance-between-native-ios-swift-and-react-native-7b5490d363e2