React Native vs Swift – A Side-by-Side Comparison for iOS Application Development

During my last visit to developers’ summit in Texas as a speaker, I was asked to choose between React Native and Swift for mobile app development. The aim was to scale the app to 5 million users in coming 10 months, that is scaling was the focal point.

This is not the first instance when I was presented with such a debatable question. Many online forums, blogs and guides are filed with such it. But I chose to end this here itself and conduct some tests in real scenario to arrive at some conclusion.

Before getting into the results, let me brief you what exactly are these languages.

React Native is a cross platform mobile framework that lets you build apps using Javascript. It is different from Hybrid language, that usually incorporates a mix of native and mobile app concepts. However, it provides the benefit of both Native and Hybrid Mobile apps.

With this article, we are hoping to clear some of these doubts by comparing React Native vs Swift on the basis of several key factors such as performance, application size, user experience, testing and debugging, integration with CI/ CD tools and many more.

Ionic is also comparable framework to React Native which I have covered in my other blog “React Native vs Ionic”.

App scenario #1: Benchmarking Performance (CPU consumption and Memory allocation) for React Native vs Swift with a simple to-do list app which consists of:

• the main screen through which user navigates and
• a To-do list screen where tasks can be added, modified and deleted.

Below is the screen-shot of the app which we build with both Swift and React Native respectively:

We used Xcode software instruments to analyze the CPU load and memory allocation in this benchmarking study.

For evaluating the performance tests, we conducted and performed following actions in the applications:

• Scrolling down the list multiple times
• Editing and deleting multiple tasks at a time
• Adding a new task 10 times
• Editing and deleting the tasks 20 times
• Adding same task 10 times
• Scrolling up the list multiple times
• Navigating from the main screen to the to-do list screen and again back to the main screen multiple times

Following are the results of CPU consumption and memory usage by performing above mentioned actions in our app:

Scrolling Down the List Multiple Times

Memory allocation: While scrolling down the list infinitely multiple times, we observed that Swift application consumes about 0.65% more memory than React Native application.

CPU usage: App developed in React Native shows an average of 85% CPU consumption and about 129% of peak CPU usage. On the other hand, App developed in Swift shows an average of 27% of CPU allocation and about 47% peak CPU allocation.

Clearly, in React Native vs Swift performance comparison, swift emerges as winner.

Editing and Deleting Multiple Tasks at a Time

Memory Allocation – As seen in the graph above, there is no big difference in React Native and Swift application when we added and deleted multiple tasks in the list.

CPU consumption – The graph above shows that React Native application consumes about 66% of average CPU usage while Swift application consumes about 10% of average CPU usage.

Adding new task multiple times

Memory allocation – React Native consumes more memory when we added new task multiple times in the To-do list of our app. While in case of swift,

CPU Consumption – Swift application shows an average of 14% CPU utilization while adding multiple tasks to the list. On the other hand, React Native application uses 111% CPU allocation doing the same on an average.

#Scrolling up multiple times

Memory Allocation – The above graph illustrates the memory allocation of React Native and Swift apps while scrolling up the list in the app multiple times. As you can see (See Memory allocation graph), the graph for Swift application stays flat throughout the whole scrolling process. On the other hand, the graph for React Native shows the high reach at the start, low in the middle and again high reach in the end.

CPU Usage – While scrolling up multiple times, the Swift application shows an average of 35% CPU while the React Native application utilize about 110% of CPU as an average.

Navigation from the main screen to the to-do list screen and again back to the main screen multiple times

Memory allocation – The Memory allocation graph above illustrates that both Swift application and React Native application almost shows similar memory allocation at a constant rate. We observed an almost negligible difference between both Swift and React Native application in this case.

CPU Usage – While navigating forth and back from the main screen to the todo list screen, we observed that Swift application utilize about 24% of CPU as an average while the React Native application shows an average utilization of 62% CPU in this case.

Benchmarking application size and Time of development for React Native and Swift

The application size comparison of the ToDo list application which is built for both React Native and Swift respectively as follows:

As seen in the image above, the application size of the application developed in React Native is 20.2 MB whereas the application size for Swift is 16.2 MB. This result implies that for application size in Swift will outperform React Native.

Developing the React Native app takes a time period of approximately 1.5 months as we already had expert JavaScript developers at our disposal.

On the other hand, development of Swift application took about 2 months for the completion.

Testing in React Native

React Native provides some useful methods of testing to mobile app developers. React native apps can be tested from component test level to the functional test level by performing some interactive testing methods such as:

• Component testing using ReactTestUtils – ReactTestUtils is a framework for testing React components either in a visual of functional way.
• Unit testing using Jest and Jasmine – Developers can rely on Jest and Jasmine for unit testing React native apps. Jest is by default shipped by Facebook for React Native versions (starting from v0.38.0)
• Integration testing using Mocha – React Native provides two components namely RCTestRunner and RCTestModule in order to run customized integrated tests. However, both of these possess limited functionalities. Hence, there is a good alternative framework called as Mocha which provides wholesome testing experience (including unit and integration tests). Mocha is also proven to be as an essential framework providing behavior-driven-development (BDD) and test-driven development (TDD) approach to developers.

Test automation with React Native

React Native supports most of the test automation frameworks with ease.

An iOS app developed with React Native can be tested with XCTest – a testing framework by apple which comes tightly coupled with Xcode. XCTest provides developers to test UI while writing tests for components at any level.

KIF (“Keep it functional”) is another iOS test automation framework which uses XCTest test targets. Tests written using KIF can be executed directly in XCTest case or any subclass.

Apart from XCode, other automation frameworks combination such as Appium + Robot framework allows developers to automate test cases for UI testing. Calabash based on cucumber is also most widely used behavior-driven development framework which can be used for automation.

Automated Testing for Swift

In iOS, Xcode ships XCTest framework which is most widely used for UI tests. XCTest provides a smart solution for writing UI tests for the iOS app by screen capturing developer’s interaction with the app. It records developers’ actions such as taps, swipes etc and convert these actions into code inside the test cases. However, developers have to make some assertions at the end as sometimes the code which is automatically converted might be an invalid code.

When a UI tests fail, developers can actually skim through the whole process and see what went wrong.

Apart from XC, following automated testing frameworks can be used with Swift:

• Appium
• Calabash
• Earlgrey by Google
• Jest and Jasmine

Third Party Libraries and APIs availability for React Native vs Swift

Third-party libraries and APIs for React Native

React Native has a good support from third-party libraries which keeps on multiplying every year due to mind-boggling support from its community. In fact, npm is the richest source for third party library manager in the case of React Native.

For iOS – these third parties can be installed by linking them to Xcode either in a manual way or either automatically using rnpm links.

Although React Native do support a vast number of 3rd party APIs, there are still some requirements which are needed to be met in terms of supporting APIs through native modules. React Native Developers are reportedly working on fixing the same at the time of writing this article.

Third-party libs and APIs for Swift

With react native, we have seen a big challenge to keep 3rd party libraries and APIs updated, as there’s nothing to keep track and notify developers on what packages/libraries/APIs requires updation.

With Swift, this isn’t a challenge anymore. Apple’s Cocoapods allows developers to easily manage and maintain updated 3rd party libraries and APIs. If any package requires an update, the developer gets notified. Thereby, increasing the maintainability of your Swift project.

Enterprise Compatibility for React Native and Swift

React Native for Enterprises

Building production/ enterprise-ready app with React Native is a challenging aspect for developers to follow as there are many performance issues and limitations that may introduce a risk factor in a React Native project.

However, once these aspects are known, developers can hopefully taste success through their efforts.

Swift for Enterprises

Swift syntax is clear and concise which makes it a better fit for enterprise-built projects. Moreover, Swift require less code with high optimal performance – this makes it an optimal choice for cloud-based development and deployment.

In addition to performance, Swift provides many interesting features to iOS developers such as error handling system, memory management, optional types and protocol-oriented architecture.

Swift facilitates opportunities to create enterprise apps to drive employee productivity and to accelerate the enterprise performance.

Startup time for enterprise applications in Swift

In general, enterprise apps have slow startup time due to their big application size. However, an app development in Swift uses dynamic libraries that can be directly uploaded from the memory which is optimal for its performance.

More commonly, the sole fact that Swift hails from a renowned key player such as Apple has made it adopted by businesses at a rapid pace which contributes to its enterprise growth.

OTA updates in React Native

Apple is reportedly cracking down on developers who use SDKs to roll out the features without App store approval. That said, OTA updates in the case of iOS will still be cumbersome in React Native if your app is using some frameworks such as Rollout.io, JSPatch to roll out changes.

