Click here to Skip to main content
15,741,047 members
Articles / Web Development / HTML
Posted 13 Nov 2016

Tagged as


6 bookmarked

Getting Started with NativeScript

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
13 Nov 2016CPOL8 min read
How to get started with NativeScript

NativeScript is a framework that allows web developers to leverage their web development skills to build native mobile apps for Android and iOS (and later Windows Phone as promised by the NativeScript team). So thanks to NativeScript, if you can use JavaScript and CSS, you can build a native mobile app.

Unlike hybride mobile frameworks such as Ionic or any Cordova based framework, NativeScript doesn’t use web views but the rendering engine of the target native platform which means you get the same performance as any other native app.

What NativeScript tries to do is bridge the gap between the two worlds of hybrid and native mobile apps. It takes the best of the two worlds and mixes it into one platform but how does NativeScript achieve that?

The reuse of web skills, mainly JavaScript and CSS, and the use the rendering engine of Android or iOS (thus no need for a web view and no performance issues).

So thanks to NativeScript:

  • You can build a mobile app that’s 100% native
  • You can call native API directly from the target native platform SDK or any third party library so there is no limitation compared to a native app built by native platform languages (Java or Swift).
  • You can build cross platform apps with nearly the same/or sometimes the same code base.
  • You have powerful tools at your hand, JavaScript, TypeScript, Angular 2.
  • You can use NPM/Node.js modules in your app but only modules which don’t require or depend on some browser API like the DOM.
  • You can use a subset of CSS to style your app UI.
  • You have no web view so no performance issues related to web views.
  • You can re-use CocoaPods and Gradle packages.
  • You can share the code between mobile and web apps.

Angular 2 and NativeScript?

Angular 2 is the newest JavaScript framework built by Google. It’s the successor of Angular.js (version 1.x) but was rewritten completely from scratch. Unlike Angular.js, Angular 2 can be used outside of web browsers and doesn't require the DOM so it can be leveraged to build applications for other platforms like Desktop or mobile devices and not just the web.

NativeScript doesn’t require Angular 2 and you can use it to build your mobile application with only plain JavaScript, but if you know Angular 2 why miss the power given to you to build mobile apps.

Setting Up NativeScript

So after getting some basic information about NativeScript, let's start by installing it. As any other awesome tool nowadays, NativeScript uses Node.js so you need to have it installed on your system, otherwise, you can follow this tutorial on how to install Node.js.

Next, you need to install the NativeScript CLI from npm (nodejs packager manager), just enter the following line of commands in your Windows command prompt or Linux/Mac terminal.

npm install -g nativescript

If everything goes without any installation issues, you’ll have two equivalent commands available at your disposal to work with NativeScript which are as you can guess, NativeScript and tns (Telerik NativeScript). Using one of these commands and its related subcommands, you can scaffold, build and run your NativeScript based mobile application.

Please note that native development requires special setup depending on your target platform, for example, for Android, you need to have Java installed and Android SDK and an optional Android emulator if you are not intending to use a mobile device, during development, for testing. For iOS, you need a MAC OS and you need XCode installed.

After installing the native development platform required tools, you can verify if you are ready for developing with NativeScript using the following command:

nativescript doctor

If you get “No issues were detected”, then you are ready to go.

Building Your First Mobile App With NativeScript

So go ahead and start your terminal or command prompt, then scaffold your first mobile project using nativescript cli.

nativescript create myApp --appid "com.techiediaries.myapp"

appid Is Used to Specify the Application Id

If you want to create an app based on Angular 2 add –ng switch.

nativescript create myApp --appid "com.techiediaries.myapp" --ng

Go ahead and cd into your app directory:

cd myApp

If you execute ls, you should get a directory structure similar to:

Getting started with NativeScript

All your work should be done in app where you can put your app common and platform specific code and files. After adding your code, you need to prepare your project for a target platform (Android or iOS) by executing the following command:

nativescript prepare android
nativescript prepare ios 

The prepare command does no magic. It just copies the platform specific content to each platform specific subdirectory in platforms directory so you make sure each platform gets only its specific assets.

Next, you need to add target platforms to your project so you can build your mobile application, to do that, just execute the following command:

nativescript platform add android
nativescript platform add ios 

Now you can build your app with:

nativescript build android 
nativescript build ios

After building your app, you should find your app package in:

  • platforms → android → bin (the APK for Android)
  • platforms → ios → build → emulator (Emulator build (APP) for iOS)
  • platforms → ios → build → device (Device build (IPA) for iOS)

You can also deploy your project to a device to test it during development with:

nativescript deploy android 
nativescript deploy ios 

If you don’t have a physical device at hand for testing, you can use an emulator and you can run your app in the emulator using:

nativescript emulate android 
nativescript emulate ios 

