[QUESTION] How to handle complex Nx structures with tags?

[dtomaszewski]

trafficstars

Hi,

I've checked xplat just today so my question may be silly, but I'd like to know how to handle more complex apps structures for multiple platform.

What I mean by complex structure is to have multiple layers of tagged features which will be responsible for automatic handling of possible conflicts (like importing business logic to generic ui components, or having domain logic in shared components).

I'd like to use Your tools but as far as I can see whole tagging solution Nx provides is totally flattened here, and for me it's no-go.

Cheers

[dtomaszewski]

Second case is that I wanted to try to have xplat basic configuration without structure and it seems that it's not working :

npx create-nx-workspace myworkspace yarn global add @nrwl/cli nx generate app nativescript nx generate app web

then start.nativescript.<appname>.ios

produces error:

It looks like there is some conflict with loading zones, I tried to look at it a bit but it was not very clear as I have 2d of experience with NS libs ;) Web app however works fine.

[NathanWalker]

@dtomaszewski You can tag to heart's content using Nx tags for module enforcement boundaries as you see fit. Thanks for mentioning the {N} app generator "without structure" in Angular 9; I'm going to flag to update that vanilla generator. That zone issue just indicates that the Ivy compilation didn't succeed (as it's actually including the ivy compiled on top of standard compilation) and given the update needed for vanilla that is likely the stack that would result; I'll get that updated this weekend 👍

[dtomaszewski]

Thanks for answer @NathanWalker. I'll check this 'without structure' build asap. However I'd like to discuss more about complex app/tag structure. Will xplat work correctly for completely different nx app structure ? I mean that in my repo I'd like to have multiple libraries and multiple apps (BE and FE), default xplat structure enforces libs and xplat as top level libraries which have everything else inside.

What I'd like to achieve is to have multiple level of directories/tags like:

Is it possible to work with full xplat support ? I saw on some of Your presentations that xplat schematics creates structure of reusable components in xplat/ directory. How can I use it with more complex structures ?

Cheers

[NathanWalker]

You can create those structures and tagging, just tag xplat/{platform}/{nested} etc in your Nx.json

As far as nested libraries (many different parts) within xplat layer this came up recently in another project and we’d been discussing this. I’d be curious your opinion on how you’d like to see that work?

[Abdallah-khalil]

Hey @NathanWalker , Can you please elaborate more on how should the tagging works ?

• When i have the same issue as @dtomaszewski , where we are following the recommendation from this book
• which advices to follow DDD for example if we have a feature eg: Task > we will group the four types of libraries under that Task scope , so architecture-wise we will have

 Task ---> Main-folder [ for logical grouping and scope tagging] 
   - data-access-lib ---> [ a library contains the business logic for tasks  ]
   - feature-lib ---> [which contains the lazy loaded modules and components ]
   - ui-lib ---> [which contains the dumb components ] 
   - util-lib ---> [ that has any models, pure functions and pipes]

So my question is this > could we still use the same architecture But also somehow make use of the Xplat architecture ... one way i can think of is that we can make for example the core folder as a set of libraries like so

// under the libs folder we create 
 - core-main-lib ---> that contain framework-less code [same as we currently have with core folder  
    under libs.
 - core-xplat-nativescript-lib ---> that will contain nativescript core code
 - core-xplat-web-lib ---> contains web core code 
``` and treat the other folder the same like `features`, `utils`
not sure if that's possible but i'm trying to measure this on the impact we will have on implementing a feature like Task mentioned above that could be something similar with libs not folders 

Task ---> Main-folder [ for logical grouping and scope tagging]

• data-access-lib ---> [ a library contains the business logic for tasks ]
• // optional - base-feature-lib ---> [which contains the shared base code ]
• nativescript-feature-lib ---> [which contains the lazy loaded modules and components ]
• web-feature-lib ---> [which contains the lazy loaded modules and components ]
• ui-lib ---> [which contains the dumb components ]
• util-lib ---> [ that has any models, pure functions and pipes]

Lastly please excuse me for any dumb thoughts i had above just trying to reach to a harmony with what we used on doing with Nx and follow same with Xplat :rocket: