ready to build your app

JavaScript Mobile Development: NativeScript vs React Native Comparison

It’s no secret that having a strong mobile presence is no longer optional. Worldwide, mobile devices have outgrown desktop use, and the trend toward mobile computing is transforming how organizations communicate with their customers, present their ideas, and reach their business goals.

But simply deciding to establish a mobile presence is just the first step because there is more than one way to reach mobile users. In this article, we are taking a closer look at JavaScript mobile development. Specifically, we are comparing NativeScript with React Native to see which of these two mobile app development frameworks for writing natively rendered mobile applications for iOS and Android has more to offer.

A brief history of JavaScript mobile development

See which JavaScript mobile development technology is better and why.

For a long time, native mobile apps ruled digital distribution platforms and marketplaces. Developed in a platform-specific programming language, such as Swift for iOS or Java for Android, using platform-specific tools, they provide seamless access to native platform APIs, and their optimized performance ensures the best user experience possible.

However, native mobile apps are not without their fair share of disadvantages. Their biggest downside is that it’s not possible to deploy the same code on different platforms. Let’s say an organization decides to develop an iOS app and hires or outsources software developers, UI specialists, and other professionals. To make the same app available to Android users, the organization would have to hire a new team to port the app to Android.

Not only is it expensive to target multiple platforms with native development, but it can also be very time-consuming. By the time the app is finally in both the Google Play Store and the Apple App Store, there might already be many competing apps with great reviews, making it difficult for the newly released app to gain traction. Of course, making the app available is just the start of a new phase, characterized by ongoing maintenance and feature upgrades, and it goes without saying that it’s far more cost-effective to maintain a single codebase than two.

For these and other reasons, mobile web apps have skyrocketed in popularity in recent years. They are essentially responsive web apps developed using the three core web technologies—HTML, CSS, and JavaScript—and wrapped in a native application shell without requiring any changes to the underlying application.

Unified development is by far the most important advantage of mobile web apps, but it’s not the only one. Mobile web apps also tend to be much easier to update than native mobile apps because they share a single code base, so it’s enough to make changes once. Because HTML, CSS, and JavaScript are all industry-standard front-end technologies, it’s easy to find skilled developers capable of turning any idea into a great user experience.

But, again, mobile web apps are not without drawbacks. While their inherent performance limitations are fairly easy to overlook these days, the fact that they don’t provide access to native components greatly limits what can be achieved with them. Users have come to expect native features, such as voice input, push notifications, and GPS, and they will actively avoid mobile apps that don’t support them.

That’s where technologies such as NativeScript and React Native come in. These two JavaScript mobile development frameworks for writing natively rendered mobile applications for iOS and Android make it possible to access native features using JavaScript, combining the benefits of native mobile apps with the benefits of web apps.

What is NativeScript?

See which JavaScript mobile development technology is better and why.

NativeScript was first released in 2014 by Progress Software Corporation. On its website, NativeScript describes itself as an “open-source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript.”

With NativeScript, it’s possible to develop native mobile applications for Android and iOS from a single codebase and enjoy native-like performance with 100% direct access to all iOS and Android APIs. Building beautiful, accessible, and platform-native user interfaces without WebViews is easy and can be achieved with JavaScript, CSS and Native UI markup.

Some of the most popular apps created using NativeScript include the dating app Strudel, the cryptocurrency wallet BitPoints, the photo-sharing app for parents and nannies called Daily Nanny, the energy consumption monitoring app Regelneef, and the food delivery app Dwitch.

“We love working with the NativeScript team because of the way that they empower web developers to leverage their skillsets to build native experiences on mobile,” says Stephen Fluin, Developer Advocate for Angular at Google. “By using a technology like NativeScript, we gave our Netcentric frontend teams the power to build amazing native mobile apps. This enables us to do more on mobile than we could ever do before,” Even Payne, Senior Front-End Software Engineer at Netcentric, echoes the same sentiment.

What is React Native?

First released in 2015, React Native is one year younger than NativeScript. This JavaScript mobile development framework was created by Facebook after the company realized that its mobile applications relied too much on HTML. “The biggest mistake we made as a company was betting too much on HTML5 as opposed to native,” Mark Zuckerberg famously said in an interview at TechCrunch Disrupt.

Just like NativeScript, React Native can be used to create native mobile apps for Android and iOS. It combines the best parts of native development with React, which is a best-in-class JavaScript library for building user interfaces. React Native apps render native components and use the same native platform APIs as true native apps do.

Thousands of apps use React Native, including some of the most downloaded and popular apps in the Google Play Store and the Apple App Store, such as Instagram, Bloomberg, Pinterest, Skype, Tesla, Uber, Walmart, Discord, Salesforce, SoundCloud Pulse, Vogue, and Townske.

