Ionic 2 vs ReactNative vs NativeScript

It could be a very difficult task to choose the best one in this fast growing industry.

Mobile development has been the part of us since the early creation of software for mobiles. Since the advent of modern smartphones, the development has reached its peak and new development tools are created as mobile-first, meaning that the development of the smallest screen happens initially. Before smartphones, development was limited to the basic software for sending and receiving calls and other simple functionalities (i.e., calendar, clock, etc.).

The arrival of modern Android and iOS smartphones and the fact that app stores are becoming a boom that are overloaded with new apps on a regular basis, has led the demand of the development of applications for those devices to rise in recent years. The intriguing fact is that many applications are being developed in the web development technologies, aka, they are run and tested in browsers first as if they are devices themselves!

We have witnessed hybrid mobile application development frameworks that allow you to use the basic website languages like HTML, CSS and JavaScript for developing mobile apps, and then we witnessed the native frameworks that not only allow you to use web tools for mobile development, but they also use the native API of Android or iOS (for UI and other functionalities) rather than imitating the native look!

It’s a common trend that when demand of something is increases, competition will also arise. We have seen several mobile development frameworks already, thanks to the speed it takes to develop new technologies from old technologies, we received the gold in the form of Ionic 2, React Native and NativeScript.

So, in this article, I am going to highlight the differences between these three frameworks, their pros and cons, and which one you should choose for the development. As always, let’s get started!

Ionic 2 vs React Native vs NativeScript – What to choose for mobile development?

These three platforms provide the same purpose: To support the creation of mobile applications through web technologies (i.e., HTML, CSS, JavaScript, etc.). But, what sets them apart from each other are the features they provide and how they are communicating with the APIs of the specific platforms.

Even though, there are other platforms for the mobile development, we are going to cover these three due to their massive popularity and intense competition in the recent months.

Ionic 2

Ionic 2 is not just a rewrite of the previous Ionic framework, but also the adoption of the design/structure of AngularJS 2, while also taking inspiration for their design language from Android, Material Design and iOS. It is TypeScript ready, meaning you can use your existing AngularJS 2 components as well.

Ionic 2 is a hybrid mobile development framework… okay, so what does it mean by hybrid development? Hybrid apps are like any other apps you can find on the app stores, they run in the same manner (by downloading and installing them), and the user interaction is similar, in fact, most users hardly realize the difference between native apps and hybrid apps.

The interesting thing about hybrid apps is that they are hosted inside a native application which uses the WebView – which is kind of browser-less web pages loader, so you get access to mobile functionalities, such as, camera, contacts, gyroscope, etc. through website languages, like HTML, XML, CSS, etc.

Ionic 2 still uses WebView (just like the previous Ionic version), so you write the HTML code in your Android activities, so it can be slower compared to ReactNative and NativeScript (we will talk about it later). You can create native looking widgets in Ionic 2, but they are still rendering in WebView inside a native container, and so are not technically native.

WebView provides widgets that are different from browser web pages, and so all the web errors are ignored, because the purpose is to provide the HTML canvas for the app files to load onto it rather than the actual web pages functionalities and therefore the mobile applications are created just with the knowledge of website development.

Apache Cordova is used in Ionic 2 to access the phone hardware functionality. The UI is actually not native (even when it may give the appearance of native UI), it is loaded on WebView as typical/normal web pages. It can lead to performance issues, or graphical issues if your mobile has a slow processor.

The previous Ionic version uses the ngCordova plugin to get access to the native API. It does nothing but wraps the native functionality to AngularJS libraries, so you can get access to native functionalities of the devices through JavaScript, but the new version supports Ionic Native which does the same thing as ngCordova, but more smoothly. For example, it wraps the plugin callbacks in Promises or an Observable, so a common interface is provided for all plugins, supporting the ease of use of native functionalities.

You need to download plugins for accessing native functionality, for example, if you want to use Google Maps, then you need to download Cordova plugins from here (https://cordova.apache.org/plugins/).

If you are aware of PWA (Progressive Web App), then Ionic 2 is a perfect example of it, because you are getting the app-like experience by using the modern web technologies. Of course, there are requirements for the PWA, which you can read from here (https://ionicframework.com/docs/v2/resources/progressive-web-apps/).

So, let’s see how you can create a project in Ionic 2. You need to first install the Cordova and Ionic CLI (assuming you have NPM installed):

$npm install -g ionic cordova

Now, you can create your new Ionic projects:

$ionic start sampleProject --v2

And then you can serve it:

$ cd sampleProject
$ ionic serve

Now, if you go the project folder, and then “src/app” folder, you will feel at home if you are coming from AngularJS 2, because the similar build structure is used here, making it extremely easy for you to transition to Ionic 2 just right away!

The issue with Ionic 2 is that TypeScript components can make the tasks slower compared to directly working with native API. Thankfully, Ionic 2 overcomes several performance issues with the help of its structure, and it gets updated regularly, and for the most part, you don’t require that much performance.

Ionic 2 is very suitable for prototyping and fast development for the applications that need to be delivered as quickly as possible, or if there are many apps requirements, but less change in the code base, in a short amount of time you can create several apps out of the same code base.

So, in a nutshell:

Pros:

• Hybrid web development support. Same code-based can be used to develop applications for Android, iOS, Windows Phone, and web.

• VERY fast development-testing cycle. You write the code and test it on the browser, no need for heavy emulator loading.

• Allow you to write code in TypeScript, making the transition from AngularJS 2 very easy.

• The same language (TypeScript) can be used to develop applications for every platform.

• Its plugin system makes it available for you to use any kind of native functionalities of devices.

Cons:

• Performance issues may occur if you need to use a lot of callbacks to the native code.

• The same UI look in all the devices may be a deal breaker for those who prefer the native UI look.

• Development of highly advanced graphics or highly interactive transitions can be a complex job.

We have 13 different tutorials and articles ready to help you develop your mobile applications with Ionic 2. Our most popular of these blogs helps you understand and navigate your way around the side menu and tabs in Ionic 2.

ReactNative

Developed by Facebook, ReactNative is an extension of React.js, so if you are coming from React.js background, then you will feel at home here. It uses the same principles, such as Virtual DOM for updating the UI, so they are calculating the changes that need to happen to the UI in the background, and once those changes are done, they are applying it to batches. The advantage here is that the UI thread is not touched, which gives you a very responsive UI, but it also gives you a disadvantage in that it is slow to communicate with the underlying native OS.

If you understand React, then you know that it focuses heavily on the user-interfaces, so ReactNative followed the same emphasis.

At this moment, I like to point out the difference between UI (User Interface Design) and UX (User Experience Design). UI refers to visual elements, or the user interface of the application, including screen pages, buttons, icons, etc. UX refers to the actual experience of the users when they are interacting with the application. For example, you can have an awesome looking UI with several colorful buttons and graphics, but its users may find it difficult to interact with your application or may find it hard to understand the functionalities of your application, and so in this case, your application has a good UI, but poor UX.

Unlike Ionic 2, both ReactNative and NativeScript (which we will talk about later) uses the native UI components from native OS of specific platforms, so you are writing the components in JavaScript, but they are actually using those native components behind the scene. This has a good effect on UX, as the user can have the similar experience of a native app, secondly, this is not a browser-based app like in PhoneGap/Cordova of Ionic, so the implementation is faster and runs quicker in mobile devices.

In Ionic 2, if you want to access the native API, then you need to use Cordova libraries, for which you would need ObjC/Swift/Java code. This is something that may be perceived as a deal breaker. ReactNative renders the components using native components, even when the code is written in HTML, CSS, JavaScript, etc.

So, let’s see how you can create projects in ReactNative. You need to first install the ReactNative CLI:

$ npm install -g react-native-cli

Now, you need to set-up the Android/iOS development environment, you can read about it here (https://facebook.github.io/react-native/docs/getting-started.html). Assuming the environment is set-up already, you can create and run a new project like following:

$ react-native init sampleApp
$ cd sampleApp
$ react-native start

ReactNative is cross-platform, meaning the same code-base can be used to develop applications for both Android and iOS. It’s a kind of a wrapper around native code of specific platforms, so around 85% code is similar, and the final 15% is something you may need to change to suit for a specific platform. Unlike Ionic, it is not designed to write once, run everywhere, so you need to change some platform specific code in your program, because the purpose is to create the most native look as possible.

It uses ES6, so you can use TypeScript similar to AngularJS 2 and Ionic 2, although by default, JSX is supported in ES6, so you will get a similar experience to React ES6.

So, in a nutshell:

Pros:

• You can use the same code-base (most of the time) to develop applications for Android, iOS, Windows Phone.

• Similar to React ES6, you can use JSX to program your application with combined JavaScript, HTML and JSX.

• Much better performance than Cordova in Ionic. Hardware functionalities are processed by the specific platform, and not by Cordova.

• ReactNative uses multiple cores simultaneously so your JavaScript code runs on one core and the app view runs on another core.

Cons:

• The process of conversion of HTML code to native code can be buggy at times, and to fix the problems, you need to understand ObjC/Swift.

• Originally created for iOS, so many components for the Android may require some work from your side.

• The use of JavaScript (or ES6) may you give the outdated feeling, especially if you are coming from TypeScript background.

Enter our knowledge base for further information on React Native including a Linkedin presentation and code examples.  

NativeScript

Developed by Telerik, NativeScript allows you to use either JavaScript or TypeScript for the development, so if you have used AngularJS 2 earlier, then you will have an easy transition. Telerik previously developed Kendo UI with tight Angular integration for the hybrid apps, but they later realized, why not provide the true cross-platform native experience?

With TypeScript and AngularJS 2, you can very easily create components for mobile apps using a declarative style. Claiming to support “write it once, run it everywhere”, the same AngularJS 2 code can be utilized for the UI for all the platforms it is targeting. NativeScript is a real cross-platform, which means 100% Native API access and its mission is to allow people to use the same code-base for all the platforms.

Unlike ReactNative, NativeScript uses the native UI code (for respective Android and iOS phones) even though you are writing the code in TypeScript/JavaScript! If we consider the performance side, then NativeScript really has the edge over ReactNative, because it is using AngularJS 2 structure for creating components.

The best thing about NativeScript is that it is developed by Telerik which assures you that it will keep receiving new updates in the future, as it is backed by professional developers all around the world. So, if you are using commercial applications, you can rely on NativeScript more than ReactNative, as ReactNative is more open-source friendly and relies a lot of contributions from the users. But, NativeScript is also open-source.

NativeScript is also quite matured compared to ReactNative. It is already in 2.0 version, that’s not the case with ReactNative which gets new updates less often. NativeScript can share much more code than ReactNative, meaning it will save your time.

You can set up the NativeScript through the following commands:

$npm install -g nativescript

Now, you need to install the requirements through the following command (write it down on CMD instead of Git Bash!):

$@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

You can confirm the installation by running the following command:

$tns doctor

You can read more about here (http://docs.nativescript.org/start/quick-setup).

You can access any native API from TypeScript (or JavaScript) code alone! The entire AngularJS 2 API is supported, so you can share code between your app and web apps as well, or use your existing components.

NativeScript runs inside a JS engine (V8 for Android) bundled with the application. This makes the app size large, but you can make cross-platform apps that are actually highly performant due to native components.

So, in a nutshell:

Pros:

• Real cross-platform support. Single code-base for developing apps for all the supported platforms.
• 100% Native API access. You can access the hardware features like camera, touch, calendar, phone calls, etc. all with TypeScript/JavaScript code.

• Uses the AngularJS 2 so you can easily transfer your previous web components in your applications.
• Very good support from Telerik.

Cons:

• Many plugins need to be downloaded separately for the components. Not all plugins are available or verified (i.e., thoroughly tested).

• App size is much larger than ReactNative and Ionic 2. If your users have slow internet connection, then it may be a problem for you.

• There’s no support of HTML and DOM in NativeScript, so you need to learn different UI components to build UI of the applications.

Conclusion

So… you can now see the pros and cons of all three of these mobile development frameworks. It might still be difficult for you to choose one from these, so why not try the basic samples from each of these frameworks? It wouldn’t take much time, and you will get the flavor of each framework! Perhaps you might end up creating your personal custom framework? The possibilities are endless!

If you think I have missed something, or if you have any questions, then please tell me in the comment section below!