Introduction to NativeScript

There are quite a few reasons to use cross-platform or hybrid frameworks. For starters, it’s easier to maintain a single code base.

Also, existing developer skills can be leveraged to develop apps. Quite a few hybrid frameworks are available for developers. The majority of those are based on Apache Cordova or WebView-based. Then there is C# based Xamarin which is a cross-compiled framework. NativeScript is one such platform.

NativeScript is developed and maintained by Progress Telerik. It is a JIT-compiled framework and its code runs inside a JS Virtual Machine, which is bundled together with the application. It uses v8 runtime for Android and JavaScriptCore for iOS. As a reference, React Native uses JavaScriptCore on both Android and iOS platforms. Read our comparison between NativeScript, React Native, and Ionic.

NativeScript uses a combination of XML, JS, and CSS for development. Official Support for Angular and TypeScript is also available. At the time of writing, community support for Vue is available.

It currently supports the following stacks:

• JavaScript

• TypeScript

• Angular

• Vue

For the purposes of this tutorial, we will consider the Angular stack from this point forward.

NativeScript 5.0

NativeScript 5.0 was released by Progress Telerik. Improvements in this version are more relevant to tooling and developer experience. Features in this version are listed below:

• Hot Module Replacement (HMR).

• Interactive tns create command.

• Safe Area support in iOS.

• Create plugins with the tns plugin.

• Support for different app IDs for iOS and Android.

• Vue.js support for all NativeScript UI components.

• (breaking-change) Migration to support Android library APIs v28.

• (breaking-change) Dropped support for X-Code 8 & iOS 10.12 Sierra.
  
  

Tooling

This is the area where NativeScript shines. NativeScript has outstanding tooling support. You can work with NativeScript in 2 ways.

On a Local machine

• Install CLI / GUI Tool

• Setup Work Environment (Android/iOS works).

• Fire your favorite IDE (NativeScript has good support for Visual Studio code).

• Code - Debug - Test on Live Device/Emulator.

We can install NativeScript using the following command

npm install -g nativescript

The CLI can perform the following tasks:

• Create project from templates (tns install)

• Run project on devices (tns run)

• Debug applications (tns debug)

• Manage Platforms (tns platform)

• Manage Plugins (tns plugin)

• Check work environment (tns doctor)

• Setup work environment (tns setup)

• Support for ChromeDev Tools & Safari Inspect

You can also use NativeScript Sidekick to manage projects. Sidekick is an Electron app that provides a GUI interface for the NativeScript CLI. As with most Electron Apps, memory consumption is an issue. It is recommended to have at least 8 GB of RAM.

Using a WebIDE

Alternatively, NativeScript has a WebIDE known as NativeScript Playground. On this site, you can:

• Create Apps from Templates.

• Drag and Drop Interface for UI Components.

• Generate Wrapper Code for UI components.

• Open App in local Devices Akin to Expo(React Native) and Ionic View.

• Hot Reload & debug on Devices.

• Manage Projects.

This is very handy if you want to give NativeScript a test run. To test the project, download the Playground Apps for Android and iOS and scan the QR codes.

Project Structure

To create a project from a template directly, use the create command with --template param:

tns create SampleProject --template tns-template-blank-ng

This will create a project named SampleProject based on the blank angular template. For a complete list of arguments, use:

tns help create 

Interactive Project Creation

NativeScript 5.0 allows you to create projects interactively. Invoke tns create without any Params.

tns create

The interactive project creation is straightforward. In the first step, set your app’s name (we will name it “Sample Project”); then, choose a stack (we will choose “Angular”); finally, pick a template (in our case, “Hello World”). This will generate our project folder.

This is the standard project structure of a NativeScript App.

├── angular.json
├── App_Resources
├── CODE_OF_CONDUCT.md
├── hooks
├── LICENSE
├── node_modules
├── nsconfig.json
├── package.json
├── package-lock.json
├── platforms
├── README.md
├── src
├── tsconfig.json
├── tsconfig.tns.json
└── webpack.config.js

The package.json file has a key known as "id". This is your Application Identifier or Package Name. To publish your app to the Play Store or iTunes, you are required to have a unique ID.

"id": "org.nativescript.SampleProject",

With NativeScript 5, individual App IDs can now be specified as below.

