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: — what language it uses, how the UI is created, what are the tools used for developing apps. Code and development tools — what does the process of developing apps look like. Development workflow — which native APIs are available and how easy it is to add native functionality. Native APIs and extensibility — how does each framework perform. Performance 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 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. React Native 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. 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 . NativeScript Mobile Development Kit When it comes to code, , 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 is the easiest to learn Ionic comes with which can be styled differently depending on which platform your app is running. UI components Ionic is , 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 . This means developers can choose not to use any framework, or use popular frameworks such as React or Vue. tightly coupled with Angular framework-agnostic On the other hand, 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 React’s JSX syntax React Native uses 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, becomes ) so it’s easy to pick up. Flexbox background-color backgroundColor React Native uses JavaScript for adding functionality. , 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 , especially the ones that access the browser’s DOM. Most of the should work since the JavaScript environment in React Native is similar to that of Node. It supports ES6 by default most of the libraries you’re used to using in a web environment wouldn’t work npm packages Lastly, 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 , NativeScript also comes with professional-grade UI components like charts, graphs, and calendars. NativeScript uses an XML-based language widgets NativeScript encourages you to , but you can also use plain JavaScript if you’re building smaller apps. use TypeScript and Angular for building apps Development Workflow 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 feature, which makes it really easy to preview how the app looks like as you’re making changes to the code. live reload 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 . 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 and , and it has become the preferred way of debugging React Native apps. Chrome Developer Tools React Native Debugger Reactotron On the other hand, NativeScript apps can be debugged using either the or the . 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. Chrome Developer Tools Visual Studio Code NativeScript 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 , a TypeScript wrapper for Cordova plugins for accessing native device APIs. If a 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. Ionic Native Cordova plugin 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. . 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 and . 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. Most of the native functionality you will want to access has already a corresponding third-party module iOS Android Lastly, NativeScript allows you to access hardware features by means of its plugins. You can search for available plugins in the . NativeScript plugins also go through a to ensure their reliability. NativeScript marketplace verification process One special feature of NativeScript is that it . 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. gives you access to all of the native platform’s native APIs through JavaScript 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 , you’ll probably notice these things: Ionic’s showcase page 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 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. performance 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 and creating paid services and tools that revolve around it. paid support 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 in a shorter period of time. Thus, they’re able to penetrate the market first, giving them a competitive advantage. Minimum Viable Product 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 .