Hybrid App - Ionic vs NativeScript

I am in mobile space for quite some time and we are having native Android and iOS app already. Now our company is planning to enhance our Mobile Site and our team has chosen Angular 2 + TypeScript + Ionic 2. With great difficulty we have completed our registration form development in Ionic + Angular. Now I came to know about NativeScript to develop Hybrid Apps without webview and since it uses the native UI component people are saying that the look & feel and the performance of the App will be good.

I am little bit confused to choose one

1. Angular + TypeScript + Ionic (html, js, css) or
2. Angular + TypeScript + NativeScript (xml, js, css)

Also our company's long term plan is to maintain a single source for both iOS, Android and Mobile Site

Please help me.

Thanks

This is really subjective question/answer as it depends on how much work you want to do. :-)

First of all in an Ionic / Angular app you are basically making the same web version at the same time (i.e. its a Hybrid app). Performance can be a serious issue depending on what you are doing. Simple screens not so much; lots of data will introduce much bigger performance issues. In addition screen layout will probably cause you the most issues as you are basically coding to a small web browser that has totally different screen resolutions based on each and every device and the OS it is running on. If you are needing closer to native performance; there are things you can do to make Ionic faster (i.e. like using CrossWalk) and overall you can generate a decent web/hybrid app in Ionic.

However the odds are very likely hybrid will never have anything close to Native performance, nor actually act like a Native App as it is still a web app running in a browser trying to act like a native app.

Now, if you are looking for Native performance and/or the ability to do things native on the device, then using NativeScript might be the better choice. You get the native performance, and access to all the native controls (i.e. things like real ListViews that can handle thousands of complex items with no slowdown) -- but the cost is that you DO have to create two separate screens and separate css for your app.

If you use Angular or VueJS; The actual logic can be shared between both a NativeScript and your Web app. And there are now several excellent ways to do this like xPlat (Angular code sharing platform). But in all of them the screen generation is still different. So for your web component/screen you might have a web mycomponent.html -> <div>{{somevalue}}</div> and in NativeScript Angular mycomponent.html -> <Label text="{{somevalue}}"></Label>. So you end up with a more upfront work in NativeScript as you have to create the two separate screen layout files. This might seem like an issue; but in reality this allows you to actually have the native mobile version laid out much better for a Phone and/or Tablet screens. The also opens up additional options like maybe real time access to the camera in the NativeScript layout, and a upload image file button in the html version.

As someone who has used both technologies, I'm firmly in the NativeScript camp for all my new projects; but for some people there are still some valid use cases to use Ionic/Phonegap/Cordova. If the app is already web based and/or nothing that really needs any complex views and/or lots of data shown. In fact the open source xPlat platform that nStudio offers, has support for both Ionic and NativeScript targets. So that you can code share between all the supported platforms and make the best choice for your company at all points in time.

For example; maybe you start with the Ionic/Web build because overall they are basically the same thing. Down the road with xPlat code sharing, you can easily phase your mobile part of the app to Nativescript when you finally do have the extra man power/time and/or need the better performance.

Please note NativeScript w/ Angular allows code sharing; in addition if you are a big VueJS fan, NativeScript w/ VueJS also allows code sharing. So their are two excellent ways to do code sharing between your website and your NativeScript app depending on what your company already uses while keeping native performance for your mobile application.

Short answer

With Ionic you are building hybrid apps or Progressive Web Apps. The structure of the app is written in HTML and the built app is using WebViews (something like a website inside your app).

With NativeScript you are building truly native apps that do not use the HTML DOM and you'll have to learn the UI components of the platform you are targeting (e.g. iOS/Android). However, native apps are usually faster than hybrid apps and you can access the hardware features like camera, touch, calendar, phone calls, etc. all with TypeScript/JavaScript code.

---

Long answer

Here's an extract of a blog post by Danyal Zia. I suggest you read the complete one.

Ionic (2)

> 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.

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 Angular 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.

NativeScript

> Developed by Telerik, NativeScript allows you to use either JavaScript or TypeScript for the development, so if you have used Angular 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 Angular 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 Angular 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.

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 Angular 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.

Don't mix Nativescript with hybrid apps as hybrid apps are apps which uses webview (like Ionic), Nativescript is a Native one. Which one of the difference between both types.

With Ionic, you can have a single source as you have the same view of all three targets.

With Nativescript uses native element so you will have to do two different views for browsers and for mobiles and some changes between javascript code as some things aren't in browser's API but are in the native side or vice versa.

Depends on app what is the target of usage.

To belatedly add to the excellent answers above, as you mentioned, the business must provide input into the decision process as well. Below are a few subjective questions the business has to help answer:

• What impact will funding/identifying developer resources have on the project? I.e.: do we have to make do with what we have? Get new people? Retrain? Hybrid vs. native solutions and whether usage of existing code is required has nontrivial impact. Imagine a solution where either native or front-end developers become more or less redundant...

• What is the impact on the business if the UI/UX is or isn't similar across mobile vs web/responsive/hybrid/PWA? What about the impact of somewhat different capabilities accessing native features like camera, GPS, notifications, etc between native and web/responsive/hybrid/PWA?

• What is the impact of possibly differing app performance across platforms? (ie. native is faster)

• Has the business evaluated the life and maintenance costs of each of these solutions?

The responses are major drivers to go responsive (say grid/flexbox/bootstrap), hybrid (say Ionic), or native (say likes of Nativescript, React Native, or pure os native).

At the end, the final decision is a combination of business and technical drivers.