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 created 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 strategy 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, 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 natively.

The 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 or even just JavaScript 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 features in the browser itself. For NativeScript the debugging happens in the console which, in my opinion, is 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 services 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.

For Android, App size in 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 increase in app side is only 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 little 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, with slow internet speed, 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 possibility 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 may be different for you, personally, I find it much easier and quicker to create apps with Ionic than NativeScript. This is due to my web-development background and maybe the other way around for you.

 

Conclusion

In all fairness, I believe that the comparison between Ionic and NativeScript is a flawed one to begin with. Ionic is an UI framework which has now evolved as a progressive web-app framework while NativeScript is a cross platform mobile application framework. The comparison would be fair if we were comparing NativeScript with Apache Cordova as both them produce Mobile applications. 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 see here. As I mentioned, while creating apps I take App size, Performance, Time Of Development into consideration and then 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.

        • Richieman

          The Ionic documentation is not very clear on that part. You have to specify –prod when building to compile with AoT. Check the output, you should see ‘ngc’ flying by.

          So for a release version you’d do something like:

          ionic build –release –prod

          I think the –prod should be implied by –release but it isn’t.

  • 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

  • Mangesh Sangapu

    Hey Prantik, awesome post! I completely agree. I have a bit of ionic experience and I remember I was able to create my first app within a few hours. For NativeScript, the setup took me several hours itself. I agree that if you are new to both and have a web-dev background, to start with Ionic. I am not sold on {N} yet… want to give it a few more attempts before I make my final decision. I just tweeted this article. Thanks again!

    • The lack of DOM still messes with me. I can have to constantly dig up the docs to see which properties and methods an element has.
      Also, NS has a significantly greater load time, which in my opinion is not a good user experience.
      On the plus side, NS supports Angular 2 which makes it easier to work with.

      • NS only has a longer load time when using angular without webpacking the app

        • Yes, thanks for clarifying it. I have been using NS with Angular 2 for a long time now, I almost forgot that NS can be used without ng2. Last I used NS without ng2 was when ng2 didn’t exist 🙂

  • NS has the telerik platform so ATM they are only missing out a marketplace

  • Aure

    Hi Prantik, thank you for the post. We want to build a mobile App with a rather complex web-based Admin Dashboard. Do you think Ionic would be a good match for the task? And is it possible with Ionic to use different templates according to the target (mobile vs web)? I hope you can help me figuring that out.

    • Yes, if you are combining the web and mobile platforms then Ionic is an excellent choice. Selecting different templates depending on the platform can be done. But it is not straight forward as just adding an attribute or change a config value.

      You can detect which platform you are on using the platform API here https://ionicframework.com/docs/api/platform/Platform/

      Then selcet the template accordingly.

%d bloggers like this: