Real-World Apps

Where does React Native fall within app categories? Should you invest in it?

App categories#

Broadly speaking, apps are categorised into three types:

  • Native apps: As the name suggests these are apps built on native platforms, using Java or Kotlin for Android, and Objective-C / Swift for iOS

  • Web apps: Typically these are websites that can be bookmarked to home screens. They are made responsive to cater to mobile device resolutions.

  • Hybrid mobile apps: There are multiple types here. One category is web applications that run inside a native container. These are built on web technologies like HTML and CSS, and render on web views. Ionic and Cordova are examples of such platforms. Another category is that of applications which are written in a common language, like JavaScript, Dust, or .net, but are run on native views and are deployable to multiple platforms.

React Native falls under the hybrid category of apps. It renders everything on the UI thread of the app in native while handling the interactions on the JS thread. So, as you must be able to guess now, a React Native app will be responsive and deliver a native-like performance only if the JS thread is well optimized, i.e. kept free as much as possible for rendering. This may sound like a challenge, but if we can follow some rules of thumb, adhere to best practices and avoid unnecessary blocking code, it is very much doable. The benefits are huge, and not just limited to CodePush.

Real-world apps#

A question that crops up frequently in forums is whether it is worth investing in React Native? After all, this is a wrapper above the native and can never be as fast as the native. Well, this is not always true. I like to approach this question differently and the answer, as usual, is not straightforward, and there are pros and cons to be considered. But even before that, we ought to take a step back and think about our objectives.

For me the first question must be what experience we want for our end users - we need to think first about product. If we can put aside for now the preconception that React Native apps have performance issues (and I believe that is mostly because they are poorly written), we should ask if it will then make sense to build our app in React Native, or Flutter or even Xamarin.... it may make sense!

Remember, React Native renders everything in native, so it is not like a web view. The experience that end users of your app get is that of a first-class citizen.

Let's do one small exercise which can help clear up some bias toward not just React Native, but also toward other cross-platform tools. Let's look at the following apps, some of which are in React Native, obviously! Feel free to download these apps, use them for a minute and then try guessing as to whether they are native, web-based or hybrid apps.

  • Discord

  • Walmart Grocery

  • Cars24

  • Shopify

  • Amazon

  • Tableau

  • Facebook

When you are done, scroll down.
.
.
.
.

Discord, Walmart Grocery, Cars24, Shopify, Tableau: These apps are built in React Native, with the exception of Discord which runs only its iOS app on React Native. Walmart Grocery's latest update shows it has moved 90% of its app to React Native. According to Shopify, React Native is the future of Mobile. Both the Cars24 consumer and partner apps are built on React Native, and you can read about React Native at Tableau here.

Amazon: According to common understanding, Amazon apps are hybrid, though continued to use a web view app for a very long time (until early 2020 I believe), with just the navigation being native. Even now, they mostly do the UX in native, with the views being rendered in web view.

Facebook: The main app is native, though it has React Native screens built-in. The Facebook Ads Manager is built on React Native.

The Airbnb articles#

In 2016, Airbnb published an infamous series of articles advocating sunsetting React Native for their app. Over a five-part series they produced a detailed analysis of their experience of the pros and cons of React Native. I would recommend reading those articles yourself, but taking them with a pinch of salt. Firstly, React Native (and React itself) was quite new in 2016 and both have had frequent upgrades since then. Secondly, Airbnb had not built their whole app on React Native; only parts of it. They therefore relied heavily on the "bridge"; not quite the weakest, but the slowest link in the React Native world.

React has come a long way since then and React Native has also had some major upgrades, especially with the Lean Core (1), Hermes (2) support, and the all new one-stop debugger, Flipper (3). There is also a major re-architecture (image below) underway, concerned with how React Native interacts with the native modules, where they will be doing away with the bridge, and introducing JSI (4).

Source: Talk by Lorenzo S. at Focus Reactive - https://t.co/wDaXRvLtlA?amp=1

Towards the end of the Airbnb article series, in part 4 (5), some interesting observations are provided, from an internal survey of its developers:

“60% would describe their experience as amazing.”

“63% of engineers would have chosen React Native again given the chance and 74% would consider React Native for a new project.”

References#

Start a new discussion. All notification go to the author.