React Native is a cross-platform mobile app framework for building apps from a single codebase. Developers write code once in JavaScript (or, in this article’s case, in TypeScript) to create mobile apps for iOS and Android. When a business is looking at creating a mobile app, the native versus cross-platform application debate can become heated. There are pros and cons for each approach. I’m going to highlight some of the advantages of React Native from my experience. I have been building apps in React Native since 2017 and have seen the progress in growth of the platform.
Single Code Base with TypeScript
From the beginning, being able to write one codebase and see it rendered with native code helps teams focus more on delivering value to the app without spending as much time switching between native code bases. One team can work together to build the app with JavaScript knowledge, including skilled front end developers. However, JavaScript is a loosely typed language and can cause some misunderstandings of variable and object types. This can be mitigated by using TypeScript, which is JavaScript with syntax for types, developed by Microsoft, that adds support to your code editor to catch type errors early. TypeScript can be strongly typed to assure variables, data structures, and their values are declared to be of a specific type:A number must be a number, a string must be a string, an array is an array, etc. Some advantages are catching errors and bugs earlier, more readable code, and scaling.
Getting Data with GraphQL
React Native apps are commonly written using REST API calls to retrieve data for the UI components. In practice, this is a great approach when you need a large amount of data quickly. One drawback is sometimes you get too much data back from the end point and spend a lot of energy drilling down to the exact data you need. One helpful approach is using GraphQL, a query language, to ask for the exact data you are looking for. GraphQL gives you more control over the data to batch queries into one request, whereas you may need to make multiple requests with REST to get all the data you need. It also supports subscriptions, allowing the app to update in realtime when the server updates and not requiring a call to fetch the new data. With GraphQL, the data types and operations are set on the server side, allowing for expansion of available data without affecting the client side. This allows for the developers to build onto the existing app components and add new data, allowing for easy scaling and future needs.
Improved Performance with Hermes
React Native has adopted Hermes as the preferred JavaScript engine. React Native used to be compiled with JavaScriptCore which is a runtime JIT (just in time) compilation, which could cause performance issues with the native devices. Hermes uses the AOT, ahead of time, strategy for improved performance. The main issue with the JavaScriptCore engine was it did not assure the target device would run the application directly on the operating system. This could lead to device incompatibility and bugs in the app at the native level. Hermes does most of the build pipeline at the build time rather than the run time, allowing the run time to focus on loading the Bytecode and executing the Bytecode. This assures that the native components have already been coupled with the React Native code to help minimize bugs and device differences, especially in the Android space. Hermes is designed to reduce memory usage. The app is more optimized with a smaller native code base than the JIT approach, allowing devices with limited RAM to run the app faster. Also built in is memory compaction to minimize fragmentation and relocate objects in memory to increase efficiency. Hermes puts React Native’s performance in line with Swift- and Kotlin-based native apps, allowing for more complex app builds.
Final Thoughts
React Native was created by Meta to run apps like Facebook Marketplace. Meta also developed Hermes to address some of the early performance criticisms. Utilizing a single code base allows one team to build apps and features much more quickly than having two separate native teams. Leveraging the framework itself, adding in strict language rules from TypeScript, and utilizing just-what-you-need data queries, we can build complex apps with the performance to compete with fully native apps. These are just a few concepts to help make React Native a great choice for app development.
Written by Jason Wagner, Senior Software Engineer