Written by Ejiro Asiuwhu ✏️
Building cross-platform mobile apps using JavaScript has been a game-changer for JavaScript developers. Not only can developers build apps that run on the web, but they can also build native apps for Android and iOS that run with JavaScript.
Frameworks like React Native and NativeScript make building elegant, efficient, production-ready, and scalable mobile apps with JavaScript easy. But, which one is better for developers?
Before we compare both technologies, we must understand the problems both uniquely solve and both their visions.
What is NativeScript and React Native?
NativeScript's vision is to “Liberate your development by using platform APIs directly without leaving your [love] of JavaScript.” Think of NativeScript as the go-to tool when building cross-platform mobile apps with JavaScript in a framework-agnostic team.
So, whether your JavaScript framework of choice is Vue, React, Svelte, Angular, or even Vanilla JavaScript, NativeScript covers it!
React Native, on the other hand, is a JavaScript library created by Facebook that builds native mobile apps using React, meaning we can’t build mobile apps with React Native using Vue, Angular, or any other JavaScript framework out there.
This does not imply that all React Native apps on the App or Play store are built with pure JavaScript because there are cases when developers must write native code with Swift/Objective-C or Java/Kotlin to access Native APIs not available to JavaScript by default.
With this in mind, let’s see how React Native compares to NativeScript, and by the end of this post, you should be able to choose the best framework for you or your team when building mobile apps with JavaScript.
Community support
Community support is one of the most important factors to consider when choosing the right framework. It may seem surprising, but NativeScript has been around longer than React Native. NativeScript's initial release was in 2014, while React Native was initially released on March 26, 2015.
While the difference of one year may seem like an advantage, the growth and adoption rate of React Native is much higher than NativeScript. As of this publish date, React Native records around 533k weekly downloads on npm, while NativeScript records just under 7k weekly downloads.
When it comes to contributors, React Native handily wins with over 2,200 contributors on GitHub while NativeScript has 208 contributors. And, NativeScript is used by over 3.5k developers while React Native is used by just under 720k developers on GitHub.
This wide margin showcases the developer community’s wide adoption of React Native and impacts the number of third-party libraries, bug fixes, and answers on StackOverflow.
Community support is also important because it determines the number of resources available to learn about each framework, such as blog posts, paid and free courses, ebooks, and YouTube videos.
When it comes to community support, React Native takes the win as most popular.
Getting started
Setting up a React Native project
Getting started and setting up a React Native project can be challenging for web developers who are new to mobile development. However, thanks to Expo, getting started with React Native is a breeze.
While Expo does have some limitations, these limitations don’t affect most apps built using Expo.
Developers can also use Expo Go, a mobile app built by the Expo team to run React Native on a physical Android and iOS device by scanning the QR code to install an app on a physical device.
Getting started with React Native is easier for developers coming from a React background. But, if your main JavaScript of choice is Angular, for example, the learning curve can be steep.
Setting up a NativeScript project
Getting started with NativeScript is fairly easy with the official templates when bootstrapping a NativeScript app. You can initialize a NativeScript app with a side drawer already setup by running the following command in the terminal:
create myNsApp --template @nativescript/template-drawer-navigation
The great thing about NativeScript is that it is framework agnostic, meaning you can build mobile apps with NativeScript using a JavaScript framework like Angular, Vue, Svelte, React, or even Vanilla JavaScript.
However, NativeScript syncs best with Angular more than any other framework because the NativeScript team works with Google to ensure both tools work seamlessly when building mobile apps.
By using the NativeScript Playground app, you can run your apps on a physical Android and iOS device, just like Expo Go.
Overall, the Expo Go app gives a better developer experience than NativeScript playground, so that’s a plus for developers looking for a simpler setup experience.
Hot reload
The hot reload feature is very important in mobile app development because it drastically improves developer productivity. No developer wants to wait longer than a minute to see every little change injected into their mobile app during the development phase.
In this section, we’ll see how both React Native and NativeScript handle hot reload.
React Native fast refresh
In version 0.61 of React Native, the team announced a feature called fast refresh. Fast refresh unified the already existing live reloading feature and hot reloading features in previous React Native versions.
With fast refresh enabled, you can make changes to your app and see the changes almost instantaneously. By default, this feature preserves local state in functional components but not in class components.
You can also call fast refresh manually using the // @refresh reset directive in your React Native component, forcing the component to remount.
NativeScript Hot Module Replacement
NativeScript’s Hot Module Replacement (HMR) feature was released in NativeScript 5.3. It supports Visual Studio Code debugging, letting developers use the debugger even while the HMR feature is still running.
It also has full support for SASS files, which means when you make changes in a .scss or .sass file in your app, they reflect in your app during development; HMR then works when adding or deleting a file from your NativeScript app directory.
There’s support for script changes in a .vue file as well, but it has a limitation when working with TypeScript in Vue, and there’s full HMR support in out-of-the-box NativeScript Angular projects with no extra configs needed!
Both the HMR and fast refresh perform similarly, and both have smartly built features like debugging for Visual Studio Code in NativeScript and error resilience in React Native.
Native APIs
React Native APIs
React Native comes with some basic out-of-the-box modules, but there are cases where you may need native capabilities that React Native does not have a corresponding module for yet. In such cases, you must write native modules to communicate with Native APIs.
Achieving this requires special bridges, which require some level of expertise in native development. However, with the size of React Native’s ecosystem, you will likely find an existing native module on GitHub or npm.
NativeScript APIs
Accessing Native Platform APIs in NativeScript is the most important feature of NativeScript. Developers can call platform APIs from JavaScript instead of writing native code with Objective-C or Kotlin.
This is where NativeScript has an advantage over React Native because JavaScript developers don’t need expertise in a specific platform language to work with Native APIs.
React Native and NativeScript performance
NativeScript apps are usually slower because the framework employs a single-threaded approach to access native device APIs.
Unlike NativeScript, React Native apps uses a multithreaded model where JavaScript and an app’s interface run on separate threads. Therefore, when building a mobile app where performance is a key factor, React Native is your best bet.
React Native also offers faster UI rendering because it uses the virtual DOM to update app UIs, similar to React.
NativeScript and React Native documentation
NativeScript’s documentation is easy to understand and it has some really great illustrations on how to implement things like animations, gestures, HTTP requests, and code sharing.
And, with specific use cases of NativeScript with Svelte and Vue, there is separate documentation. But most of the time, developers must learn how things work in the NativeScript ecosystem outside the official docs.
React Native has a more mature ecosystem than NativeScript, and with that comes the expectation that the documentation is explicit because it is accessed by both beginners and experts in cross-platform mobile app development.
However, while the documentation is approachable, it lacks details, which may make some concepts unclear to beginners.
Building React Native apps with Expo and using the Expo docs simplifies working with React Native docs as a beginner building a functional React Native app.
Neither has the best documentation, and developers using both frameworks must usually go beyond the official documentation to learn all aspects of the frameworks.
Companies using NativeScript and React Native
React Native is currently used in production by top brands and companies like Facebook, Bloomberg, Coinbase, Discord, Tesla, and more. This proves how big and popular React Native has become.
Facebook marketplace is also built with React Native, proving that if you have an existing mobile app written in a native language, you can adopt React Native progressively to build different parts of your mobile application.
Even though React Native takes the spotlight here, it does not imply that NativeScript cannot solve the business problems that React Native does for the companies using it. Looking at the awesome apps here built with NativeScript shows it can build production-ready mobile apps.
Conclusion
Building a mobile app with JavaScript as a web developer is an awesome experience because the language runs on web browsers to build native apps for Android and iOS. Of all the JavaScript frameworks for building cross-platform apps, React Native and NativeScript are at the top.
In this post, we’ve covered what makes each framework unique and how far they’ve grown. Choosing either framework ultimately depends on a mobile app’s requirements, performance cost, preferred JavaScript framework, prior knowledge of mobile app development, and needed Native APIs.
From the above perspectives, you should be able to make informed decisions when choosing a cross-platform mobile application framework for your next project.
Feel free to drop a comment to let me know what you thought of this article. You can also find me on Twitter and LinkedIn. Thank you for reading!
Top comments (0)