"id": {
            "ios": "org.nativescript.SampleProjectIOS",
            "android": "org.nativescript.SampleProjectAndroid"
        }

The source code of the application is in the src folder:

├── app
│   ├── app.component.html
│   ├── app.component.ts 
│   ├── app.module.ts
│   ├── app-routing.module.ts
│   └── home
│       ├── home.component.html   
│       ├── home.component.ts
│       ├── home.module.ts 
│       └── home-routing.module.ts
├── app.css
├── main.ts
└── package.json

Depending on the templates, you will have TypeScript files, JavaScript Files, XML files, and CSS/SASS files. Run the app on an Android device using the command

tns run android

This will initialize the app on an Android device.

UI: Layouts and Styling

Layouts

As mentioned before, NativeScript uses XML as a layout template. The child components/widgets are arranged in Layout containers. By default, 6 Layouts are available:

• StackLayout: Elements are stacked horizontally and vertically.

• GridLayout: A rectangular grid with rows and columns.

• AbsoluteLayout: You can set the location of child elements exactly in this layout.

• FlexLayout: This is based on CSS Flex Layout. However, it is non-conforming.

• DockLayout: Elements in the dock layout are positioned on the edges. The last element takes up the remaining space.

• WrapLayout: Elements in WrapLayout are arranged in a grid of rows and columns. If space runs out, the remaining elements are placed in the next row/column depending on orientation.

Styling

NativeScript elements are styled using CSS. However, the properties which can be styled are limited. Here is the complete list of properties that can be styled. CSS properties can be declared

• Application-wide

• Inline on elements

• Page-Specific CSS
  
  

Interacting with the Backend

The Angular template of NativeScript comes with Angular 6.1. We can use HttpClientModule to interact with a web service. Alternatively, we can also use fetch or tns-http to interact with web services.

Debugging

Web Browser Inspect

We can debug the application using Chrome Inspect (For Android) and Safari Inspect (for iOS). To run the application in debug mode on Android, use the command

tns debug android

A URL will be generated in the terminal window. This URL will provide you with a console and debugger.

Hot Module Replacement

Webpack's

hot module replacement was introduced in NativeScript version 5.0. Previously, changes would be reflected in the device/emulator with an app reload. With hmr the changes are updated live without app reload, i.e. they are reflected instantly.

Currently, the feature is beta and requires the nativescript-dev-webpack dependency to work. This reduces development time drastically.

To use hmr, you will have to update the CLI to version 5.0 and install nativescript-dev-webpack in the project folder (if not present). Additionally, Angular projects require additional steps.

npm i nativescript-dev-webpack --save

After installation, use the flag --hmr with the tns run command to start the app on a device/emulator.

tns run android --hmr

tns run ios --hmr

tns Preview

Preview mode was introduced in version 5.0. tns preview bundles the app and generate a QR code like NativeScript PlayGround. You scan the QR code and load the app via the NativeScript Playground App.

This is very handy if your development machine is non-macOS and you want to test the App on an iPhone. As with Playground, plugin support is limited in preview mode.

tns preview

Extending the project with plugins

The default project template has limited features and functionality. We can extend the functionality using NativeScript Plugins. The NativeScript MarketPlace provides you with a list of published plugins. An individual plugin page has information about:

• Platform (Android / iOS / Both)

• NativeScript Version (2 / 3 / 4 / 5)

• Webpack Support

• Demo App in Plugin Page

• TypeScript Support

• License Information

• Travis CI Support

Verified plugins have support for the latest Android & iOS versions, support for the latest NativeScript platforms, Weekly Travis CI Builds, and support for all NativeScript templates and demo apps in the plugin repository.

Plugins can be managed using Sidekick. However, they are not available in the Playground. Some common plugins are listed below.

• UI Listview

• UI Calendar

• UI Chart

• Plugin Firebase

• Localize

• Sqlite

• Camera

• Geolocation

• AR

Plugins can be installed using the following command.

tns plugin add plugin_name

Since NativeScript plugins are available in the npm repository, you can also use

npm i plugin_name --save

Conclusion

This was a brief overview of the framework. We would suggest you take NativeScript for a spin using Playground.

If you encounter any issues getting started with NativeScript, be sure to refer to the official documentation or join their Slack community.

If you're building applications with sensitive logic, be sure to protect them against code theft and reverse-engineering with Jscrambler.