Conquer Web and Mobile with a Single Project # #NativeScript

@sebawita Sebastian Witalec Senior Developer Advocate @Progress @sebawita NativeScript is… an open source framework for building truly native mobile apps with JavaScript.

Use web skills, like: TypeScript, Angular, Vue and CSS, and get native UI & performance on iOS and Android. Code Sha r i ng The Goal Android iOS

Web One project – two… One project – two… erm … dogs + = + =

Architecture Angular Architecture Helping with code sharing Data Binding

{{value}} Template

< > [property] = “value” Component Property Event Metadata Native Binding Binding \ (event) = ”handler”

Component Dom { } [(ng-model)] = “property” Renderer

Renederer

Component createElement Element Dom { }

setElementProperty

attachViewAfter Template < > invokeElementMethod

… � Renderer

NativeScript Renederer Mobile UI Component createElement Element Layer { }

setElementProperty

attachViewAfter Template < > invokeElementMethod

… � Component export class PlayerComponent { name = 'Sebastian'; twitter = '@sebawita';

sayHelloTo(name) { alert('hi ' + name); } } Template

name: {{ name }} twitter: {{ twitter }}

Dependency Injection Http � � Http call ≠ Http call � HttpClientModule import { HttpClientModule } from '@angular/common/http';

@NgModule({ imports: [ HttpClientModule, … ] NativeScriptHttpClientModule import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';

@NgModule({ imports: [ NativeScriptHttpClientModule, … ] HttpClient import { HttpClient } from '@angular/common/http'; @Injectable() export class MyHttpService { constructor(private http: HttpClient) { } getData(url: string) { return this.http.get(url); } } How to do code splitting?

my.module.ts (Web) HttpClientModule my-http.service.ts � HttpClient my.module.tns.ts (Mobile) NativeScriptHttpClientModule � Code Sharing Project Structure � Shared Project Structure

Monorepo Modules Components Components Navigation Services TS Class Navigation Directives Pipes Web HTML Web ngModule Style Variables Web Style {N} Style {N} HTML {N} ngModule

Build Process Shared Project Structure

Monorepo Modules Components Components Navigation Services TS Class Navigation Directives Pipes Web HTML Web ngModule Style Variables Web Style {N} Style {N} HTML {N} ngModule

Build Process Shared Project Structure

Monorepo Modules Components Components Navigation Services TS Class Navigation Directives Pipes Web HTML Web ngModule Style Variables Web Style {N} Style {N} HTML {N} ngModule

Build Process How to do code splitting?

Components NameComponent

TS Class name.component.ts

HTML name.component.html How to do code splitting?

Components NameComponent

TS Class name.component.ts

WebHTML HTML name.component.html

{N} HTML name.component.tns.html How to do code splitting?

Components NameComponent

TS Class name.component.ts

Web HTML name.component.html

{N} HTML name.component.tns.html

Web Style name.component.css

{N} Style name.component.tns.css “HOW DO I EVEN?” � NativeScript Schematics

Install Nativescript Schematics > i –g @nativescript/schematics

Web + Mobile Shared Project > ng new -c=@nativescript/schematics --name=my-app --shared How does itHow does work?

Business as usual Web App Web ng serve Shared Project

Webpack build tns run [android/] --bundle {N} Project Project {N} Structure Mobile NativeScript Build

Web Files

Demo github.com/sebawita/angular-tour-of-heroes � � Project Migration with Schematics � Project Migration – web to shared

Shared Project Mobile add schematic Web Project

• ng new myApp • ng add @nativescript/schematics Web Mobile • ng serve App App • tns run [ios | android] --bundle Project Migration – mobile to shared*

Shared Project Web add schematic Mobile Project

• tns create myApp --ng • ng g add-web Web Mobile • ng serve App App • tns run [ios | android] --bundle

*under development Project Migration: Convert Component

HomeComponent HomeComponent

home.component.ts home.component.ts

home.component.html home.component.html home.component.tns.html

home.component.scss home.component.scss home.component.tns.scss

ng g migrate-component --name=home Project Migration: Convert Component

Menu Module Menu Module MenuComponent MenuComponent

menu.component.ts menu.component.ts

menu.component.html menu.component.html menu.component.tns.html

menu.component.scss menu.component.scss menu.component.tns.scss

menu.routes.ts menu.routes.ts menu.common.ts

menu.module.ts menu.module.ts menu.module.tns.ts

ng g migrate-module --name=menu

Migration commands

ng add @nativescript/schematics ng g migrate-component --name=cmp-name ng g migrate-module --name=mod-name Alternative Solutions https://nstudio.io/xplat/ � https://nstudio.io/xplat/

Thank you Thank you Thank