NGULAR

how to share code between web and NativeScript

Marian Edu, Acorn IT About me

Working with Progress since 1998 4GL & OO, AppServer Architecture & Integration , .NET node.js, , , nativescript

Angular – code share acorn.ro 4GL Application

Angular – code share acorn.ro WEB Enable

Angular – code share acorn.ro NGULAR

• Use modern web platform capabilities to deliver app- like experiences. • High performance, offline, and zero-step installation. • Quickly create UI views with simple and powerful template syntax. • Angular CLI • TypeScript • angular.io

Angular – code share acorn.ro NATIVESCRIPT

• Beautiful, accessible, platform-native UI - without WebViews. • Native mobile apps for iOS and Android from a single codebase. • 100% direct access to all iOS and Android APIs. • JavaScript, CSS, and Native UI mark-up. • Angular & TypeScript • nativescript.io

Angular – code share acorn.ro Angular Puzzle

Angular – code share acorn.ro To Share or Not To Share Services

Utilities

Components

Modules

Angular – code share acorn.ro Services

• For data or logic that isn't associated with a specific view, and that you want to share across components, you create a service class. • @Injectable() decorator. • Dependency injection (DI) • Providers • providedIn - @Injectable • providers - @NgModule, @Component

Angular – code share acorn.ro Services

• Singletons – within an injector scope. • Injectors • root – ‘real’ singletons • Module(s) • Components • Hierarchy / Inheritance • Dependencies – circular is bad. > ng generate service

Angular – code share acorn.ro Services

• REST, Data access (HttpClient) • Routing / Menu • Business Logic, Data Models & Validation • Configuration, Cache, Localization, Session • Interface / Abstract

Angular – code share acorn.ro OpenEdge Integration

• REST

• What flavour?

• REST mapped services, WebHandler, JSDO

• akera.io – we’re just happy with node.js

Angular – code share acorn.ro Services

• Angular Router, not NativeScript extensions! • No Mobile UX (transitions) • No File System • No DOM operations • No platform specific plugins angularfire2 vs. nativescript-plugin-firebase

Angular – code share acorn.ro Sharing is Caring

Services

Utilities

Components

Modules

Angular – code share acorn.ro Pipes

• Data display format. • @Pipe() decorator. • Implements PipeTransform • Localization (date/number/currency), Translation • Async

Angular – code share acorn.ro Guards

• CanActivate • CanActivateChild • CanDeactivate • CanLoad

{path: ‘news', component: NewsComponent } {path: 'customers', component: CustComponent, canActivate: [AuthGuard]}

Angular – code share acorn.ro Share everything?

Services

Utilities

Components

Modules

Angular – code share acorn.ro Components

• Component Class (typescript) • Base Components: List View, Detail View • Multiple Inheritance not possible (typescript)

• DO NOT SHARE UI Definition (templates) • UI Components / Widgets aren’t the same

Angular – code share acorn.ro Just because you can… Services

Utilities

Components

Modules

Angular – code share acorn.ro Modules

• Modules are often not sharable • Inject platform specific services • However common, not singleton (root) services can be provided through a common module.

NativeScriptHttpModule vs. HttpModule

Angular – code share acorn.ro How to share

Shared Library Project nativescript- Angular schematics libraries

Everything Separate in a single projects project.

File ‘Injected’ as extension dependency selector

Angular – code share acorn.ro NativeScript Approach

• Schematics • nativescript-schematics collection • Create a new ‘shared’ project • Convert an existing project to a ‘shared’ one • File naming convention • .tns file extension as a selector

Angular – code share acorn.ro Build

• It’s all in the build • Web • ng build or ng serve • all NativeScript (.tns) files ignored • Mobile • tns build or tns run (/android) • Webpack switch the .tns files • Different tsconfig.

Angular – code share acorn.ro All In One

Angular – code share acorn.ro Component

• name.component.ts – shared Class definition • name.component.html – web template • name.component.tns.html – mobile template • name.component.css – web stylesheet • name.component.tns.css – mobile stylesheet

Angular – code share acorn.ro Component

@Component({ selector: 'app-name', templateUrl: './name.component.html', styleUrls: ['./name.component.css'], })

Angular – code share acorn.ro Module

• my.module.ts – web module that imports web- specific providers

• my.module.tns.ts – mobile module that imports NativeScript-specific providers

Angular – code share acorn.ro Module

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

@NgModule({ imports: [ HttpClientModule, … ]

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

@NgModule({ imports: [ NativeScriptHttpClientModule, … ]

Angular – code share acorn.ro A Different Approach

• Angular library • No ‘shared’ project – separate projects for library, web, mobile • No funny file naming convention • No complex build configurations • Just declare it as a dependency

Angular – code share acorn.ro Libraries

“You can create and publish new libraries to extend Angular functionality. If you find that you need to solve the same problem in more than one app, you have a candidate for a library.” ng new my-workspace --create-application=false cd my-workspace ng generate library my-lib

Angular – code share acorn.ro Libraries

• Use regular Angular CLI commands to build, test, lint… • State § stateless – better do without if possible § application or library managed • Services - tree-shakable

Angular – code share acorn.ro Libraries

• Publishing – done from dist/my-lib • Linked libraries – link in development • Peer dependencies (@angular/*) • Rebuild on every change – ng build –watch • Schematics can help further

Angular – code share acorn.ro DEMO DYI

• Mobile - NativeScript can help (upgrades, not always smooth). • Use TypeScript. • Share code (services, utilities). • Don’t share layout/templates. • It really isn’t that hard. • We’re here to help ;)

Angular – code share acorn.ro