Skip to content

Recommendations on multi-platform dev #474

@NathanWalker

Description

@NathanWalker

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions