Being a consulting and development company, we deal with the question of which technology to choose for our client’s applications. The choice is not always obvious as it needs to be aligned not only with business requirements but also with budget limitations.
Cross-platform frameworks such as NativeScript, React Native, or Flutter are one of the most vividly discussed among developers and CTOs we speak with. They give project teams the opportunity to save some bucks, decrease time-to-market and keep code consistency as parts of the codebase can be shared between iOS and Android applications.
However, we see that many teams deal with the consequences of a misguided choice of cross-platform mobile frameworks. As much as there are ups and downs of each technology, a deeper understanding of similarities and differences make the choice more than a shoot in the dark.
Comparing NativeScript and React Native
Where did they come from, how do they differ, what do they have in common and when does it make more sense to use one over the other? These are the questions we’ll try to answer. In this article, we’ll compare React Native and NativeScript in the following fields:
- Framework origin
- Developers’ learning curve
- Developer experience
- Integration with native code
- Compilation time and development speed
- App performance
- Testing options
- Shared codebase
- Other areas
- Nativescript vs React Native: Which one is the winner?
Before we start, let’s warm up with a short recap of both frameworks’ origins.
React Native originates from Facebook’s web framework React. Since its first release in 2015, its popularity and community have been constantly growing, reaching 84.7k stars and 18.9k forks on Github as for the 5th of February 2020. Naturally, most companies owned by Facebook use React Native as their mobile framework of choice. Its fame, however, goes further and reaches Tesla, Uber, or Walmart.
NativeScript is a framework made by a development company called Telerik (Progress Software). Though it’s not as hype as React Native, some world-known companies are (such as Raiffeisen Bank) in favor of Nativescript. The world’s biggest ERP company, SAP, decided on using this framework to build its Mobile Development Kit.
- NativeScript + Angular,
- NativeScript + Typescript,
- NativeScript + vanilla JS,
- NativeScript + VueJS.
If, however, you or your team were not that familiar with cross-platform before, the learning curve might be quite steep. It makes sense to engage experienced consultants in order to help transfer the knowledge and best practices to your team.
React Native does not come with a dedicated IDE for development. Instead, you have total freedom to use whichever code editor you prefer. However, this comes with a price. There’s no official tool support so you’ll have to set up everything and choose debugging tools on your own.
The NativeScript team came up with a convenient way of setting up the environment with a single line of code. They also seem to have prepared a comfortable set of tools to ease the pain of debugging. If you use Visual Studio Code, there’s a special free debugging plugin made for NativeScript developers, complete with variable inspection, break points and other common tasks.
A great thing about React Native is that it comes with a set of basic API modules that give the development team access to native functionalities. The rest comes as 3rd-party modules provided by the community. In some advanced cases, chances are you’ll need to write the bridge yourself to ensure cross-component communication. Relying on 3rd-party modules always brings up a question of “what if the module we’ve used stops being supported?”.
Both React Native and NativeScript support hot reloading, though in NativeScript you’ll find it under LiveSync feature.
When it comes to application performance on iOS, mobile apps made with both frameworks run at 60 fps at runtime, which makes them one of the fastest in-class and similar to native applications written in C# or Swift. On top of that, NativeScript uses a multithreading model in order to offload long running processes and hence optimize frontend speed.
The story used to be a bit different on Android. Back in 2016, React Native used to load even up to 1.5x faster than NativeScript. However, the release of NativeScript 6.0 in 2019 with complete integration with Webpack made both frameworks’ performance on Android comparable.
Just like in the case of IDE, React Native leaves a developer full freedom of choosing the most convenient test automation framework. You can use any testing tool that works for you: Robotium, Appium, Calabash, uiautomator, Espresso, Jasmine, UI Automation, TestNG, Frank, KIF, and many others.
NativeScript comes with the opportunity to use their own QA workflow, released as open source in 2017. When it comes to tests as such, you can run unit tests straight from NativeScript CLI with Jasmine, Mocha or Quint. Functional testing, on the other hand, is available through a variety of external providers, one of which is Appium.
The opportunity to share code between mobile platforms or even web and mobile applications is one of the reasons why businesses decide on using cross-platform frameworks.
The percentage of code reused by web and mobile heavily depends on the app’s functionality. Platform-specific functionality for UI and logic will make it difficult to realize the full potential of code sharing. Still, it’s worth a try.
Code sharing in React Native
Code sharing between web and mobile can be relatively high under some circumstances (even up to 90% like in this case).
Reusability between web and mobile in React Native comes from the fact that every component is a piece of UI. As such, the same component can be reused at different application screens. If your app uses the same components multiple times, React Native development can save you time not only during software development but also on bug fixing.
Code sharing in NativeScript
The NativeScript team claims one can reach even 100% code shared between iOS and Android. Sounds like heaven but the reality is not so sweet. The idea behind NativeScript is to provide common API for all common functionalities in Android and iOS. In practice, NativeScript uses TS/JS wrappers to wrap components such as Button that create UIButton and android.widget.Button for iOS and Android respectively.
When it comes to sharing web-mobile codebase, NativeScript seemed a bit behind. Now, with the latest release of NativeScript 6.0, it’s possible to reach up to 70% of code reuse between web and mobile applications, including support for PWAs. However, an important thing to note is that the code sharing option is available only for NativeScript applications written in Angular.
When it comes to size, React Native wins the game. Due to the fact that it does not come with any framework-specific burden, React Native APK is small and light.
NativeScript installers are significantly larger, even for applications with the same functionalities. However, when installed, both solutions are similar in size. The Vue implementation is the only one that can compare with React Native in terms of file size and performance.
When choosing a cross-platform framework, it’s important to keep in mind technology’s popularity and maturity.
Source: Google Trends
The first speaks of the power of open-source community and the potential to maintain ever-growing libraries. The latter shows whether the framework is here to stay for longer or just represents a new hype.
Looking at the Google Trends graph from the last five years, one can see that the steep rise of React Native’s popularity flattened in 2018 but hasn’t dropped since then. The framework is one of the most popular cross-platform technologies out there.
Source: State of JS
Nativescript, on the other hand, looks stable and flat with no chance of getting close to React Native. The percentage of developers who used it and is familiar with it is less than 4%. The number holds a risk that Nativescript can be gone if, for some reason, Progress decides to drop it.
Here's a short summary of the comparison.
|code reuse||up to 90%||up to 90%|
|user interface||uses native UI controllers||uses native UI controllers|
|GitHub users' engagement||84.7k stars / 18.9k forks||18.2k stars / 1.4k forks|
|major use cases||
There are some other areas to consider as well when choosing the right technology for your mobile application.
React Native seems a reasonable choice when:
- You want to use native interfaces to reach native performance
- There are hardware functionalities you want to access via the specific platform (instead of third-party plugins)
- You want to build a Minimum Viable Product for web and mobile very fast (like in 12 weeks)
It’s worth considering NativeScript when:
- Your application is simple and composed of functionalities common for iOS and Android
- You want to use Angular for web components
- You need custom native UI and you don’t know Objective C or Java
- You’re about to transition and Angular or Vue web application to mobile
Choosing the right technology for your mobile application is a non-trivial matter. It can depend on the current capabilities of your team, the number of purely native features in your scope and even on the fact if you already have a web app in place.
Cross-platform frameworks are a relevant option, especially if you’re looking to build and release your product fast and for Android and iOS. React Native, can save you even up to 40% cost of development and a huge amount of time which is especially important for startups. Just see why one of our clients - Genuine Impact chose cross-platform approach in mobile development.