To avoid using all these commands, you can use the run command which takes care of running the three commands, prepare, build, and deploy for you.

nativescript run android 
nativescript run ios 

Or to run in emulators:

nativescript run android --emulator
nativescript run ios --emulator 

When developing, you need to see your changes on the fly and fast, so you need to livesync with:

nativescript livesync android
nativescript livesync ios 

Which works either if you are using an emulator or the actual device. NativeScript will take care of synchronizing your changes with your app. Just make your changes and be ready to see the result on your emulator or physical device connected via an USB.

Building tHe User Interface of Your Mobile App

As we mentioned before, NativeScript uses the native layout renderer of the target platform (either Android or iOS). It is different from hybrid mobile frameworks, so your application doesn’t execute in a webview and you have no HTML tags to build your app UI, instead you use a NativeScript specific XML based language that gets converted to Android or iOS specific layout language.

NativeScript Layouts

NativeScript has many layouts. A layout is a sort of a container which allows you to place ui elements/components. Different layouts have different algorithms for placing elements, you can use any layout you choose depending on your needs:

The Absolute Layout

This layout uses absolute coordinates (left, top) to place elements. To use it, you need to import the AbsoluteLayout module.

import absoluteLayoutModule = require("ui/layouts/absolute-layout");

The Grid Layout

This layout uses rows and columns to place any component. You need to import the GridLayout module with:

var layout = require("ui/layouts/grid-layout");

The Stack layout

This layout places elements stacked either horizontally or vertically. To use it, you need to import the StackLayout module with:

var StackLayout = require("ui/layouts/stack-layout").StackLayout;

The Dock Layout

This layout places elements at the edges (left, top, right, bottom). To use it, you need first to import the DockLayout module using require:

import dockModule = require("ui/layouts/dock-layout");

The Wrap Layout

This layout places ui components next to each other (horizontally or vertically) when space is available. You can set the orientation to be horizontal or vertical as you need. To use, you need to require the WrapLayout module with:

import wrapLayoutModule = require("ui/layouts/wrap-layout"); 

You have two options, either create your layouts using NativeScript XML ui language or JavaScript code. For example, let's create a simple grid layout with some Labels.

With XML:

<stacklayout orientation="vertical">
var StackLayout = require("ui/layouts/stack-layout").StackLayout;
import enums = require("ui/enums");
var stackLayout = new StackLayout();
stackLayout.orientation = enums.Orientation.horizontal;
var btn = new Button();
btn.text ="Click Me"

Can I Use Existing NPM/Nodejs Modules in My NativeScript App

The short answer is Yes, you can. As long as the module doesn’t depend or rely on a browser specific API like the DOM for example.

Using popular packages such as lodash or moment.js is very straightforward. All you need to do is install them and then require them, the process is very straightforward:

First, you need to go inside your project directory and install the npm module via normal npm install command:

npm install --save node-uuid

And then in your app code require it and start using it normally:

npm install --save node-uuid

After building your project with:

nativescript build <platform>

The ClI will copy all modules inside of node_modules folder to platforms/<platform>/assets/app/tns_modules.

The MVVM Pattern

MVVM stands for Model-View-ViewModel and it is an architectural pattern like MVC or Model-View-Controller. In fact, MVVM is just a variation of the MVC architecture which replaces the Controller component with a ViewModel component that adds features such as two data binding, the viewmodel is an observable object that observes the model and signals the changes on the model to the view so it updates itself.

MVVM helps keep the user interface and app logic separated. Using NativeScript with vanilla JavaScript requires you to understand how a MVVM pattern works and how to use it.

Using Existing Native Android/iOS Libraries with NativeScript

NativeScript allows you to use native platform libraries in your NativeScript app code without so much effort, all you need is some tweaking and configuration and then the API is ready for you to call from JavaScript code.

Installing NativeScript Plugins from NPM

Install the plugin from NPM using the CLI:

tns plugin add nativescript-physics-js

NativeScript with TypeScript

Instead of vanilla JavaScript, you can choose to use TypeScript to build your mobile application with NativeScript, you just need to install via (make sure you are under your project directory):

nativescript install typescript

And then, you can start using it.

If you don’t know what TypeScript is, then it’s just a strongly typed superset of JavaScript created by Microsoft which adds OOP (Object Oriented Programming) features to JavaScript. Lots of TypeScript features were added to JavaScript 2015/EcmaScript 6 and other features are planned to be added in the next version es6+.

NativeScript with Angular 2

Angular 2 is the latest version of Angular which is a JavaScript framework for building applications, unlike angular.js(1.x), Angular 2 can be used to build applications outside the web browser since it is independent from the DOM. Angular 2 can be used to build mobile and also desktop applications with native like speed and performance.



  • 14th November, 2016: Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Comments and Discussions

-- There are no messages in this forum --