Give That Slow Hybrid Mobile App A Native Performance Boost With NativeScript

When it comes to hybrid mobile application development, there is always discussion around the performance of said applications. While hybrid mobile applications have come a long way in terms of performance since the early days, they still can’t quite live up to the performance expectations that are delivered in a native application.

We’re going to take a look at why hybrid applications suffer in the speed department and how other similar frameworks such as NativeScript can take your applications to the next level without severe changes to design or development.

Why Hybrid Mobile Applications are Slow

Hybrid mobile applications were a great idea when the need for mobile applications was booming. Being able to create an application for Android and iOS using a single and widely known set of programming and design technologies was huge.

At a high level, hybrid mobile applications are possible because you are developing web applications that are packaged and rendered via a native WebView component on iOS and Android. Think of the WebView component as a mobile web browser, kind of like how you’d see a desktop web browser. You use the web browser to display your web application. It is the same concept in a hybrid mobile application, except the application is all bundled into a familiar mobile binary, accessible in Google Play and iTunes.

Running an application within an application does not come without penalty. There are a few things that can affect the performance of a hybrid mobile application:

1. Components and logic in a hybrid application do not directly interact with the device operating system, but instead through the WebView component which then communicates with the other components.
2. There are many platform and platform versions circulating, all of which behave differently when it comes to the WebView component.
3. The device is too old and the hardware is not capable.
4. Code that has been written poorly or has not been optimized by the developer.

Adding extra complexity to any application is going to have negative side effects in terms of consistency on Android and iOS devices.

Boosting Performance with a Native Mobile Framework like NativeScript

If you’re looking for a cross-platform solution to building mobile applications with web technologies like JavaScript, hybrid apps are not the only solution. There are native frameworks that exist that behave a bit differently from hybrid, in the sense that they are native.

Take my personal favorite for example, NativeScript.

NativeScript is a cross-platform native framework. Instead of developing a web application that is bundled and deployed as a WebView component when ran, it is transpiled into native components and code. This means that when you compile your application, native output is produced before building the iOS or Android application binary. Not to mention that you’re using native components at this point instead of working with the WebView at all.

Seeing the Differences in Development by Example

While we won’t go over all the ins and outs of development using a hybrid framework and NativeScript, we’ll take a moment to see what it takes to build an application.

For this example we’ll use Ionic Framework as our hybrid framework and NativeScript as our native framework. Remember, there are other frameworks out there for hybrid such as Apache Cordova and Onsen UI, just like there are other frameworks out there for native such as React Native and Xamarin.

Assuming that you’ve installed the Ionic CLI, execute the following:

ionic start ionic-project blank

The above command will create a project called ionic-project using the blank template.

For consistency between the two frameworks, we’re going to render a list of data. Rending large amounts of data is the most basic example for demonstrating poor performance in a hybrid application, but not an uncommon requirement for mobile applications.

Open the project’s src/pages/home/home.ts file and include the following TypeScript code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    public items: Array<string>;

    public constructor(public navCtrl: NavController) {
        this.items = [];
        let sample = ["Ionic Framework", "NativeScript", "React Native", "Flutter", "Xamarin", "Apache Cordova"];
        for(let i = 0; i < 10000; i++) {
            for(let j = 0; j < sample.length; j++) {
                this.items.push(sample[j]);
            }
        }
    }

}

As you can see we’re creating a large array of data without obtaining it from a remote source or local database. The next step is to render the items data on the screen.

Open the project’s src/pages/home/home.html file and include the following HTML markup:

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <button ion-item *ngFor="let item of items">
            {{ item }}
        </button>
    </ion-list>
</ion-content>

When you deploy the above application, you’re going to get variable results. The devices with the best hardware may be able to handle it alright, but devices with average hardware, particularly Android, will stutter when scrolling through the list.

Remember, the Ionic Framework application is a bunch of heavily styled web components, not native components. The native ListView component has special memory management and other optimizations that aren’t exactly found in web.

Now let’s look at the NativeScript equivalent. Assuming that you’ve got the NativeScript CLI installed, execute the following:

tns create ns-project --angular

The above command will create a NativeScript project that uses the Angular framework. This is to be more in line with Ionic Framework, but NativeScript can use pure JavaScript or TypeScript as well as Vue.js. It isn’t limited to Angular.

Open the project’s app/app.component.ts file and include the following TypeScript code:

import { Component } from "@angular/core";

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent {

    public items: Array<string>;

    public constructor() {
        this.items = [];
        let sample = ["Ionic Framework", "NativeScript", "React Native", "Flutter", "Xamarin", "Apache Cordova"];
        for(let i = 0; i < 10000; i++) {
            for(let j = 0; j < sample.length; j++) {
                this.items.push(sample[j]);
            }
        }
    }

}

You can see that it is more or less the same as what we saw with Ionic Framework. Since the logic is the same, it is easy to transition from hybrid to native.

Now open the project’s app/app.component.html file and include the following XML markup:

<StackLayout class="page">
    <ListView [items]="items">
        <ng-template let-item="item">
            <StackLayout>
                <Label text="{{ item }}"></Label>
            </StackLayout>
        </ng-template>
    </ListView>
</StackLayout>

XML is a little different than HTML, but it isn’t difficult and in the end you’ll get a much more performant mobile application with NativeScript. The NativeScript ListView is mapped to the native iOS and Android ListView which takes advantage of all platform optimizations.

Conclusion

Hybrid applications are convenient to build because you can build for iOS and Android with a common set of web technologies. However, hybrid mobile applications are only possible because of the WebView component which is known to have performance issues and inconsistencies across devices and platforms.

Switching your hybrid mobile application to NativeScript isn’t difficult, but will lead to huge performance gains, such that your users will greatly appreciate it.

To learn more about switching from hybrid to native, check out the book I wrote titled, Upgrading Hybrid Apps to Native with NativeScript. You can also check out my personal hybrid and native story in a previous article I wrote titled, Native to Hybrid and Back Again.

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.