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 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
@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 > npm 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/ios] --bundle {N} Project Project {N} Structure Mobile app 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