And NativeScript was Good.

Intro

NativeScript is an opensource framework to develop apps on the iOS and Android platforms. NativeScript can be built with JavaScript or any language that transpiles down to JavaScript.

We use NativeScript with Angular as our front-end framework of choice for native, cross-platform mobile or mobile & web applications.

Why NativeScript? It is a cost-effective way to build truly native cross-platform mobile apps. Companies can hire web developers to build cross-platform apps (iOS, Android, Web) in one codebase, rather than hiring a web developer, Java developer and Swift developer to build three separate apps. NativeScript uses the iOS and Android SDKs to access mobile device hardware, which makes it competitive on performance. Comparable frameworks to NativeScript include React Native and Flutter.

Codesharing with NativeScript
Starting a New Shared Project
Structure of a Shared Project
HTTP with a Shared Project
Building each platform
Apple Developer Info

Codesharing with NativeScript

There are two options for codesharing with NativeScript. xplat by nstudio or NativeScript Schematics. We prefer the NativeScript Schematics approach with our cross-platform projects because it maintains the structure of an Angular app while generating components that can work across platforms.

xplat is an open source value pack for Nx in order to provide out of the box support for cross-platform mobile development. You should have some familiarity with Nx to work with xplat. It has an opinionated structure and schematics built on top of the Angular CLI.
NativeScript schematics uses the Angular CLI to generate components in NativeScript Angular apps. It now supports code sharing (web & mobile) to support NativeScript only, NativeScript & Web, and migrating to shared apps.

Starting a New Shared Project

You should be using @angular/cli@6.1.0 or newer and NativeScript CLI 5 or newer.

1. Updates

Angular CLI

npm i -g @angular/cli

NativeScript CLI

npm install -g nativescript

NativeScript application, platforms, webpack, typescript etc. (if applicable) by following the release notes

2. Install NativeScript Schematics

npm i -g @nativescript/schematics

3. Generate a new project with Schematics

The NS Schematics docs outline specific schematics and flags to generate a new app for just mobile or shared mobile + web. The basic commands are below:

Shared (Web & Mobile)

ng new --collection=@nativescript/schematics my-shared-app --shared

NativeScript Only

npm i -g @nativescript/schematics

4. Generate Components, Modules, Directives

With Schematics set up, you can easily generate any angular building unit by using the Angular CLI "generate" command.

ng g c component-name

5. Install ngrx

npm i -S @ngrx/store @ngrx/store-devtools @ngrx/entity @ngrx/effects

Structure of a Shared Project

The objective is to share as much code as possible, and split the platform-specific code into separate files.

This usually means that we can share the code for:

Routes for navigation
Services for common business logic
Component Class definition for common behaviour of a component

while, splitting the code for:

UI Layer (CSS and HTML) - as you need to use different user interface components in web and NativeScript-built native apps,
NgModules - so that you can import platform-specific modules, without creating conflicts (e.g. Angular Material Design - which is web only) between web and mobile.

To create a platform specific file just requires a naming convention. For example, to create two separate html templates in your component, you would create filename.component.html for web and filename.component.tns.html for NativeScript. You can further specify the NativeScript files as specifically ios or android with an additional naming convention.

HTTP with a Shared Project

For dependencies that are specific to web or mobile, you will need to import them into modules separately. In your new project, you'll notice two root modules app.module.ts for web and app.module.tns.ts for mobile.

Web:

import the following into the app.module.ts

import { HttpClientModule } from '@angular/common/http' 

@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class MyModule { }

Mobile:

import the following into the app.module.tns.ts

import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';

@NgModule({
  imports: [
    NativeScriptHttpClientModule
  ]
})
export class MyModule { }

Shared:

Import the following into the shared ApiService. Dependency injection will detect which http module to use for each platform.

import { HttpClient, HttpHeaders } from '@angular/common/http';

Example services/api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private apiURL = environment.apiUrl;

  constructor(private http: HttpClient) { }

  getAll() {
    return this.http.get(`${this.apiURL}/category`, {
    });
  }

}

Building each platform

Web You can just run the Angular CLI to build your web app and view it on localhost.

ng serve

tns run ios --bundle

Android

tns run android --bundle

Apple Developer Info

Coming soon.

zoitsa/nativescript.md