Technology

When should you use React Native?

Austin Helmholz
June 19th 2020

What is React Native

React Native is a javascript mobile app development framework that was developed by Facebook Inc. back in 2015 with the goal of writing your application once and having it run natively on both Android and iOS. It has been 5 years since its inception and many have adopted the framework to reduce code and overall cost of a mobile application development.

Reasons to use React Native for your project

Why are so many big names like Walmart, Wix.com, Facebook, Bloomberg, Skype, Uber, Discord, SoundCloud, Salesforce, Adidas, and Pinterest using React Native? React Native saves developers a significant amount of time, is easy for web developers who already know React or javascript to learn, is backed by Facebook, and has a large community of open source developers.

Time Savings

  • Code Base Reduction: React Natives write once deploy twice has most apps sharing somewhere between 30%-95% of the code base between Android and iOS. Some, like Walmart, were able to share as much as 95%.
  • Maintenance: There is a large amount of research that suggests the code maintenance is actually the largest cost to an software project. So by reducing your codebase you can also reduce the cost of maintaining and adding now features.
  • Fast Refresh: As RN 0.61, Fast Refresh was introduced to combine hot and live reloading. Which is able to quickly and gracefully recover from typos such as forgetting to import a component while using it. Even back in 2016 React Natives goal was to get hot reloading to under 1 second.
  • Web and Mobile Code Sharing: Wasn’t just enough that you could share code between Android and iOS but also some code can be shared between web(React) and mobile (React Native). Obviously the UI elements themselves cannot be shared but much of the business logic can be shared. Like in the instance that making rest calls or state management.

Developers

  • Javascript Popularity: TOIBE, a company who specializes in assessing and tracking the quality of software, puts javascript as the 7th most popular programming language and with javascript at React Native’s core, it makes it all the easier to find and train developers.
  • Based on React: React Native is based on the popular and loved Web framework React making it easier for web developers to learn because of the plethora of shared paradigms.

Some Competition

  • Flutter: Flutter, similar to React Native is a write once deployed twice for iOS and android. However, when you write in React Native, your components by default are made to look like their native UI standards, Material UI for example. Whereas Flutter will look the same, which you can also do in React Native.
  • Ionic: Ionic takes your web technologies, html, css, and javascript and converts them into a mobile application. Which can also have some gnarly code sharing between web and mobile but brings in alot of the limitations of the web and does not take advantage of performance or feature advantages of a native application.

Reason to NOT use React Native for your project

A friend of mine once sat in an engineering lecture hall where a fellow classmate of his raised their hand and when called upon asked “Why do we have trade offs?”. Haha yes unfortunately we live in a world where we can’t have our cake and eat it too. Now let’s talk about some of the shortcomings and future/current solutions such as, slower performance than native, at the mercy of the frameworks updates, debugging, reanimated 2.0, React Native re-architecture, and flipper.

Performance

  • Current State: Currently React Native is very close to native except in certain process heavy scenarios, animation/tab heavy pages, and rendering really long lists
  • Near Future: React Native is set to release their re-architecture of RN in Q4 of 2020 that and reanimated just released the alpha for reanimated 2.0. Both of which are supposed to give huge performance increases. One way both updates increase performance is by moving processes away from their own thread and onto the native one and making them aware of each other and their state.
  • More Info: If you want to look more into the re-architectures you can find more info here. React Native reanimated 2.0

Mercy

Because React Native is second on the food chain and reacts to what the Android and iOS platform demand, React Native will always lag behind on the latest and greatest features of both platforms. For example, a while back, Google announced that all apps needed to ship with 64bit version else they will be removed from the Play Store. So the React Native community had to wait until they updated the platform to build 64bit apks.

Debugging

Debugging tools have historically been horrendous for React Native with ambiguous error messages, lack of redux support, introducing new bugs when using the tool, and lack of expandability. For example, when debugging on android, because Android does not ship with a javascript engine, it uses Chrome's V8 engine which has more javascript features supported than the javascript engine that ends up shipping with React Native. These are some of their pitfalls but a new hope has risen called Flipper. Flipper is a React Native Debugging tool that lets you view the hierarchy and change style values (just like web developer tools), view the redux store state, network requests, performance profiling, community developed packages, and more.

Conclusion

One major reason many companies don’t go with React Native is performance. But with a promising near future ahead this may very well be a thing of the past. The community has spoken up about what needs to change with React Native and they have listened. They are making changes accordingly and where they lack, the community has picked up like the partnership with Software Mansion and Shopify for reanimated 2.0. With these promising updates in mind there are becoming less and less reasons to not go with React Native.

Want invites to cool events and things?

Boom, Newsletter sign up form.