Why you should keep faith with React Native

There has recently been a lot of debate around the future of React Native. Last year, when Airbnb called off their React Native development, the frontend community became quite skeptical of choosing React Native for their next big product.

This storm got a little calmer after a while. In the meantime, a few big names, including Microsoft and Shopify, declared their adoption of React Native. But a few months back, Facebook’s announcement that it was revamping the iOS Messenger app made no mention of React Native, which sparked yet another debate over whether Facebook was still interested in developing it.

Had it dumped React Native? Does that make it effectively dead? In pursuit of the answer, let’s understand why one should select React Native, how it has progressed in the recent past, and what its future plans are.

Why React Native?

It was early 2015 when Facebook launched React Native, a framework for building native apps using React. Since then, RN has been used by not just Facebook, but tech giants that include Microsoft, Walmart, Shopify, and Wix. Let’s take a look at the major reasons why one might select RN for their next mobile application or a new feature in an existing mobile app.

Cross-platform: Write once, use anywhere

Today, moving fast isn’t just an edge for tech companies — rather, it’s essential. Enormous competition demands companies to move at a faster pace with greater stability.

Managing three different frontend teams — Android, iOS, and web — for a single product is not easy for most companies. This isn’t costly just from a monetary perspective, it can also hinder the product’s pace. React Native allows teams to share up to 95 percent of their code across Android and iOS. This can be a huge benefit in the era of agile development.

There is also a possibility of sharing a React Native codebase with the web as well. We will discuss this in the next section.

React: Declarative UI

Without a doubt, the concepts of declarative UI and component-based architecture have revolutionized frontend development. It has allowed frontend developers to build large-scale applications that are more predictable with fewer bugs.

The motto of React since its very beginning has been “learn once, write anywhere.” With this motto, React Native becomes an essential element of React’s progress and growth. What if we can leverage all of these amazing concepts while working with mobile applications — isn’t that great?

1. More predictable UI in mobile applications with fewer bugs
2. More developers can contribute to application’s development if they are already familiar with React
3. If architected with consideration, a good amount of code can be reused across React renderers, including web, mobile, Unity, VR.

Reliability: Tested at scale

Since React and React Native have been open-sourced, all of their releases are first tested with Facebook’s production applications. This makes it easier for other companies to upgrade their applications to newer versions.

Though upgrades of any framework or build tool aren’t easy for large-scale applications, if that upgrade has already been tested at Facebook’s scale, other applications can feel confident diving into it without much hesitation.

Adoption: Used by tech giants

Besides being used extensively at Facebook, React Native has been adopted by many tech giants. This list includes Microsoft, that is using RN for its various products, both as greenfield and brownfield. E-commerce giants Walmart and Shopify are relying on RN for their mobile applications. Here is a showcase of apps using RN in production today.

Progress

Let’s focus on some of the features that have shipped recently with React Native. These features have made a real impact on the performance, debugging, and management of RN projects.

Better JavaScript runtime: Hermes

In mid-2019 Facebook announced Hermes, a JavaScript engine optimized for React Native. Hermes is the result of a yearslong effort by the team working on it. Today, not only has it helped to optimize RN apps, but the more exciting benefits of this long effort are yet to come.

There has been a lot of criticism of RN’s performance, especially on lower-end Android devices. Being a JavaScript-based framework, RN relies heavily on the JavaScript engine. In earlier versions, RN used WebKit JSC on Android, which, after analysis, was found to be a major factor in startup performance.

With the use of Hermes, RN apps have a faster startup time because it precompiled the JavaScript into efficient bytecode rather than compiling JavaScript on startup. This also minimizes the APK size and optimizes runtime.

Better debugging experience: Fast Refresh and Flipper

Recently, Dan Abramov worked on Fast Refresh for React Native. While React is known for its great developer experience, debugging has been a pain point for RN developers.

One of the edges that RN has over native application development is its ability to load code changes quickly. Though RN had Hot Module Replacement and Hot Reload, it broke in many cases and pissed off many developers. Now, Fast Refresh has minimized this pain to a large extent.

Flipper is one of my favorite updates coming to RN. It shipped with a version right after Fast Refresh, i.e., v0.62, and this has changed how we debug our RN apps. This version also enables React DevTools v4, meaning we can leverage its awesome features with RN as well.

Better management: Lighter and more manageable

A year ago, the React Native core team started a slimmening project that aims to remove all non-essential UI components (like WebView) and native modules (like push notifications) into a separate repo. Most of these repos are under react-native-community.

Removing these components and modules will allow the core team to move faster, and React Native core will become lighter and more manageable.

Growing and thriving community

One important aspect when analyzing an app’s performance is its responsiveness to gestures, scrolling, and animations. Thanks to the amazing React Native community, a lot of great modules in this arena have come in lately.

The tip of the iceberg in this regard include react-native-reanimated, react-native-screens, react-native-gesture-handler, and RecyclerListView. Also, React Navigation and React Native Navigation are putting in a lot of effort to improve the developer experience and make navigation in apps smoother.

Future

The most important factor in our assessment about React Native’s future is the plan Facebook has for the library moving forward. Luckily, the plan for 2020 looks promising: Facebook is working on a whole new architecture for RN.

The motivation behind this new architecture is to establish what RN should look like in the next few years. The team is building this architecture piece by piece, and some of these pieces are already available in the current release of RN, including Hermes. Moreover, a few more pieces have already been tested at Facebook internally and will be available for the community soon.