Why you should keep faith with React Native

Written by Zain Sajjad✏️

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 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?

More predictable UI in mobile applications with fewer bugs
More developers can contribute to application’s development if they are already familiar with React
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 precompiles 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.

The React Native core team has divided this whole revamp in three phases:

Native modules
New renderer
Better initialization

We will briefly discuss these phases below.

Native modules: Early 2020

Since the beginning, React Native worked in a way that initialized all of our native modules at the start of our app. This might include native modules, which at times may not be necessary for certain users. For example, the react-native-device-info module might be necessary only for a rarely used feature, yet we have to initialize this module at the beginning regardless, thus increasing our startup.

Turbo modules allow us to load our native module at the time they are being used. This will decrease the overhead of initialization on startup, resulting in better startup performance. It also adds better type-safety across JavaScript and native code. This has already been tested within Facebook’s apps in production.

New renderer: Mid-2020

We’ve been hearing this referred to as Fabric, a C++ rewrite of React Native’s UI Layer. It doesn’t require measure and layout effects to be done in a dedicated thread since the new renderer is thread-safe. This will fix many bugs of components that rely heavily on measure API, which include ScrollView and TextInput.

The new renderer also offers improved type-safety. In addition, all of these UI components are lazily initialized, just like native modules, resulting in faster startup time. This is also under testing for Facebook’s apps.

Initialization: Late 2020

Today, React Native is based on a bridge: all of the communication between JavaScript and native code is done via bridge, all of which is async, batched, and serialized. That means all of this communication is done via callbacks or promises, and values are passed in between after serialization. This makes it thread-safe and reliable but adds a lot of overhead.

The new architecture doesn’t rely on the bridge; instead, it will use the new JavaScript Interface (JSI). JSI is an engine-independent API that allows JavaScript to interact with C++. It creates JavaScript runtime, loads JavaScript bundles, and allows us to call C++ methods from JavaScript.

It can also access and manipulate JavaScript memory from C++. By using JSI directly without relying on the bridge, we can remove all overhead associated with the bridge. Moving forward, all native modules and view managers will rely on JSI, making them super fast.

Most of the initialization to prepare runtime for executing JavaScript code will be done in C++, so JavaScript initialization will also be more performant and optimized.

Without a doubt, this new architecture will bring RN much closer to native frameworks in terms of performance and in terms of how it behaves. More importantly, this will make RN apps better for end users. This will also enable RN to benefit from the wonderful features coming in React, like concurrent mode.

Conclusion

I have been working with React Native at Peekaboo Guru for almost four years now. We have developed apps using React Native from scratch and used it to develop our SDK, which powers several consumer finance modules in many banking apps.

To date, it has been an amazing experience using React Native in both greenfield and brownfield apps. Furthermore, looking at all the awesome features that have been coming to React Native recently, IMHO it’s never been a better time to be a React Native developer.

I am happy to discuss your opinion of React Native’s future — feel free to share in the comments below.

Plug: LogRocket, a DVR for web apps

LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Try it for free.