However, it is not yet applicable to libraries such as CodePush since it is only updating the Javascript code. Though, Apple has clearly made it clear that whatever changes made over-the-air should not alter the primary purpose of the application.

Apart from code push, Over-the-air updates in React Native can be managed by using Electrode – which is an independent platform developed by WalmartLabs.

With Electrode OTA server developers can host, manage and monitor their JavaScript bundles on their own server so that they can seamlessly deploy them to client end when needed. The Electrode is also compatible with Microsoft CodePush client.

OTA updates for Swift

Swift does not support any OTA updates as of now.

CI-CD for React Native

CI-CD for React Native can be done using:

• Fastlane
• Bitrise
• CircleCI
• NeverCode

CI-CD for Swift

Subsequently, CI-CD for Swift can be done using:

• Bitrise
• Buddybuild
• CircleCI or
• Travis CI

Application user experience in React Native

Ever since the initial launch of React Native, its core contributors and developer team have introduced numerous React Native navigation solution to navigate through the app for iOS such as navigatorIOS, NavigatorExperimental, React native router flux, etc.

Although, many developers had significantly raised issues in the past in these solutions as they experienced many performance glitches in the UI of their app.

The following GIF will give you an idea of how navigation in React Native differs from Swift:

Application User experience in Swift

An application developed in Swift seamlessly integrate with the platform/ framework on which it has been developed. Henceforth, it contributes to a slightly better user experience than a React Native app.

Compliances for React Native

Following are some of the industry Compliances for React Native:

• Healthcare – Health Insurance Portability and Accountability Act (HIPAA)
• Finance – Finance – Data Protection Act (DPA)

Compliances for Swift

Following mentioned are the compliances of Swift:

• IT and Banking – SOX in Information technology and Banking organizations.
• Healthcare – Health Insurance Portability and Accountability Act (HIPAA)
• Finance – Finance – Data Protection Act (DPA), GLBA(Gramm Leach Bliley Act) for consumer data protection in Financial Corporations.

App Maintainability in React Native

In terms of Maintainability, React Native has an issue with the compatibility of 3rd party libraries and frequent release cycles. That said, frequent React Native release cycles are always a problem as the code becomes old and maintained to an extent where the libraries can’t match the update.

Moreover, at the time of writing this article, React Native still has many unresolved issues which are needed to be fixed as soon as possible.

App Maintainability in Swift

Swift is a statically-typed language which is easier to read and maintain. Developers can rely on XCode which is helpful to track errors while building their mobile app.

Being a compact language, swift requires lesser code to perform the same tasks than its language counterpart Objective C. For instance: recently Lyft – a transportation company has re-engineered their mobile app using Swift.

In their case, Swift allows Lyft to reduce their code base by over 70% thereby keeping the same performance and functionality in their app.

Security in React Native

Developers can store their data in React Native using AsyncStorage API. However, the API is not secure by default.

Hence, Developers mostly rely on third-party libraries in React Native for securing their data on mobile devices. Following are the most widely used libraries for secure storage in React Native:

• React-native-keychain – It is useful in securing sensitive data such as passwords
• React-native-secure-storage – It has limited documentation but it is most widely used by developers worldwide for secure storage
• React-native-sensitive-info – It is more mature and flexible than react-native-keychain library

Security in Swift

Apple provides following encryption technologies in the form of APIs to secure and encrypt your sensitive data in your Swift application:

• Keychain Services API – This API provides you to securely store your passwords, keys, etc.
• Cryptographic Message Syntax – This is a good API to use when you want to encrypt your data for store-and-forward applications data such as an email.
• iOS Common Crypto Library – It allows developers to store and protect their data in Swift applications by adopting AES standard of encryption. RNCryptor is a source library available on Github that supports AES encryption. On the other hand, developers are also free to write their own encryption code if their app deals with more sensitive data or information.

Well, there is no straightforward answer for this question. It all depends on your project requirement and complexity.

If you are a new to iOS Application Development, then look no further from Swift. I know it has a steep learning curve but considering your main focus is to learn developing an iOS app, it is a worthwhile choice to be considered.

Furthermore, if you are required to deliver a simpler iOS app which has a limited deadline (Say 1-2 months) then React Native will be the worthy option to choose for. For complex application requirements, Swift will be the best option to be considered.