NativeScript Vs Ionic Framework Pros and Cons

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this post, I will compare and differentiate between NativeScript and Ionic. By the end of this post, you should be able to choose one framework over the other for projects.

Let’s start by defining both the frameworks.

Ionic Framework

What is Ionic Framework? Well, before Ionic v2, Ionic website ionicframework.com defined Ionic as “UI Framework for Apache Cordova Apps“. After the Launch of Ionic v2 now it is defined as follows

“Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.”

The bottom line is that Ionic is still an UI framework that is filling what Apache Cordova lacks.

Apache Cordova runs HTML,CSS and JavaScript code in web-view, a web-view is a view that displays web pages. So essentially when you build apps using Apache Cordova you are running your app inside a web-view. As Apache Cordova does not provide any styles to the app, you have to code all the CSS yourself to make your app look like a Mobile app. This is where Ionic Framework comes in.

Ionic provides styles that look natural for Android as well as for iOS, but Ionic sits on top of Apache Cordova for Mobile development and the apps that are creates using Apache Cordova are called Hybrid-Mobile Apps as they run inside a web-view and are not truly native. But this is not a deal breaker as you will see later in the post.

Code Sample

This is how you would create an input field in Ionic

 

NativeScript

NativeScript is defined on their web-site nativescript.org as follows

“Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript.”

As you can see it is mentioned that you can build truly native web apps using NativeScript. Furthermore, NavtiveScript is the actual framework that creates your app and it does not sit on top of any other technology. The apps created using NativeScript automatically get native styles applied to them. So a button for a NativeScript app will look like a native button on Android and the same is true for iOS. However, you can add styles to your app using a subset of CSS to make it look the way you want.

NativeScript uses XML, CSS and JavaScript to create apps.

Code Sample

This is how you would create an input field in NativeScript

 

Both frameWorks have the cross platform startety this means that you have to code your app only once using XML/HTML,CSS and JavaScript and you can build apps for Android, iOS and Windows (coming soon on NativeScript).

 

Let’s now jump into the pros and cons of the two frameworks and compare them in more detail.

Pros and Cons of Ionic and NativeScript

Ionic CLI is a delight to work with, there are some aspects of the CLI such as text coloring, file template generators that are better than NativeScrtip’s CLI.

It’s easier to get started with Ionic if you are coming from a web-development background, as NativeScript uses XML for it’s UI it will be easier for native Android developers to get started with it as XML is used to create UI in Android.

Learning curve for Ionic is far less than that of NativeScript.(I come from a web development background, so this might be not true for you)

Both have support for Angular 2 which I think is a plus for both frameworks, but you can use NativeScript without Angular using plain TypeScript which is not true for Ionic. Ionic is built using Angular and you cannot use Ionic without Angular.

The debugging experience of Ionic is easy and quick than in NativeScript. You can debug parts of Ionic app that do not use native device feature in the browser itself. For NativeScript the debugging happens in the console which can be not the best experience.

For Ionic, if you wish to use native device features such as camera, file storage, etc you will have to rely on third-party plugins. If you wish to use a feature for which there is no plugin created then you will not be able to use it. For NativeScript, you do have plugins that are created by the NativeScript community but you can use native device features if you want right out of the box.

Ionic has a reach ecosystem of servies and products that you can choose which will not only help you in development but also provide some reach features to be used in your app. For example you can use the ionic.io cloud service that will provide you with auth, database as well as Push Notifications among other things. Ionic also has a market place where from you can buy themes and plugins. This kind of ecosystem is not available with NativeScript at the time of writing this post.

The performance of NativeScript is better than Ionic Apps, as you might expect. Ionic uses Apache Cordova that runs your app in a web-view which takes a hit on performance. This is especially true if you have an app with a lot of moving parts that need to be rendered. But for a data driven app this is not a deal breaker as most of the time the user will not notice it.

App size for NativeScript is much larger that Ionic Framework. For example, just a basic “HelloWorld” starter app for NativeScript has the app size around 20Mb the same for Ionic is around 3Mb. The size becomes an issue if your users have a slow internet to download your app from the App Store. Note that for NativeScript app size is only increated while building for Android, building for iOS has no such issues. Read more here.

 

Which FrameWork Should You Choose?

I believe that both Ionic and NativeScript have their place in Mobile Application Development. As a developer learning and using both of these frameworks is a plus. If you are an absolute beginner I would say that as Ionic is easy to get started with and the build/debug process is simpler you should first try Ionic then move to NativeScript if need be.

At the end of the day choosing between Ionic and NativeScropt will depend on the type of App and the target audience of the app. If you are creating an app for which a litte loss in performance is not an issue then you should choose Ionic. However, if you are creating an app where performance is a must, then definitely go with NativeScript.

App size is also a factor. For mobile devices, which often run on slow internet there may come a time where an app created with NativeScript has an app size of 20Mb+ while your competitor has an app that is say 5Mb in size. In such a case there is a high posibility that users will download the app with smaller file size, in such a case Ionic becomes the better choice.

Time of development is also a factor when it comes to choosing between Ionic and NativeScript. This maybe different for you, but personally I find it much easier and quicker to create apps with Ionic than NativeScript. This is due to my web-development backgorund and maybe the otherway around for you.

 

Conclusion

In all fairness, I believe that the comparison between Ionic and NativeScript is flawed to begin with. Ionic is a UI framework which has now evolved as a progressive web-app framework while NativeScript is a cross platform mobile application framework. The comparion would be fare if we were comparing NativeScript with Apache Cordova as both them produce Mobile appications. But I am comparing Ionic here as it is widely used as compared to standalone Apache Cordova.

I have created tutorials on both Ionic (here) as well as NativeScript (here). I also have a tutorial course for NativeScript on udemy which you can here. As I mentioned, while creating apps I take App size, Performance, Time Of Development and choose a framework accordingly.

Let me know in the comments about your opinions about Ionic and NativeScript. Also, do let me know if I missed any point.

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • cebeka

    Hello, I have used Ionic2 for a student project of mobile app. I really enjoyed using it because of its simplicity. However, my app takes 15 seconds to load! I don’t now if I did something wrong but I think I will definitely not use Ionic2 for a professional app.

    • 15 seconds is a very long time. I did face the same issue when Ionic 2 was in beta stage. But with the relase of 2.0 which has Angular AOT, the time has reduces significantly.

      You can have a splash screen so that the user will not have to stare at a white screen. I know this is not a solution but that is a point where Hybrid Tech lags.

      Here are a few threads that you can read

      https://forum.ionicframework.com/t/ionic-2-speed-up-boot-time/46372/5

      https://github.com/driftyco/ionic/issues/6776

      All in all I have not had any issues with startup after the latest update. Make sure that you are not making any http calls before the app loads. It is better to have the app load up and then initialize the data. This gives a better UX.

      Hope it helps,

      -Prantik

      • cebeka

        Thank you. I have switched to Ionic 2.0 release without seeing any improvement but I might have something wrong in my configuration. I will read what you recommend and tell you I solve my problem.

  • cebeka

    Did you try React Native?

    • No. I have not ventured with react as Angular full fills my needs. Do let me know, Is it worth learning?

      • cebeka

        As I was disappointed by Ionic, I wanted to try something else : React active or NativeScript. I guess I should try both!

        • Have at it, and all the best, do let me know as well your thoughts. But as I have mentioned in the post, NativeScript did have a bit of a learning curve from a web developers point of view.

          As nativescript does not have a DOM, you have to search the documentation what properties an element has. Having said that, once you get familiar with it then things run smooth.

          -Prantik