NativeScript: Mobile Applications for the Angular Developer

In this chapter, we’re going to walk through how to build your first NativeScript app. NativeScript is a huge topic that could warrant it’s own book.

Here we’re going to explain NativeScript for the Angular Developer. By the end of this chapter you’ll understand the differences between NativeScript and a ‘regular’ Angular web-app, and have the foundation to be creating your own native apps using NativeScript and Angular.

Being that Angular was designed to be unspecific to any particular deployment platform, you can take much of your web application code and reuse it beyond just the web.

It is the norm for businesses to have not only a fully functional web application, but a mobile application to compliment it as well. A few years back, companies would need to spend countless dollars to fund a team of iOS and Android developers to accomplish the same task of creating a mobile application.

With Angular, mobile development becomes not only cheaper, but more maintainable and efficient.

What is NativeScript?

NativeScript is a cross platform mobile development framework that leverages technologies you already know: JavaScript, CSS, and of course, Angular.

With NativeScript, developers can build native iOS and Android applications using a single shared code base.

Where NativeScript Differs from Other Popular Frameworks

NativeScript isn’t the first or only framework to make it easy to develop Android and iOS applications using a single code base. Mobile development frameworks can be separated into two: hybrid mobile and native mobile.

Hybrid Mobile Applications

Hybrid mobile frameworks are those such as Ionic Framework, PhoneGap, Apache Cordova, and Onsen UI. These are frameworks that allow you to develop mobile applications using web technologies, but render these mobile applications in what’s called a web view. A web view is essentially a web browser and it allows you to use HTML with full DOM support for all your component rendering.

The conveniences of a web view is not without limitation. The number one flaw in using a web view to render mobile applications comes down to performance. Not all mobile devices are treated as equal even if they have the same version of Android or iOS. There are thousands of different mobile handsets in existence all with varying hardware and processing power, not to mention all the custom flavors of Android. Because of this diversity, the consistency in web view performance is very poor, leaving some people with an amazing user experience and some with hardly useable applications.

Native Mobile Applications

Native mobile applications built with frameworks such as NativeScript, React Native, and Xamarin do not render in a web view. These are applications that use the native UI components that Google and Apple made available to developers and as a result don’t suffer from performance instability.

So how does one choose between the available native mobile frameworks? The simple answer is to choose between each of their underlying development technologies. React Native uses ReactJS, a common JavaScript framework for web developers, and Xamarin uses C#, a common development language for .NET developers. NativeScript of course uses Angular.

As an Angular developer, it makes sense to go the NativeScript route because we’ll get fantastic native performance while keeping our familiar Angular development experience.

What are the System and Development Requirements for NativeScript?

NativeScript doesn’t have any system requirements beyond what you’d need when developing Objective-C based iOS applications or Java based Android applications.

For example, let’s say you wanted to build and deploy an Android application developed with NativeScript. You would need at least the following:

• Windows, Linux, or Mac
• Java Development Kit (JDK) 8+
• 4GB of hard drive space
• 4GB of RAM

The above system and software requirements are what’s necessary for installing and using the Android SDK.

If you wanted to build and deploy and iOS application with NativeScript, the requirements are a bit different:

• Mac
• Xcode 7+
• 5GB of hard drive space
• 4GB of RAM

Notice the main difference here is that a Mac is required. While you can develop Android and iOS applications with NativeScript, you cannot actually build and deploy iOS applications unless you’re using a Mac. This is a limitation that exists because of Apple.

From a development perspective, NativeScript uses the Node Package Manager (NPM) a tool that is part of Node.js and something you probably already have installed as an Angular developer. With NPM, the NativeScript CLI can be installed using the following command:

  npm install -g nativescript

A list of available commands can be found by running tns --help or tns help if you wish to view them in a web browser rather than the Command Prompt or Terminal.

For more information on installing NativeScript for Mac, Windows, and Linux, visit the NativeScript installation documentation.

With the NativeScript CLI, native mobile applications can be developed with Angular.

Creating your First Mobile Application with NativeScript and Angular

To be successful in developing NativeScript applications with Angular, you should already have the NativeScript CLI tool installed and either Xcode or the Android SDK installed, or both.

The goal here is to become familiar with the mobile application creation process and some of the UX and UI differences between an Angular web application and an Angular NativeScript application.

Using the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:

  tns create NgProject --ng

The above command will create a project directory, NgProject, wherever your command line’s active directory is located. The --ng flag indicates that we want to create an Angular with TypeScript project. It is necessary to use the --ng flag because NativeScript doesn’t require Angular to build mobile applications. It is an option, one that we’re going to take full advantage of.

Adding Build Platforms for Cross Platform Deployment

