Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Cross-Platform Native Apps With A Single Code Set Using Telerik NativeScript

Mobile applications are now a critical part of most enterprises, and there are many ways to create them, but what are the differences between these options and how do you choose between them? Do you choose to create native applications as Google and Apple intend? Do you choose to develop a mobile web hybrid application? Or do you find a middle ground?

We’re going to look at some of the common problems with developing mobile applications, both native and hybrid, and how NativeScript by Telerik fills the gap. We’ll proceed to develop a NativeScript Android and iOS application from scratch (using the supplied source code1), and then convert the same application to use the bleeding-edge Angular 2 JavaScript framework.

Further Reading on SmashingMag: Link

Going forward it is probably a good idea to know some information on who I am. I am an application developer that has been developing mobile applications as a hobby for the past five years. My mobile application projects were developed using a variety of technologies including native, Apache Cordova based frameworks, and NativeScript. I do not work for or have partnerships with any of the companies mentioned in this article. I am a tech enthusiast telling my story about mobile application development.

What’s The Problem With Traditional App Development? Link

The Android marketplace, currently known as Google Play, launched in 2009, and the iTunes App Store launched in 2008. These opened the door to a new kind of software development. Developers could create an application for either platform and sell it in the app store.

Back then, if someone wanted to develop an iOS application, they would need to do so using the Objective-C programming language. Now, of course, Swift is an option for developing iOS applications as well. When it comes to Android applications, they could and still can be developed using Java.

Let’s go through a simple example. Let’s look at how to find an application’s version for Android:

import android.content.pm.PackageInfo;
import android.content.pm.PackageManager;

PackageInfo packageInfo = getApplicationContext()
    .getPackageManager()
    .getPackageInfo(getApplicationContext().getPackageName(), PackageManager.GET_META_DATA);

System.out.println(packageInfo.versionCode);

To accomplish the same thing in Objective-C for an iOS application, the following would be done:

NSString *version = [[NSBundle mainBundle] objectForInfoDictionaryKey: @"CFBundleShortVersionString"];
NSLog(@"%@", version);

The problem here is that you need to know at least two different programming languages, one for each platform, to be able to develop applications that support both Android and iOS. For an independent or hobbyist developer, this could be time-consuming, and for an enterprise, hiring for the multi-platform skill sets could get expensive. After all, supporting only one mobile platform is no longer a good idea.

This is where hybrid mobile applications come into play.

What’s The Problem With Hybrid App Development? Link

Developing hybrid mobile applications isn’t anything new. PhoneGap, which has now split to become PhoneGap and Apache Cordova, came into existence in 2009. Hybrid frameworks such as Apache Cordova set out to make it easier for developers to create mobile applications by allowing them to use web technologies, namely CSS3, HTML5 and JavaScript. Many developers are already familiar with these technologies. By using web technologies, these frameworks solved the problem of developers needing to know specific platform languages (Objective-C and Java), as well as the platform APIs. Android and iOS applications could be created from the same code set.

Let’s continue our example of finding the application version, but this time with Apache Cordova and JavaScript.

cordova.getAppVersion.getVersionNumber().then(function(version) {
    console.log(version);
});

This snippet will find the application version for both Android and iOS. This reduces the number of languages one needs to know, as well as the need for developer diversity. Instead of two developers developing for two platforms, you have one developing for both.

The problem with most of these hybrid frameworks is that they rely heavily on the web view of the device. Not all web views are treated equally, which results in an application performing unpredictably on the thousands of devices that exist. Old devices might not be able to process web code as quickly as new devices.

This is where NativeScript applications come into play.

What Is NativeScript, And How Does It Solve These Problems? Link

NativeScript is an open-source, cross-platform, mobile-development framework that uses common web technologies, as Apache Cordova does, to develop native Android and iOS applications that share a single code set — emphasis on native and single code set.

Like Apache Cordova, NativeScript uses JavaScript and a subset of CSS to create iOS and Android applications. The core difference here is in the user interface.

The user interface of a NativeScript application is designed in XML markup instead of HTML. While similar, they are not quite the same markup languages. XML is converted to the Android and iOS native equivalents at compile time, rather rendering in a web view, which has potentially poor performance on various devices. In other words, applications designed with NativeScript are rendered as native code, rather than parsed in a web view.

Take the following snippet, which continues the task of finding an application’s version:

