Wednesday, 14 November, 2018 UTC

Introduction to NativeScript

Introduction to NativeScript

Summary

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. If you’re interested in a comparison between NativeScript, React Native and Ionic, see our practical guide.
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
Details regarding the starter templates for each stack can be viewed here. For the purposes of this tutorial, we will consider the Angular stack from this point forward.

NativeScript 5.0

Recently, 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 tns plugin create
  • 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 the area where NativeScript shines. NativeScript has an 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 which 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 in 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 dock layout are positioned on edges. The last element takes up 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.
You can read more about layouts in the documentation.

Styling

NativeScript elements are styled using CSS. However, the properties which can be styled are limited. Here is the complete list of properties which can be styled.
CSS properties can be declared
  • Application-wide
  • Inline on elements
  • Page Specific CSS
Interacting with the Backend
Currently, the Angular template of NativeScript comes with Angular 6.1. We can use HttpClientModule to interact with a web service.
Altrnatively, 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 as outlined here. 
npm i nativescript-dev-webpack --save
After installation, use the flag --hmr with 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 generates a QR code like NativeScript PlayGround. You scan the QR code and load app via NativeScript Playground App. This is very handy if your development machine is non-macOS and you want to test the App in 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 latest NativeScript platforms, Weekly Travis CI Builds, 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 to 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.

... more @ blog.jscrambler.com

blog.jscrambler.com