Lately, people have been asking us if migrating to React Native is a viable strategy for existing apps. Is it really all that worth it? How late in the development cycle is too late for the migration? How different is the process for iOS and Android? How much of the app functionality should I actually migrate?
Let’s find out if we can answer all of these in one fell swoop. One way to do this is by exploring the real-life cases of companies migrating to React Native at different stages of product development. We’ll also examine the pros and cons of React Native through the prism of software migration. Without further ado…
Why migrate to React Native? Is it really all that worth it?
If you were to describe true native mobile development with one word, which word would that be? For Tal Kol, the ex-mobile lead from Wix, the word is “absurd”.
In his presentation at ReactNext 2016, Tal Kol pointed out the absurdity of the waste involved into the development of true native applications. Two separate, often siloed teams writing identical components for two different platforms. If this doesn’t sound wasteful, I don’t know what does.
One of the grand promises behind React Native is the elimination of this sort of waste. Let’s see how React Native delivers on this promise. Consider the points below as the pros of migrating to React Native.
The pros of migrating to React Native
Fast native-looking apps with faster time to market and simpler maintenance, built by fewer developers. If that’s what you expect from React Native, you’re in for some good news. On top of that, React Native also supports gradual migration from true native iOS and Android. Here’s a little more detail on how all of this is possible:
- Interoperability with native code for gradual migration. In essence, any React Native view acts as a native view, and you can combine native iOS and Android views with React Native views. This allows for gradual transition where you choose which parts of the application you’ll want to migrate to React Native first.
- (Mostly) the same team working on iOS and Android. React Native development requires dedicated Swift/Objective-C, and Java/Kotlin engineers, but we’re talking about individuals, not whole teams. At Wix, for instance, only 10% of the mobile UI teams are native iOS or Android developers.
- Up to 95% of shared code between iOS and Android. React Native isn’t a write-once-run-everywhere platform, yet it still allows for massive code reuse. A simple React Native app is mostly one code base, mostly built by the one team for two mobile platforms. If you think this can decrease your time to market, you’re 100% right.
- Code reuse between React Native and React. With React architectures powering both mobile and the web UI, there’s additional potential for code reuse. These reusable parts include API client logic, state management, and utility methods implemented in JavaScript between React and React Native apps. This if far from 95% of shared code on iOS/Android, but it’s still great for de-siloing mobile and web UI development.
- Native-like look and feel. React Native wires into native UI components via a JavaScript bridge. There’s no web views trickery, which is why the look and feel of React Native applications is head and shoulders above hybrid HTML5/JS apps. React Native also has well-known solutions for 60 fps animations and dynamic interactions that can challenge those of a true native application.
- Good developer productivity. From its declarative architecture to small things like stateful hot reloading, React Native exists to improve developer productivity. In fact, even the engineers coming from Swift (known for its excellent ecosystem) praise React Native for its development speed.
- Straightforward App Store updates. With tools like CodePush, your team can add incremental updates to a published app without undergoing the App Store review process over and over again.
- No licensing headaches. Initially, Facebook licensed React Native under BSD + patents but later changed this to MIT. This might mean little if you’re not a lawyer, but this was a giant leap towards turning React Native into a truly open platform. Besides, this move made migration to React Native a more attractive strategy for startups.
The pitfalls of migrating to React Native
It’s no secret that every software development technology has its snafus. The following points might make you want to reconsider React Native migration:
- Not so great for non-standard applications. Ever noticed that 90% of the apps on your phone consist of the same UI components? App bars, avatars, buttons, search boxes, cards, you name it. If your app ditches these and relies on unconventional UI elements instead, implementing it in native code might be a better idea.
- Third code base can become the third wheel. This is mostly related to the previous point. If you need a lot of native code, introducing React Native will effectively add a third code base that requires maintenance. This might increase your development efforts instead of decreasing them.
- Third-party library updates can be painful. In the past, the frequent updates of the core React Native library tended to bring breaking changes to apps. Today, this is a lot less of a risk, neverthelessbut the problem persists in the case with some third party libraries. Given how huge the ecosystem of third-party solutions is in React Native, this might become a nuisance.
Knowing about these pitfalls, React Native might prove suboptimal for apps that depend on native code a bit too much. If you’re migrating to React Native, the ideal scenario is migrating most of your code. In fact, let’s look at which transition scenarios worked well (and which didn’t) for real-life tech companies.
Real-life cases of React Native migration
The React Native Showcase contains quite a few examples of companies that migrated their native applications to cross platform. Some of them rebuilt their apps completely, while other added React Native on top of the existing native code. Here’s how these strategies worked out for them.
Wix: rebuilding in React Native from scratch
Key takeaways:
- Wix built an iOS app first and then ported it to Android.
- The company used its React engineers (web UI) to drive part of the React Native development.
- For 95% of features, the development team moved at 4x the seed of native development on iOS and Android.
- About 5% of features posed a significant challenge due to a lack of standard solutions in React Native.
Wix was among the first global brands to migrate to React Native. In fact, Wix’s React Native app was already on the Apple App Store by the end of Q2 2016. When working on the app, Wix fully ditched its true native stack and built the cross-platform mobile app from scratch.
Wix’s case of migration is peculiar in a number of ways. First, the company didn’t develop for two platforms at once. Instead, it first built a React Native app for iOS and later optimized it for Android. What’s interesting, a huge part of the workforce behind this app were front-end engineers specialising in React. As mentioned, only 10% of mobile engineers at Wix come from Swift, Objective-C, Java, or Kotlin. The remaining 90% are React engineers that contribute to both web UI and mobile development.
Despite the existing stereotype that only simple apps could be cross-platform, Wix used React Native to allow rich interactions on mobile. The app unified the content editing features of multiple web platforms like Wix Stores, Wix Blogs, or Wix Restaurants. There were more complex interactions involved, and, according to Wix’s Tal Kol, about 5% of them posed a significant challenge. For these, the team had to come up with fully custom React Native solutions and components.
Airbnb: adding React Native on top of the true native stack
Key takeaways:
- In 2016, Airbnb started adding React Native on top of its native stack. This strategy proved unsuccessful: in 2018, Airbnb is sunsetting React Native.
- The company’s developers name the need to maintain three platforms (iOS, Android, and React Native) as the major pitfall of React Native development.
- Other reasons to move away from React Native include inconsistencies between iOS and Android.
The case of Airbnb is somewhat unique because the company didn’t rebuild its apps from the ground up. Instead, Airbnb added React Native to the existing iOS and Android code bases. According the company’s Gabriel Peal, this lead to the burdening maintenance of three code bases instead of two. As a result, Airbnb’s mobile team has made a decision to move away from React Native.
There were other deal-breakers as well. The promise of streamlined cross-platform development failed due the inconsistencies between Android and iOS. In 2016, the Android version JavaScriptCore was so outdated that Airbnb had to implement a custom solution instead. Some of the third party libraries, too, only worked well for either iOS or Android.
With that said, Airbnb’s developers admit that React Native helped them move fast while building new features. The development of Airbnb Experiences was mostly in React Native, and so were numerous features like reviews and gift cards.
Walmart: migrating from hybrid HTML5 to React Native
Key takeaways:
- Walmart’s migration to React Native was from a hybrid app.
- Walmart chose React Native over true native, naming developer productivity is one of the primary reasons for this decision.
- Simpler App Store review process was another major cause for choosing React Native over true native.
- The developers from Walmart Labs found the debugging functionality of React Native suboptimal. However, they were happy with the graphical performance, as well as RAM and CPU resources usage of React Native.
Walmart’s decision to migrate to React Native grew from a dissatisfaction with the company’s hybrid web-views-based mobile app. According to Walmart Labs, web views delivered a poor user experience, even on high-end smartphones. As a result, the company had to choose between moving to true native or finding a better cross-platform framework. React Native proved to be the optimal solution that Walmart chose to improved the UX for e-shoppers.
The team of Walmart Labs generally praised React Native for its performance and simpler App Store updates, yet they faced a few pitfalls, too. Namely, the use of two different JavaScript engines for live and debug mode impeded debugging. At the early stages, React Native also had quite a few features exclusive to either iOS or Android, which limited its cross platform potential.
Discord: migrating the web UI logic to mobile
Key takeaways:
- Discord migrated 98% its web UI logic (Redux store and actions) to React Native (iOS only).
- Version 1.0 for iOS built in two weeks, mostly by a single developer
- Porting iOS to an Android PoC only took two days (but the company doesn’t yet use React Native for Android)
This case isn’t what you traditionally mean by migration, yet it’s too peculiar to ignore. Discord’s iOS app is a product of the migration of huge chunks of Redux store logic and actions from React to React Native. Using this approach, the company’s one-person iOS team managed to finish the iOS app in about two weeks. Talk about Agile!
Porting the same logic to proof-of-concept of an Android app only took 2 days. With that said, the concerns caused by the fragmentation of the Android ecosystem prevented Discord from moving beyond the PoC phase.
According to Discord’s Fanghao Chen, the over-the-air updates of the JavaScriptCore was a major factor that influenced the choice of React Native. The developer also praised the Flexbox style grid.
Bottom line: to migrate or not to migrate?
Based on these cases, is migration to React Native a viable strategy? For a moment, let’s get back to the questions asked in the very beginning of this article:
- Is the game really worth the candle? — It has been for Wix, Walmart, and Discord. Each of these brands leveraged React Native to improve developer productivity and Reduce time to market.
- How late is too late for the migration? — Walmart had a fully-functional app published when they turned to React Native. In that case, a complete redo proved to be economically feasible.
- How much of the app functionality should I migrate to React Native? — For Airbnb, migrating only a part of the functionality lead to the need to maintain three code bases. If you’re not planning to migrate most of your features, you’ll probably face the same issue.
- Is it different on iOS and Android? — Both Airbnb and Discord admit that Android is still a more challenging environment. React Native or Java (or Kotlin), Android’s fragmentation is still there. The UX differences on two platforms will also pose additional difficulties if you’re planning to adhere to the platform-specific UX conventions.
With these points in mind, migration might prove challenging in quite a few scenarios. Yet there’s no challenge that a team talented developer can’t overcome. If you’re looking for the top-3% of React Native developers from Ukraine and Argentina, here are a few reasons to consider AgileEngine:
- We started working with React Native in early 2016.
- You can find our apps on the React Native Showcase.
- Clutch ranked us #1 in San francisco and #2 in DC. Our Ukrainian development center is also among the top-10 software development companies on the Clutch Leader matrix or Ukraine.
If this is sounding interesting, contact us and tell us what sort of app of functionality you’re planning to migrate to React Native. Also, don’t forget to ask about our risk-free trial.