“Looking back at the past three years, React Native has proven to be extremely successful at Discord and helped drive our iOS user adoption from zero to millions!” said Fanghao (Robin) Chen, Mobile Lead at Discord. “More specifically, React Native has allowed us to reap the benefits of quickly leveraging reusable code across platforms, as well as develop a small and mighty team.”

NativeScript vs React Native comparison

See which JavaScript mobile development technology is better and why.

Now that we’ve introduced both NativeScript and React Native, it’s time to take a closer look at some of the key differences and similarities between them.

Learning curve

Since both NativeScript and React Native are JavaScript mobile development frameworks, any developer that has at least some experience with JavaScript should be able to get started with them in no time. Of course, developers who are already familiar with Angular will find it easier to use NativeScript because of its deep integration with the Angular CLI, router support, code generation, and more. Likewise, developers who are already familiar with React will be able to easily transition to React Native.

Both NativeScript and React Native allow developers to write using TypeScript – an open-source programming language developed and maintained by Microsoft that can be described as JavaScript with additional features, and Facebook’s Flow – an open-source static type checking library that makes it possible to incrementally add types to JavaScript code. However, if you create a new project in React Native you’ll notice that it uses Flow as a default, while NativeScript uses TypeScript. Of course, you can change that if you wish.

Development tools

NativeScript relies on either Angular or Vue.js for building engaging user interfaces, whose lightweight nature makes it great for mobile development. Vue.js for the web and NativeScript-Vue are very similar and getting started using NativeScript-Vue is a matter of switching the plugin you include at the start, changing your app instantiation parameters, and writing your front-end templates to use NativeScript modules.

React Native developers specify the layout using Flexbox, which works the same way in React Native as it does in CSS on the web, with a few minor exceptions. The biggest difference is that styles are declared using JavaScript objects and properties, which translate back to their CSS origin.

Both NativeScript and React Native can be debugged using Chrome Developer Tools, also known as Chrome DevTools. React Native users can also take advantage of React Native Debugger and Reactotron, while NativeScript users sometimes use the Visual Studio Code NativeScript extension. It’s also possible to use XCode for debugging generated views of apps developed in both of the mentioned technologies.

Third-party plugins

We’ve already explained that both NativeScript and React Native can readily access native Android and iOS APIs using JavaScript. When it comes to NativeScript, you can directly access all iOS and Android APIs without wasting time writing boilerplate wrappers. If you don’t want to write directly against iOS and Android APIs, you can choose from a wide selection of pre-built, open-source, NativeScript plugins, which are available on the NativeScript Marketplace.

React Native doesn’t have a specialized marketplace for plugins, but it’s easy to extend the built-in components it comes with by searching the npm registry for packages mentioning react-native. Using native modules, developers can write real native code and have access to the full power of the target platform, but it’s rarely necessary to do so since React Native is very capable right out of the box.

Performance

NativeScript uses a single-threaded model because it provides fast access to the native APIs, while React Native uses a multi-threaded architecture, with JavaScript and the user interface running on separate threads. The biggest advantage of the React Native’s multi-threaded architecture is that JavaScript processing does not interfere with UI rendering. On the other hand, the UI of a NativeScript app can get stuck when processor-intensive JavaScript code is executed.

However, NativeScript has one trick up its sleeve: it uses Google’s V8 on Android. React Native, on the other hand, uses Apple’s JavaScriptCore on iOS and Hermes on Android. Thanks to Google’s V8, NativeScript apps tend to have significantly better startup performance than React Native apps.

Overall, the performance of these two JavaScript mobile development frameworks is more or less comparable, apart from edge cases.

Community

At the time of writing this article, React Native is far more popular than NativeScript. According to npm stats, around 300,000 people downloaded React Native this week, while NativeScript was downloaded only by 10,000 people. On GitHub, React Native has 80,000 stars, while NativeScript has less than 20,000.

The company behind NativeScript, Progress, has been doing a good job when it comes to making NativeScript better as a technology, but they don’t spend much money on marketing. React Native stands on the shoulders of Facebook, so even very large enterprises feel confident adopting it as their JavaScript mobile development framework of choice.

Conclusion

For those who have already built a web app with Angular, Vue.js or React, the choice between NativeScript and React Native is obvious: choose NativeScript for Angular and Vue.js, and React Native for React. Those who are building a cross-platform mobile app from scratch can choose either way without making a mistake, but there are several compelling reasons to lean toward React Native.

References

  • https://mashable.com/2012/09/11/html5-biggest-mistake/
  • https://blog.discordapp.com/why-discord-is-sticking-with-react-native-ccc34be0d427

Marcin Dryka

Marcin Dryka is a CTO at Brainhub - a software house building awesome JavaScript web and mobile apps.