React Native vs Ionic vs NativeScript: A Practical Guide

In this article, we’ll look at three of the most popular frameworks when it comes to developing mobile apps that run on both Android and iOS: React Native, Ionic, and NativeScript.

Specifically, we’ll be comparing the frameworks based on the following criteria:

• Code and development tools — what language it uses, how the UI is created, what are the tools used for developing apps.
• Development workflow — what does the process of developing apps look like.
• Native APIs and extensibility — which native APIs are available and how easy it is to add native functionality.
• Performance — how does each framework perform.

By the end of this article, you’ll have a clear idea of which framework you’ll want to use for your next mobile app project.

Framework Overview

Before we proceed, let’s first look at a quick overview of the three frameworks.

React Native

React Native is a mobile app development framework created by Facebook. It allows you to create native mobile apps with React and JavaScript. Other than Facebook, it’s also used by Bloomberg, Tesla, Uber, Wix, and Discord for their apps.

Ionic

Ionic is a framework for developing PWA’s and high-performance hybrid mobile apps. It was created by Drifty Co. Popular apps like Sworkit, Untappd, and the Dow Jones MarketWatch are built using Ionic.

NativeScript

NativeScript is a framework for building native mobile apps. It was created by Progress. Some apps that use NativeScript include MyPUMA, Regelneef and UH Now. SAP also uses it for their Mobile Development Kit.

When it comes to code, Ionic is the easiest to learn, especially if you’re coming from a web development background. Apps are built using HTML, CSS, and JavaScript, so the way you build the UI and add functionality is pretty much the same as how you do it in the web. Since Ionic is basically running on a WebView, most JavaScript libraries that you’re using in the web should work as well.

Ionic comes with UI components which can be styled differently depending on which platform your app is running.

Ionic is tightly coupled with Angular, so it’s the default JavaScript framework used when you create a new project. Though, at the time of writing this article, the latest version of Ionic (Ionic 4) is nearing its release — and one of its major features is being framework-agnostic. This means developers can choose not to use any framework, or use popular frameworks such as React or Vue.

On the other hand, React Native uses React’s JSX syntax for building the app’s UI. If you’re not familiar with React, it’s a JavaScript library for building user interfaces which is also maintained by Facebook. React Native comes with a collection of UI components, most of those work on both Android and iOS, but some only work on one platform.

React Native uses Flexbox for laying out the UI. This works the same way as the web version, but not all properties are supported and defaults are different. General styling is achieved using a subset of CSS — but instead of the syntax we’re used to in the web, styles are declared using JavaScript objects and properties. These properties translate back to its CSS origin (for example, background-color becomes backgroundColor) so it’s easy to pick up.

React Native uses JavaScript for adding functionality. It supports ES6 by default, so most tutorials you see on the internet use it as well. Note that React Native doesn’t have the same JavaScript environment as what you find on a web browser. This means that most of the libraries you’re used to using in a web environment wouldn’t work, especially the ones that access the browser’s DOM. Most of the npm packages should work since the JavaScript environment in React Native is similar to that of Node.

Lastly, NativeScript uses an XML-based language for UI declaration, a subset of CSS for styling, and JavaScript for functionality. NativeScript’s widgets are unified, so most of them work for both iOS and Android. Unlike React Native, NativeScript’s widgets come with default styling, either Material Design or Cupertino, depending on the device it runs on. Aside from the generous collection of widgets, NativeScript also comes with professional-grade UI components like charts, graphs, and calendars.

NativeScript encourages you to use TypeScript and Angular for building apps, but you can also use plain JavaScript if you’re building smaller apps.

Development Workflow

The development workflow looks pretty similar for each framework:

1. Generate a new project using a command-line tool.
2. Amend the default directory structure (optional).
3. Build the UI using the provided components/widgets.
4. Add layout and custom styling.
5. Run the app and preview it on the emulator/simulator.
6. Add functionality.
7. Install packages.
8. Use the packages.
9. Debug/test the app.
10. Commit changes to source control.

All of the frameworks also have a live reload feature, which makes it really easy to preview how the app looks like as you’re making changes to the code.

The difference between the three is centered on the tools used for developing and debugging apps.

When it comes to debugging, React Native allows you to debug your app using Chrome Developer Tools. Not all features that you’re accustomed to using for web projects are available though. For example, it doesn’t have an element inspector. There’s an in-app view inspector but it’s only useful for very simple apps. This is the reason why the community has created tools like React Native Debugger and Reactotron, and it has become the preferred way of debugging React Native apps.