appversion.getVersionName().then(function(version) {
    console.log(version);
});

Writing this snippet is easier than writing the equivalents in Java and Objective-C and not too different from the equivalent in Apache Cordova. The main difference is that no web view is involved.

But why did I decide to dabble with NativeScript when there are similar cross platform native technologies like Xamarin or React Native? For one, I don’t know ReactJS and I am not very strong with C#, both critical in the use of Xamarin and React Native. The most important selling point to me, which I explain towards the bottom of the article, is NativeScript’s ability to support the Angular 2 JavaScript framework. Angular 2 is a very well constructed framework, created by Google, and having the option to use it is fantastic.

So, how does one create a NativeScript application?

Creating Native Android And iOS Apps With NativeScript Link

NativeScript applications can be created on Mac, Linux and Windows computers with minimal configuration. We’ll see how to build an application that allows for user input in a popup dialog.

Android and iOS app built with NativeScript5
Android and iOS apps built with NativeScript. (Image: Nic Raboy6) (View large version7)

Installing The Dependencies Link

Although NativeScript applications are developed in JavaScript, XML and a subset of CSS, the NativeScript command-line interface (CLI) is required for managing and building projects. The node package manager (npm), which is conveniently bundled with Node.js8, is required to install the NativeScript CLI9.

With Node.js installed, execute the following from the command prompt (Windows) or terminal (Mac and Linux):

npm install -g nativescript

On Mac or Linux, the use of sudo is typically required.

The NativeScript CLI isn’t the only requirement. To build an Android application, Java and the Android SDK10 must first be installed. Android applications can be built from Mac, Linux or Windows machines. To build an iOS application, Xcode and the iOS development tools must be installed. The catch here is that iOS applications can only be built on a Mac.

Creating A New Project For Android And iOS Link

With the NativeScript dependencies installed, it is time to create a new project and start developing. From the terminal or command prompt, execute the following command:

tns create SmashingProject

This command will create a new project using the base NativeScript template and JavaScript. The great thing about NativeScript, and many JavaScript frameworks in general, is that you may use TypeScript. For example, to create a TypeScript project, execute the following instead:

tns create SmashingProject --template tsc

Other templates can be found on one of Telerik’s code blogs11. They make it easy to start development in certain scenarios. Perhaps you want to develop a JavaScript application — there is a template for that. Maybe you want to develop with TypeScript — there is a template for that. And so on.

Coding For Both Platforms Link

Our new project isn’t particularly useful yet because it cannot be built for any mobile platforms. At this point, various build platforms can be added.

In the command prompt or terminal, with the project as the current working directory, execute the following:

tns platform add android
tns platform add ios

These two commands will add both the Android and iOS build platforms12. Remember that iOS can only be added on a Mac computer. Attempting to do so on a Windows or Linux computer will result in errors. In other words, Mac can build for Android and iOS, while Windows and Linux can build for Android only. This is because Apple hardware and software are proprietary, a benefit to people who own a Mac.

With the project created and the build platforms added, we can start developing.

Understanding the Model, View, View Model (MVVM) Structure Link

Before we get into the code, it is important to understand the model, view, view model (MVVN) structure that NativeScript follows. Each component can be described as follows:

  • The model can be thought of as an application domain model13. All of the business and validation logic happens in this file.
  • The view is the UI layer of the NativeScript application. It is built with a combination of XML markup and a subset of CSS14. Even though CSS can be used to design the user interface, not all CSS properties are available for use. This further reminds us that NativeScript applications are not web applications.
  • The view model contains properties, functions and data that are exposed to the application view. For example, suppose the view has a form with various text fields and a button. These text fields and button would be bound to the view model. When the button is clicked, a function from within the view model would be called. The values of the text fields would be accessible via the view model as well.

Each screen of a NativeScript application typically has its own MVVM, and breaking this up keeps the code clean. In our example project, add the following to the freshly created NativeScript project:

app/views/home/home.xml
app/views/home/home.js
app/views/home/home-view-model.js

These files represent the first page of the application.

Data-Binding With Observables Link

The properties, functions and other data elements found in a view model are exposed via an observable object or array. An observable15 can be thought of data that appears over time, asynchronously. By using observables, the UI knows that the data in them isn’t finalized and that it can change at any time. This becomes useful if the data changes either in the front end or back end of the application.

