How to Share Code Between Web and Nativescript
Total Page:16
File Type:pdf, Size:1020Kb
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 Java, .NET node.js, javascript, typescript angular, 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 <Label [text]=‘dateField | date:”MM/DD/YY”’></Label> 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 (ios/android) • Webpack switch the .tns files • Different tsconfig.json 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 – npm 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 .