On the other hand, NativeScript apps can be debugged using either the Chrome Developer Tools or the Visual Studio Code NativeScript extension. There’s no preferable tool for the job because each has their own strengths and weaknesses. Chrome Developer Tools is more feature-complete in NativeScript since, aside from JavaScript debugging, its Element, Resources, and Network inspector is also very useful. However, if you want all of your debugging, emulator integration, and version control to be done inside your text editor, then use the Visual Studio Code extension.

Lastly, Ionic being essentially a front-end framework can be debugged just like your usual web page using the developer tool that comes with the browser you’re using. As for native plugins, they can be debugged using Android Studio or Xcode.

Native APIs and Extensibility

If you need to use native device features such as Camera, Geolocation, Maps, and Bluetooth, Ionic provides Ionic Native, a TypeScript wrapper for Cordova plugins for accessing native device APIs. If a Cordova plugin doesn’t have a corresponding Ionic Native wrapper, you can either use it directly or write a wrapper yourself. If there’s no Cordova plugin available for a native feature you’re looking to use, the only option is to develop the plugin yourself. Though this requires knowledge of the native platform’s hardware access APIs.

React Native comes with a small collection of hardware APIs to access native device features. This includes Geolocation, Camera Roll, Vibration, and others. Even though this collection is small, the community makes up for it by bringing a lot of native modules for accessing all kinds of device hardware by means of a JavaScript API.

In React Native, there’s rarely a need for you to write your own implementation for native device features you want to access. This is mostly due to how huge the React Native community is. Most of the native functionality you will want to access has already a corresponding third-party module. In cases where there’s no existing module or it’s lacking in features, React Native also provides you with the tools to create your own native modules for both iOS and Android. Again, this requires a considerable amount of knowledge regarding the native language and how hardware APIs are accessed in the platforms you want to support.

Lastly, NativeScript allows you to access hardware features by means of its plugins. You can search for available plugins in the NativeScript marketplace. NativeScript plugins also go through a verification process to ensure their reliability.

One special feature of NativeScript is that it gives you access to all of the native platform’s native APIs through JavaScript. This means there’s no need for you to write any Swift, Objective-C, or Java code. You still have to know how the native APIs work on each of the platforms, though.

Performance

Out of the three, Ionic will have the worst performance while NativeScript and React Native will have a performance that’s very close to their native counterparts.

That’s not to say that it’s not worth developing apps with Ionic. Ionic’s performance is by no means poor. Apps created with it perform very well and that’s because they closely match the use case in which Ionic is intended for. If you look at the apps in Ionic’s showcase page, you’ll probably notice these things:

• They have a very simple UI; most of them look similar.
• There’s not a whole lot of animations and transitions that need to be performed on each page.
• They don’t require native device features.

And because the good people at Drifty Co. always look into improving Ionic’s performance, you’ll usually only notice the performance difference when your app needs to access native device features.

Which framework to choose?

At the end of the day, which framework you choose hugely depends on your use case.

If you’re looking to develop a game with lots of animations and moving parts, you should stay away from Ionic because its performance is not just going to cut it. No matter how much Drifty Co. tweaks the framework, the performance penalty is just too great when you’re running the app on a web view. On the other hand, if you’re looking to develop simple apps with a decent amount of animations, and you expect your users to be using more recent devices, Ionic should be a great option, as your existing web development skills are directly transferable.

If performance is important to you, you’re probably tied between React Native and NativeScript. In this case, I’d personally go for the more popular option, and that’s React Native. This is because popularity equates to a huge community support, which in turn leads to more libraries, tools, and services being created that revolve around the ecosystem. This hugely benefits you as the developer because you will rarely need to write libraries for accessing different device APIs and services yourself.

It’s important to note that React Native is still an evolving framework. If you’re looking into using a more mature technology and paid support, NativeScript is the way to go. Progress, the company behind NativeScript, has open-sourced the framework but they make money off of NativeScript by providing paid support and creating paid services and tools that revolve around it.

Conclusion

Mobile hybrid frameworks are relevant nowadays because they allow developers to deploy mobile apps faster than their native counterparts. This is mainly due to their unified form of development.

Developers only have to learn a single language in order to create apps for the two major platforms: Android and iOS. This allows companies to launch a Minimum Viable Product in a shorter period of time. Thus, they’re able to penetrate the market first, giving them a competitive advantage.

In this article, we’ve taken a quick look at what React Native, Ionic, and NativeScript have to offer. By now, you should know which among the three frameworks to pick based on your project needs.

Time to start building something great!

Originally published at blog.jscrambler.com by Wern Ancheta.