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