NativeScript vs Ionic Framework, Should You Switch?

It is no question that I am pretty familiar with Ionic Framework and Apache Cordova in general. I have a ton of blog articles, YouTube videos and even a beginner level course for Ionic Framework. However, lately I’ve been playing around with NativeScript by Telerik, a similar technology platform that has many advantages over the competitors. I also have blog articles and a beginner level course for NativeScript.

I’m going to do an in-depth comparison between the two hybrid development platforms so you can figure out which is best for you.

Now before I go any further, I should probably state that much of this article will be opinion based. I am going to do my best to back it up with facts wherever possible. I’m not going tell you which you should use, but I’ll leave you with enough information to be able to make the decision on your own.

Let’s start with what we know about both app development platforms according to each of their websites.

Ionic Framework via Drifty:

Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.

NativeScript via Telerik:

NativeScript enables developers to build native apps for iOS and Android while sharing the application code across the platforms. When building the application UI, developers use our libraries, which abstract the differences between the native platforms.

We see that Ionic Framework is heavily advertising performance apps built with modern web technologies and NativeScript is heavily advertising single code set apps that use native UIs.

Okay, so what does this mean for us, the developer?

Well, let’s dig a bit deeper before we start jumping to conclusions in regards to what both technology platforms are saying about themselves.

Telerik’s NativeScript

NativeScript uses a combination of XML, JavaScript and a subset of CSS to develop Android and iOS applications. Notice I said XML here and not HTML. This is because NativeScript will map the XML elements to native UI components making it 100% native in appearance to however Apple and Google intended their applications to be.

Just like with Ionic Framework and probably every other development technology you’re going to see yourself needing to use device features and APIs. These features may not already be baked into NativeScript so you’ll need to download a plugin to accomplish the task. The awesome thing about NativeScript is you can access any device component or API directly with JavaScript. This means if a plugin doesn’t exist for the task you wish to accomplish, you can create one with only JavaScript knowledge. You’ll see how this differs from Ionic Framework in the next section.

Drifty’s Ionic Framework

Ionic Framework uses a combination of HTML, JavaScript and full CSS to develop Android and iOS applications. All theming and UI elements are whatever can be accomplished using web design techniques. It may not look native, but Drifty did a pretty good job at making the user interfaces look sharp.

In Ionic Framework 1.x, Angular 1.x is the JavaScript framework that powers development. In Ionic Framework 2.x, Angular 2.x will be the driving JavaScript framework. In my opinion, AngularJS is one of the stronger JavaScript frameworks.

During the development lifecycle of your Ionic Framework app you’ll find yourself needing to use device features and APIs. This is done through Apache Cordova plugins because Apache Cordova is the base technology that powers Ionic Framework. It is also the base technology that powers PhoneGap if you care to know. There are plenty of plugins available, but should you find yourself needing something that isn’t available, you’d have to create a plugin yourself. The challenge here is that Apache Cordova plugins use native device code such as Java or Objective-C. If you don’t know these native languages, then you’re out of luck.

Some Code Comparisons

Now that you have a bit of background between the two development technologies, let’s look at the differences between building actual applications. Note that this is NativeScript 1.4 and Ionic Framework 1.0 that I’m comparing.

What does it take to get NativeScript installed on your computer?:

npm install -g nativescript

Similarly, you can install Ionic Framework like so:

npm install -g ionic cordova

In regards to creating a new application and adding the iOS and Android build platforms you can make this comparison, starting with NativeScript:

tns create DemoProject
cd DemoProject
tns platform add ios
tns platform add android

With near identical commands, it would look like this for Ionic Framework:

ionic start DemoProject blank
cd DemoProject
ionic platform add ios
ionic platform add android

Enough with the CLI stuff, let’s look at some UI components.

Here is a simple layout for showing a list view on the screen using NativeScript:

<ListView>
    <ListView.itemTemplate>
        <Label text="This is a list item" />
    </ListView.itemTemplate>
</ListView>

The same layout is accomplished with Ionic Framework like so:

<ion-list>
    <ion-item>
        This is a list item
    </ion-item>
</ion-list>

Pretty similar right?

I’d rather not bore you with more UI comparisons because they are all going to look pretty similar. In neither case are you going to say one platform looks way too difficult to attempt using.

Where I Feel NativeScript is Succeeding

Developers want Android and iOS applications that look good. Many of those same developers want mobile applications that look native to how Google and Apple intended. Remember Material Design which Google announced a few years back? This is a design standard for new Android applications. iOS has no concept of Material Design and any iOS app that tries to use it will stand out for the wrong reasons.

This is why I think NativeScript is succeeding against the competition, even beyond Ionic Framework. NativeScript doesn’t force you to share templates between mobile platforms, but instead it chooses the native version of each component even if the UI source code is a single set.

Where I Feel Ionic Framework Went Wrong

Anyone familiar with my background knows I came from developing PHP ZendFramework web applications. If you’re unfamiliar with ZendFramework, it is a PHP framework split into two versions. There is version 1.x and version 2.x. There is a success and a problem that came out of this. Version 2.x was a complete redesign for performance optimizations among other things that weren’t seen in version 1.x. That’s awesome, but the two major version releases were two very different framework languages. Literally nothing from version 1.x could be applied to 2.x. I spent all this time learning and mastering version 1.x and now I’ve got to try to learn everything again for the same framework.

Where am I going with this?

Ionic Framework is doing the same thing with the switch from Angular 1.x to Angular 2.x. Ionic Framework has been in stable for release only a year and now they are expecting everyone to learn a completely different version of the framework. Sure Angular 2.x will destroy Angular 1.x any day of the week, but learning something new takes time.

Now let’s think of this from a learning perspective. There is a ton of documentation, blog posts, and videos flooding the internet for Ionic Framework 1.x. Filtering through all this 1.x documentation to try to find 2.x documentation is going to be a nightmare. There will be confusion, there will be frustration, and there will be a huge split in the loyal following. Why do you think I don’t use PHP ZendFramework anymore?

Think about the challenge it is going to be to get help in the two versions.

The Pros and Cons of Both Technologies

Here is my opinion-based list of pros and cons per each NativeScript and Ionic Framework.

The Pros of NativeScript

• Native platform layouts
• JavaScript access to native components and APIs
• Has excellent performance

The Cons of NativeScript

• It is newer and may have less examples

The Pros of Ionic Framework

• AngularJS is nice to work with
• Apache Cordova is polished
• Has good performance

The Cons of Ionic Framework

• Angular 1.x to Angular 2.x has a huge learning curve
• Apache Cordova plugins require native knowledge
• Layouts do not use native components

Conclusion

Both Telerik NativeScript and Drifty’s Ionic Framework are pretty similar development platforms. You can develop Android and iOS mobile applications using web and web-like development languages such as HTML, XML, and JavaScript.

In my opinion, both are very valid and solid ways to build mobile applications. You won’t be disappointed either way. However, if I had to choose, I would go with Telerik’s NativeScript as it stands right now because I’m not a fan of learning a new and very different development technology every time a framework has a major version release. Specifically when major releases are only a year apart.

If you’re interested in checking out my NativeScript beginner level course titled NativeScript 101, you can use coupon code TELERIK10 to receive a 10% discount via the following link.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.