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!
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?
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 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.
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:
- 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.
- 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.
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.
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:
- You can use the same code-base (most of the time) to develop applications for Android, iOS, Windows Phone.
- Much better performance than Cordova in Ionic. Hardware functionalities are processed by the specific platform, and not by Cordova.
- 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.
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.
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:
You can read more about here (http://docs.nativescript.org/start/quick-setup).
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:
- Real cross-platform support. Single code-base for developing apps for all the supported platforms.
- Uses the AngularJS 2 so you can easily transfer your previous web components in your applications.
- Very good support from Telerik.
- 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.
So… you can now see the pros and cons of all these three mobile development frameworks. It might still be difficult for you to choose one from these, so why not try the basic samples from all these frameworks? It wouldn’t take much time, and you will get the flavor of every 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!