While a project has been created and can be actively developed, there are no build platforms such as Android or iOS enabled for building and deployment.

To build for a specific platform, it must first be added. Using the NativeScript CLI, execute the following:

  tns platform add [platform]

Just swap out [platform] with either android or ios depending on which you wish to add, remembering that iOS requires a Mac with Xcode installed.

Building and Testing for Android and iOS

When the application is ready for testing or deployment to the app stores, we can make use of a few NativeScript CLI commands. Before deployment, you’ll probably want to test the application on your device or emulator. Using the command line, execute the following to emulate the application:

  tns emulate [platform]

Swapping [platform] with android or ios will launch the application in the specified emulator. To test the application on a device, swap out emulate with the word run while your device is connected to your development machine.

  tns run [platform]

The emulation process can often take a bit of time because a lot of recompilation happens in the process. To make development more efficient, the NativeScript CLI offers live-reload functionality called live-sync. We can utilize this feature by executing the following command in our terminal:

  tns livesync [platform] --emulator --watch

After swapping [platform] with either android or ios, changes made to TypeScript, CSS, or HTML files will be automatically deployed to the Android or iOS simulator, much faster than if you were to strictly emulate the application.

When it comes to deploying our app to the app store, we can use the following command:

  tns build [platform]

After replacing [platform] with the appropriate platform, the binaries and build packages will be created.

Installing JavaScript, Android, and iOS Plugins and Packages

Like with any Angular web application, there are external components available to make the development process easier. This applies to NativeScript applications as well.

Most JavaScript packages will work in a NativeScript application as long as there isn’t a dependency on the DOM. As previously mentioned, NativeScript being a native framework, doesn’t use a web view and has no concept of a DOM. JavaScript libraries can be included via NPM, for example:

  npm install jssha --save

The above would install the JavaScript hashing library, jsSHA, to your Angular NativeScript project.

There are native plugins available strictly for NativeScript as well. These are typically plugins that make use of native device features or interface with Android or iOS directly in some fashion.

Take, for example, the NativeScript SQLite plugin:

  tns plugin add nativescript-sqlite

The above command will install SQLite functionality for both Android and iOS.

Understanding the Web to NativeScript UI and UX Differences

As a web developer you’re probably very familiar with HTML and common design practices for building attractive, responsive, and overall great web applications. With NativeScript we’re using Angular and CSS, but we’re not using HTML. Instead we are using XML which won’t have the same markup tags that you’d find in HTML.

So how do you take your UI and UX skills to mobile?

There are a few things that need to be taken into consideration when designing your mobile application. You need to worry about the screen layout and the screen components.

Planning the NativeScript Page Layout

When designing a web application, common layout components include <div> tags and <table> tags. Generally if you want a grid of rows and columns you’d use a table and if you wanted a stack of components you’d use a div because it acted as a container.

In NativeScript, you don’t have the <div> and <table> tags, but you have something similar. Instead you have the <StackLayout> and <GridLayout> tags.

So let’s compare web and NativeScript.

Let’s say we wanted to contain a bunch of HTML components on a website. You might do something like the following:

  <div>
    <span>Nic Raboy was here</span>
    <span>https://www.thepolyglotdeveloper.com</span>
</div>

To accomplish the same in a NativeScript application, you’d do the following:

  <StackLayout>
    <Label text="Nic Raboy was here"></Label>
    <Label text="https://www.thepolyglotdeveloper.com"></Label>
</StackLayout>

In both the web and NativeScript scenarios you can nest the <div> and <StackLayout> tags as appropriate to create more component groupings.

The use of grids in NativeScript and on the web are a bit different in structure, but the same in concept. Take the following HTML:

  <table>
    <tr>
        <td>Nic</td>
        <td>Raboy</td>
    </tr>
    <tr>
        <td>Burke</td>
        <td>Holland</td>
    </tr>
</table>

In NativeScript, instead of defining rows and columns with <tr> and <td> tags something a little different happens:

  <GridLayout rows="auto, auto" columns="*, *">
    <Label text="Nic" row="0" col="0"></Label>
    <Label text="Raboy" row="0" col="1"></Label>
    <Label text="Burke" row="1" col="0"></Label>
    <Label text="Holland" row="1" col="1"></Label>
</GridLayout>

In the above <GridLayout> we define that we want two rows that take the height of their child components and two columns that stretch evenly to fill the screen.

But what about a flexbox, commonly found on the web?

When building websites, there is the opportunity to set <div> tags, or any other container, to have a CSS property of display: flex. This allows websites to behave appropriately for different screen sizes. Nearly the same can be used in NativeScript using the <FlexboxLayout> as a container, which is nearly the same as the web’s implementation.