- Notifications
You must be signed in to change notification settings - Fork 441
Description
I want to ensure all of those who come across this seed and/or are using it currently are successful in their multi-platform goals. I welcome and introduce you to a natural and exciting evolution:
If you are using this seed and experiencing frustrations, I would highly recommend looking at Nx from Nrwl. It provides a setup which will make your development with multiple platforms and sharing code pleasant with less overhead. If you are currently working in this seed you can likely drop your code in without much hassle. Instead of using .tns.html
/.tns.ts
files (for {N} views - don't worry, you can use everything you have already done!), use abstract base classes in shared libs which are extended by their decorated counterparts in your targeted apps.
Please take a look at these starting videos:
https://egghead.io/playlists/use-nativescript-with-nx-from-nrwl-161bd3e2
The setup and videos will help get you started with ngrx 4, latest/greatest Angular and NativeScript versions out of the box.
More helpful guidance around multi-platform development with Nx will be out this fall/winter covering Electron integration, advanced code sharing techniques, testing, webpack/Aot, CI integration and deployment.
With Nx, you can have many apps
which all share a combination of many libs
.
Example
Let's say our Nx workspace is called my-company
.
Here's an example of a base abstract class which is shared with a target web and mobile NativeScript app for maximum code reuse:
libs: @my-company/shared
libs/shared/components/nav.base-component.ts
export abstract class NavBaseComponent { public items = [ { name: 'Home', path: '/home' }, { name: 'About', path: '/about' } ]; }
libs/shared/index.ts
:
export * from './components/nav.base-component';
apps: NativeScript mobile app
apps/mobile/app/nav.component.ts
:
import { NavBaseComponent } from '@my-company/shared'; @Component({ selector: 'ns-nav', template: ` <StackLayout orientation="horizontal"> <Button *ngFor="let item of items" [text]="item.name" [nsRouterLink]="[item.path]"></Button> </StackLayout> ` }) export class NavComponent extends NavBaseComponent {}
apps: Web app
apps/web/src/app/nav.component.ts
:
import { NavBaseComponent } from '@my-company/shared'; @Component({ selector: 'app-nav', template: ` <nav> <a *ngFor="let item of items" [routerLink]="[item.path]">{{item.name}}</a> </nav> ` }) export class NavComponent extends NavBaseComponent {}