fbpx Skip to content

Aquent | DEV6

Ionic 2 Vs. NativeScript

Written by: Michael Vano
ionic2 vs native script

The popularity of iOS and Android apps has only been increasing, and with it, the need for creating apps efficiently is in more demand.

In this post, we look at two options that utilize the Angular Framework: Ionic 2 and NativeScript.

Side Note: NativeScript does have a setup to use JavaScript alone, but for this post, we’ll be looking at the Angular setup.

Both have many great features available, so we will be doing a very high-level comparison of them.

Now despite both using the Angular Framework, they both have some significant differences, which can factor into our decision for choosing one over the other.

What We Need To Know Before Starting

Ionic 2 utilizes Cordova (https://cordova.apache.org/), a “webview” or hybrid application. It’s essentially a browser inside of a mobile application. Ionic 2 compiles together a website and that website is then displayed in the webview and uses cordova plugins as a bridge to access a devices hardware.

As for NativeScript, the build we get is that an actual native application, as if it were written in Objective-C (iOS) or Java (Android). No browser or web view.

So why is this important? The main thing would be performance. Having your app wrapped inside of a browser that is inside of an app means more resources needed to run and needs extra code to bridge the webview with the devices functionality. But an app written in native code uses fewer resources and has direct access to device features.

The HTML Templates

Let’s look at a typical component in many applications: a list.

Ionic 2 takes advantage of the ES2016 standards and creates their own custom Angular components, so we end up seeing the HTML template code look like this.

<ion-list>

  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">

    {{ item }}

  </button> 

</ion-list>

Ionic 2 has custom HTML tags to create these components, which already have functionality and styling added to them, granted, you follow the structure laid out in their documentation.

With NativeScript, the templating code looks like this.

<ListView [items]="countries" (itemTap)="onItemTap($event)" class="list-group">

    <ng-template let-country="item" let-i="index" let-odd="odd" let-even="even">

        <GridLayout class="list-group-item">

            <Label [text]="country.name"></Label>

        </GridLayout>

    </ng-template>

</ListView>

(sample code take from https://docs.nativescript.org/angular/code-samples/ui/listview )

This looks more like XML rather than HTML, but NativeScript has set up the templating code to make it act like HTML tags in Angular, utilizing the “class” property and other directives. But as we can see, it does not use the familiar *ngFor directive Angular to loop through the list. Instead, it uses custom attributes like “let-country=’item’” and “let-i=’index’”.

Side Note: If we weren’t using the Angular Framework in NativeScript, and just JavaScript, we’d be creating XML files for the UI elements of our app.

JavaScript Libraries

Ionic 2, being wrapped in a webview, can use almost any JavaScript library out there. But with NativeScript, because it is not inside of a webview, it does have some restrictions. It would not work well with any JavaScript libraries that call upon Internet Browser functions or properties. Things like “window”, “screen” or “history” would not work within a Native Application as each platform has their own way of handling these kinds of actions and properties.

What You Get In The Framework

If we look through the documentation of Ionic 2 and NativeScript, we get a sense that Ionic 2 (the two right columns in black text) has a lot more to offer out of the box. Thankfully, with Angular’s ability to build and compile only the components you use, also known as “tree shaking”, it means that the finally build won’t get over bloated with all this extra code it comes with.

ionic2 and native script doc

Another thing we should note is that Ionic 2 does not necessarily cover everything that NativeScript has out of the box and vice versa. NativeScript has a “Gestures” directive, that is not present in Ionic 2, but Ionic 2 has social media plugins, like “Facebook” and “Twitter” available that NativeScript does not have. These features could be very important; depending on the type of mobile app we wish to build and the timeline in which we need to build it.

The Decision

Even though we’ve just scratched the surface of these mobile app frameworks, we can start to get an idea of what they’re capable of and some of their differences.

If we are more comfortable working with HTML elements or common Angular directives and are not planning to do an app that requires high performance, Ionic 2 maybe the better choice for us. This is especially true if we are looking to integrate social media like Facebook and Twitter into our app.

If we are planning a mobile app that is concerned with performance, then direct access to devices core functionalities is important and NativeScript maybe the way we go.

But always keep in mind that we don’t just have to be limited to just these 2 options. There are still many other mobile app frameworks out there as well, like ReactNative and jQuery Mobile. We always need to keep searching for the right one for our project. Hopefully, this blog post has given you something to work with.