Let’s look at the view model for the project. Open app/views/home/home-view-model.js and include the following code:

var Observable = require("data/observable").Observable;

function createViewModel() {
    var viewModel = new Observable();
    viewModel.firstname = "";
    viewModel.lastname = "";

    viewModel.submit = function() {
        alert(this.firstname + " " + this.lastname);
    }

    return viewModel;
}

exports.createViewModel = createViewModel;

The view model returns an observable with firstname and lastname properties, as well as a single submit function. Anything in this observable can be accessed from the UI.

Creating That Fancy UI in Half the Time Link

The UI found in the app/views/home/home.xml file will contain a basic form, with two input fields and a button. Open it and include the following:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <StackLayout>
        <Label text="First Name:"></Label>
        <TextField text="{{ firstname }}"></TextField>
        <Label text="Last Name:"></Label>
        <TextField text="{{ lastname }}"></TextField>
        <Button text="Submit" tap="{{ submit }}"></Button>
    </StackLayout>
</Page>

The Label16 tags represent static text in the UI. The TextField17 tags represent form fields that accept user input. And the Button18 tags represent a tappable entity. The containing StackLayout19 represents a vertically aligned group of UI elements.

Anything in braces is bound to the view model. Imagine trying to create this UI using Android’s XML template system or Xcode’s storyboard editor. It would probably take a lot longer, with more source code.

Bringing the View and View Model Together With a Model Link

The view and view model don’t do much alone. They need to be brought together with a NativeScript model. This model is found in the app/views/home/home.js file. Open it and include the following:

var createViewModel = require("./home-view-model").createViewModel;

function onNavigatingTo(args) {
    var page = args.object;
    page.bindingContext = createViewModel();
}

exports.onNavigatingTo = onNavigatingTo;

The view model is bound to the page via the bindingContext.

Defining the First Page of the Application Link

The application MVVM was created, but NativeScript doesn’t know about it yet. To define the home view as the first page of the application, it must first be set in the application’s Bootstrap file. Open app/app.js and include the following code:

var application = require("application");
application.start({ moduleName: "views/home/home" });

Other global application logic can be placed in this file as well.

Running The NativeScript App Link

With the application created, it can now be run on a device or in a simulator. Android and iOS simulators are not available immediately when you install Xcode or the Android SDK. Make sure to download one beforehand.

Be aware of a few commands when you try to run the application.

tns build [platform]

This command will build the application20 for either iOS or Android. It will not install the application or run it. To kill two birds with one stone, you can build and run the application with the following:

tns run [platform]

This command will install the application to a device, not a simulator. If you don’t have a physical Android or iOS device, adding the --emulator tag to the command will launch a simulator, which can be tested locally on your Mac, Linux or Windows computer.

During the development phase, the application will feel like it takes ages to rebuild. NativeScript has a live-reload feature that refreshes the device or simulator nearly instantly after you hit the save button. It can be used like so:

tns livesync [platform] --emulator --watch

This command watches for code changes and live-syncs21 them to the simulator — very convenient during development.

Take The NativeScript App To The Next Level With Angular 2 Link

As of NativeScript 1.7, Angular 2 is supported, but not the default method of development as seen above. You might choose to create a NativeScript application with Angular 2 rather than vanilla JavaScript if you want to share application logic between a web application and a NativeScript application. The Angular 2 framework can be carried between web and mobile, making it very convenient and easy to maintain.

Let’s create an Angular 2 NativeScript app with the same goal as our previous example.

Create a new Angular 2 project by executing the following from the command prompt or terminal:

tns create SmashingAngular --ng

Notice this time that the template is the Angular 2 template, which includes all necessary dependencies for building an Angular 2 NativeScript application.

Add the appropriate build platforms to the project by executing the following, keeping in mind that iOS needs a Mac for development:

tns platform add ios
tns platform add android

The Angular 2 template doesn’t work off of an MVVM structure like the previous application. Instead, it has only an XML file and TypeScript component. Create the following files and directories in the project:

app/views/home/home.ts
app/views/home/home.xml

The application logic found in the app/views/home/home.ts file will look like this:

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

@Component({
    selector: "my-app",
    templateUrl: "./views/home/home.xml",
})
export class Home {

    public firstname: string;
    public lastname: string;

    constructor() {
        this.firstname = "";
        this.lastname = "";
    }

    public submit() {
        alert(this.firstname + " " + this.lastname);
    }

}

The TypeScript component pairs with the app/views/home/home.xml file and contains two scope variables that can be bound to the UI. When the submit function is called, an alert will appear presenting whatever the two variables contain.

The UI file paired to this component looks like the following:

<StackLayout orientation="vertical">
    <Label text="First Name:"></Label>
    <TextField [(ngModel)]="firstname"></TextField>
    <Label text="Last Name:"></Label>
    <TextField [(ngModel)]="lastname"></TextField>
    <Button text="Submit" (tap)="submit()"></Button>
</StackLayout>

The use of ngModel is common in Angular applications. It is how bindings are accomplished between the UI and the application component.

Conclusion Link

NativeScript fills the gap in Java and Objective-C development, as well as the hybrid web development facilitated by frameworks such as Apache Cordova. Instead of developing Android applications with Java and iOS applications with Objective-C, we can create applications from a single code set, made up of JavaScript and XML. The applications are compiled to native applications, rather than running as low-performance web views.

NativeScript offers several ways to develop applications, including the bleeding-edge Angular 2 JavaScript framework.

Resources Link

(da, ml, al, vf)

Footnotes Link

  1. 1 http://provide.smashingmagazine.com/2016_nicraboy_sourcecode.zip
  2. 2 https://www.smashingmagazine.com/2014/10/providing-a-native-experience-with-web-technologies/
  3. 3 https://www.smashingmagazine.com/2016/08/test-automation-frameworks-for-react-native-apps/
  4. 4 https://www.smashingmagazine.com/2016/04/consider-react-native-mobile-app/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/05/telerik-nativscript-opt.png
  6. 6 https://www.thepolyglotdeveloper.com
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/05/telerik-nativscript-opt.png
  8. 8 https://nodejs.org
  9. 9 http://docs.nativescript.org/angular/start/quick-setup.html#the-nativescript-cli
  10. 10 https://developer.android.com/studio/index.html
  11. 11 https://www.tjvantoll.com/2016/02/22/creating-nativescript-templates/
  12. 12 http://docs.nativescript.org/angular/tutorial/ng-chapter-1.html#13-add-target-development-platforms
  13. 13 https://en.wikipedia.org/wiki/Domain_model
  14. 14 https://docs.nativescript.org/ui/styling
  15. 15 https://docs.nativescript.org/cookbook/data/observable
  16. 16 https://docs.nativescript.org/cookbook/ui/label
  17. 17 https://docs.nativescript.org/cookbook/ui/text-field
  18. 18 https://docs.nativescript.org/cookbook/ui/button
  19. 19 https://docs.nativescript.org/cookbook/ui/layouts/stack-layout
  20. 20 http://docs.nativescript.org/angular/tutorial/ng-chapter-1.html#14-running-your-app
  21. 21 http://docs.nativescript.org/angular/tutorial/ng-chapter-1.html#15-development-workflow
  22. 22 https://www.nativescript.org
  23. 23 https://www.angular.io/
  24. 24 https://www.nodejs.org

↑ Back to top Tweet itShare on Facebook

