What's the code sharing plan?

#1

It seems that NativeScript’s official recommendation for code sharing is still the TeamMaestro seed, as indicated in the latest {N} Angular tutorial.

However, in this webinar (at about the 46:55 mark), Sebastian talks about a “New shared project template” that will be similar to the TeamMaestro seed, but officially supported by the {N} team.

Also, {N}'s Roadmap and Release notes talk about

Official process and tooling to support code sharing between web and mobile projects

and

Common web + mobile project structure for easier code sharing with Angular

respectively.

Has a new template been released with v4, and I’m just missing it somehow, or is this new template still to come?

#2

Since this is Angular related not Core, hopefully this should be part of Angular 6 support from NativeScript.

#3

Yes, it looks like it is Sebastian that is working on the schematics for this feature.

@sebawita could you perhaps able to give us an update on when we can expect this to be ready as it would be an awesome feature? :smiley:

#4

Most of the work is done. However, there are still few tasks that need to be completed before we can make it live.

Currently we have the following schematics:

  • add-ns – takes a web Angular project and converts it to a code sharing project, this covers two scenarios
    • converts Angular v5 project and adds additional parts to .angular-cli.json
    • converts Angular v6 project and adds additional parts to angular.json
  • add-web – takes a NativeScript Angular project and converts it to a code sharing project
    • this schematic needs updating to be compatible with angular v6,
  • migrate-component – takes a web only component and converts it to a code sharing structure
  • migrate-module – takes a web only module and converts it to a code sharing structure, this involves:
    • updating all of its components
    • copies providers
    • adds NativeScript specific imports to the NgModule
  • component – generates an Angular Component, this covers two scenarios:
    • for {N} only project: generate a component with contents that work for {N}
    • for code sharing projects: generates a component with contents for both web and {N}
  • module – generates an Angular Module – it also covers two scenarios

We had some delays due to:

  • Webpack 4 introducing time consuming breaking changes – we’ve implemented most of the required changes, which are currently waiting to be merged to the main branch,
  • We need to update --bundle flag, so that it could take files with .tns extension and use them for {N} specific builds. This is waiting to be merged and published with nativescript-dev-webpack.

Extra info:

Once we publish the schematics, it is going to be possible to call the add-ns schematic from the ng cli, by calling:
ng add @nativescript/schematics - please note that ng add only works with @angular/cli 6.0+.

As of Angular v6, the Angular introduced a new project structure, where instead of single projects, we have workspaces, which can contain multiple projects.
My thinking is to make the migration schematics bullet proof for Angular v6+. However, I am debating the extent of the support we should be providing for older projects. Especially that it is fairly easy to upgrade ng web projects with the ng update command.

Currently I am working on:

  • The new project seed - hopefully we will be able to release it by the end of the week - pending updates to nativescript-dev-webpack
  • Documentation that covers (to be complete by early next week):
    • each command and its parameters
    • the migration process
    • development process in a code sharing project
  • Example projects – showing before, after and steps to get there
  • Testing the schematics against existing Angular Web projects. Our current schematics cover mostly basic scenarios, this is to ensure we can also cover more advanced scenarios.
  • Need some time to test builds with Angular v6 – I should be able to start next week, once the task around .tns extensions is completed.
#5

You can follow this issue on github: https://github.com/NativeScript/nativescript-schematics/issues/11

#6

@sebawita thank you for such a detailed response! And also for providing the link to the GitHub issue; will keep an eye on that for sure. Really exciting to see how these new features are shaping up!

#7

@sebawita yes, thank you for the great writeup, really looking forward to this!

#8

I am just diving into this for a new iOS/Android/Web project. While I realize there may be others and I could roll my own there appear to the two major approaches:

  1. There is the angular-native-seed mentioned above that appears to be the official way to structure for cross platform development. Looks pretty good to me.
  2. I also see that Nrwl contributed “Nstudio Schematics” to the marketplace. This adds support for Nativescript to the larger Nrwl approach (Which I generally like). I have not played with this yet.

From what I can tell nativescript-schematics that @sebawita so generously is working on can work with either approach.

Is there an official way?

#9

Hello,

I am all new to NativeScript and I was about to start :nng: projects using NathanWalker’s angular-seed-advanced, which was mentioned in the Groceries tutorial.
Then I saw its README’s first line… Long story short, the repo owner stopped updating this seed since October 2017 and advised the seed’s users to use Narwl’s Nx instead, which helps to maintain a monorepo approach:

And finally, as @chrishaff mentioned, Nstudio’s xplat takes care of integrating NativeScript into an Nx workspace. And as a bonus, they plan to add Electron integration in August 2018.

The Nx + xplat approach seems pretty convincing. Is it widely used? Is there an updated, favorite or official method amongst NativeScript users?

#10

Nx + xplat is from nstudio, if you find that comfortable go head. I guess nstudio actively using that for building apps for their customers.

Checkout these webinars from NativeScript for more on code sharing