Conquer Web and Mobile

with a Single Project

#Angular #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 Shar 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”

Dom \ Native

Component
Property Event
Binding Metadata Binding (event) = ”handler”

Component
{ } [(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
<div>
name: {{ name }}
twitter: {{ twitter }}
<button (click)="sayHelloTo('web')">Hello Web</button>
</div>

<StackLayout>
<label [text]=" 'name ' + name"></label>
<label [text]=" 'twitter ' + twitter"></label>
<button (tap)="sayHelloTo('mobile')">Hello Mobile</button>
</StackLayout >
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

Web HTML
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

> npm i –g @nativescript/schematics

Web + Mobile Shared Project

> ng new -c=@nativescript/schematics --name=my-app --shared
How does it work?
Shared Project
ng serve tns run [android/ios] --bundle
Business as usual

Webpack build
Mobile app

{N} Project
Web App
Structure
 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