Nic Raboy is a skilled application developer that has released several native and hybrid mobile applications to iTunes and Google Play. He writes about his development experiences related to making web and mobile app development easier to understand and has experience in Android, Node.js, Apache Cordova, Java, NoSQL, SQL, PHP, NativeScript, and Unity3D.

  1. 1

    Bijaya Ghosh

    July 29, 2016 11:29 am

    Thanks for sharing the news. Are you looking for web development, web design and mobile application development services ? Please visit our official website :) Aarna IT Solutions.

    -46
  2. 2

    or use xamarin, a lot easier, better toolsets, and targets more platforms.

    -13
    • 3

      Xamarin is a good solution as well, but it is more for the people interested in using C#. There is a large Angular and JavaScript community that would prefer not to use C#, which makes this a valid option.

      Best,

      8
    • 4

      I worked with C# in the past 10 years (and I still do), but Xamarin has a lot of attrition, the tooling is not so good as propaganda proclaims, C# is great language, but Xamarin is not so good.
      the NativeScript/Typescript programming experience is so simple and works so well.

      13
  3. 5

    Scott Hendersson

    July 29, 2016 12:17 pm

    Hello Nic!

    I have checked your blog and I found several useful articles and reviews for me, thank you so much for your professional view and practical content. I like the way you publish your material, always sapid and up-to-date! Already advised your blog to my colleagues. Do you need fresh ideas for your new posts? I recently made a small evaluation of the market for Mobile App Development Platforms.

    Best regards
    Scott

    0
  4. 7

    Tnx for the overview.

    @jim can xamarin be used for ios as well

    1
    • 8

      You might want to check out the detailed write-up on the differences between Xamarin and NativeScript.

      4
      • 9

        “Since NativeScript is actually shipping the JavaScript that you write, it is able to update applications in real time as you save files without having to rebuild the application.”

        “You can see that NativeScript is roughly 3x faster than Xamarin when it comes to working with large data sets.”

        SOLD!

        3
  5. 10

    FYI There is Codename One which predated the Telerik effort. It’s Java 8 based so should be familiar to most developers and provides all of the advantages (IDE integration, cloud build etc.).
    E.g. your version sample would be written with a single line with no “futures”.

    Personally I prefer it, I think Native Script is interesting but it is inherently flawed due to its peer component approach.

    2
    • 11

      I’ve been using Codenameone for 3 years. It’s the best Cross-platform tool ever. I tried to use Cordova but had problems with having a mac before I could build an iOS app. Codenameone compiles to a native code which could be run on x-code or Android Studio, that is an added advantage. The support and the large community of developers is so impressive. The fact that it’s a complete open source platform, makes it easier for other developers to contribute or improve any useful feature. Coming from a Java and Android background, I don’t think I will ever want to try any other cross-platform tool. Some of the things that Codenameone offers are:

      * Build for 8 different platforms iOS, Android, Blackberry, J2Me, Web, Windows Phone, Windows Desktop and Mac O.

      * No Mac required to build iOS apps. You even generate your certificates and add testing devices from within codenameone environment.

      * Plugin for all Java IDEs, Netbeans, Eclipse & IntelliJ.

      * Access to native code.

      * Open Source platform.

      * Easy to learn to use and requires minimal Java knowledge.

      * A lot of demos, great developer guide and constant blogging about new features and “how do I”

      * Quick response from creators and other experienced codenameone developers.

      * Ability to port an existing android source code and continue working on it.

      * Ability to import PhoneGap and Cordova projects into codenameone and continue working on them.

      * Great drag and drop Designer tool and ability to handcode your UI.

      * A lot more that I can’t think of at the moment.

      4
    • 12

      One more important thing I left out, you can write some native code and access this code in Codenameone through a feature called native interface. Why is this necessary? Let’s take for example, you need an iOS that makes use of Fingerprint to access the app, this feature is particularly related to some iPhone… you can write a code for that functionality using Objective-C and let your Codenameone app access this functionality without much hassle.

      1
  6. 13

    Honestly, I don’t see a point here
    If you still need mac to build iOS app and can’t build UWP from it then, well, it makes you create native android app in js
    okay, it makes sense if you are indeed js ninja knowing nothing about java or cs, but as multiplatform solution? the biggest flaw is it’s actually single platform

    0
  7. 14

    Mayeul du Pradel

    August 8, 2016 2:49 pm

    Hi Nic,

    very interesting article about Native Script, that before reading, I didn’t know very well…

    I think it’s more difficult to learn the MVVM model of NativeScript than React-Native (and React). Same problem if I use Angular 2.
    But anyway, it’s probably again here a questions of programming-languages’s preferences… Like when we compared React-Native (react) with Xamarin (C#). The 3 are more or less the same i think…

    1
  8. 15

    Hi Nic,

    While creating Cordova based apps, we need to use (and sometimes create) some plugins when we need the native device capabilities. I assume same is the case with NativeSccript. If so, there are a lot of open source plugins available for Cordova that make it easy to develop faster. How is it for NativeScript?

    1
  9. 16

    Any thoughts on Kony Visualizer?

    It has a great design & development tool and a plethora of Cross platform APIs. Development of apps is through JavaScript and is very simple with their APIs. No need to learn MVVM, ReactJS or Angular2 like frameworks.

    2
  10. 17

    The React Native framework works well, too, even if compared to its alternatives, notably Xamarin and Native Script. It’s better though to have a bunch of options to choose from. When I had an app to develop, I turned to Iflexion. The company enlightened me on my options and I’ve decided to go with React Native. I’m pretty satisfied with the result!

    1

↑ Back to top