NativeScript vs React Native - which one to choose?

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

Today, we’ll take a closer look at NativeScript and React Native, two cross-platform mobile app development technologies born respectively from Angular and React frameworks. Both make it possible to use Javascript to build fully-native mobile applications.

Learn more about cross-platform mobile development frameworks in our insightful overview of trends and frameworks. 

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:

1. Framework origin
2. Developers’ learning curve
3. Developer experience
4. Integration with native code
5. Compilation time and development speed
6. App performance
7. Testing options
8. Shared codebase
9. Size
10. Popularity
11. Other areas
12. Nativescript vs React Native: Which one is the winner?

Before we start, let’s warm up with a short recap of both frameworks’ origins.

1. Where did React Native and Nativescript come from

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. 

2. Nativescript vs React Native - developers’ learning curve

Both NativeScript and React Native rely on JavaScript code, which makes them very attractive for frontend teams to use. If your team is well familiar with ReactJS (along with Redux, Immutables, and stores), it should be relatively easy to power them up with React Native. 

On the other hand, Nativescript gives total freedom to write the code in whichever JavaScript framework you prefer. The most popular combination include:

• 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. 

3. Developer experience (IDE and debugging)

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. 

Check how our devs handle building NativeScript apps from scratch.

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. 

4. Integration with native code  

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?”. 

NativeScript bypasses such issues by injecting all iOS and Android APIs into the Javascript Virtual Machines. For that reason, accessing native APIs doesn’t require platform-specific expertise. Enough to build your own plugin that calls native code or functionality. Another option is to use one of the validated plugins from the official NativeScript marketplace that’s updated and revisioned on a regular basis.

5. Hot reloading - a developer’s best friend

One advantage of using a JavaScript framework for cross-platform development is an increase in mobile development productivity. Thanks to a feature called hot reloading, there’s no need to recompile the code over and over again. One can simply reload the app instantly. A nice touch is that the actual state of the app stays intact while you run the new code. 

Both React Native and NativeScript support hot reloading, though in NativeScript you’ll find it under LiveSync feature.

6. Performance

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.

7. Testing options

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.

8. Shared codebase

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).

Hungry for a little inspiration? Read how SportsHi, a US startup, benefitted from working with us on a React Native-based social network app.

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.

9. Size

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.

10. Popularity 

JavaScript ecosystem is a living creature. New frameworks are being born almost every day, the existing ones get updated giving a headache to development teams trying to keep up with new releases. 

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.

11. Nativescript vs React Native: other areas

Here's a short summary of the comparison. 

React Native NativeScript backed by Facebook Telerik programming language JavaScript JavaScript Typescript performance near-native near-native 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

Facebook
Instagram
Pinterest

Sennheiser PUMA

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

Nativescript vs React Native: Conclusion

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. 

JavaScript is all your developers need in order to create mobile applications and build a Minimum Viable Product much faster than separate iOS and Android applications. This way companies are able to go to market, validate their product and win a competitive advantage faster than their competition.

Considering building your application in React Native or Nativescript? Check our mobile development services and discuss the pros and cons with our experts.