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.
Before we proceed, let’s first look at a quick overview of the three frameworks.
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 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.
Code and Development Tools
Ionic comes with UI components which can be styled differently depending on which platform your app is running.
backgroundColor) so it’s easy to pick up.
The development workflow looks pretty similar for each framework:
- Generate a new project using a command-line tool.
- Amend the default directory structure (optional).
- Build the UI using the provided components/widgets.
- Add layout and custom styling.
- Run the app and preview it on the emulator/simulator.
- Add functionality.
- Install packages.
- Use the packages.
- Debug/test the app.
- 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.
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.
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.
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.
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!