search

ngx-rocket / generator-ngx-rocket

:rocket: Extensible Angular 14+ enterprise-grade project generator
https://ngx-rocket.github.io/
MIT License
1.53k stars 216 forks source link

Port mobile template to NG2 #5

Closed sinedied closed 7 years ago

sinedied commented 8 years ago

In a separate branch, port SK mobile template to Angular 2, using Ionic v2 instead of Bootstrap v4/Font Awesome.

Warning: the build system should still be using angular-cli, not the ionic-cli. The project template/structure should be compatible with the web template (as it should be interchangeable later).

Here are the list of tasks I have in mind, feel free to suggest changes:

FrancoisDF commented 7 years ago

Would you expect to see the separation between the mobile templates and the web templates at the templates/src level or at thetemplates/src/app level? or maybe at the component level?

Considering that ionic has its own router system, it would be complicated to share the same app folder also if we start to mix different HTML template part of the solution.

Having a templates/src/web.app/ and a templates/src/mobile.app/ sounds to be the easiest. We would just probably need to update the templates/src/theme depending on the mobile/web configuration and still using the /assets/, /environments/, /translations/ consistent for all envs.

My only concern will be sharing some core and shared components between mobile and web. would that be possible to have a shared /app folder that would be merged with both envs? so we could have:

src/
   web.app/
      pages.../
      core/
         authentication/      // ionic has it's own routing system, may something different for ionic
         shell/                      // no need for ionic app
   mobile.app/
      pages.../
   app/
      core/
      shared/
   assets/
   translation/
   ...

I would only share some of the core components between both envs.

Is that something that could work for you?

sinedied commented 7 years ago

I think the best way is to share the maximum possible code between web & mobile app, you can take a look at this generator for angular 1 to see how we've done it, but basically:

A more complete doc about template is coming, as part of https://github.com/angular-starter-kit/generator-ngx-app/issues/33 😉

The Ionic-specific router is going an issue though 😞 Ionic v1 used ui-router so it was much easier to cover both web and mobile scenarios, and initially they were going to user the new Angular 2 router it seems, but went their own way because Angular team was late on its side reworking the router... The Ionic router is also much more limited currently (no query params support!), so it's going to be issue anyway for app covering both web and mobile using Ionic.

To get started, I think we need to split the job into different tasks to avoid working on the same thing.

EDIT: tasks moved to the first post

Once we agree on the tasks, I'll create the separate issues

sinedied commented 7 years ago

I created the feature branch with the generator questions and some of the ground work (dependencies, cordova config.xml npm tasks...).

It's not fully functionnal at this point (it builds but the cordova app does not work at the moment).

@R0muald If it's ok for you I'll create the issues for the tasks listed above, so anyone can just reply or assign himself to the tasks. Since I'm taking some vacations ⛱ , maybe it's just easier if everyone just commit directly to the feature branch to advance faster, as you suggested on the contribution post. I'll send you an invitation for that.

FrancoisDF commented 7 years ago

OK sure, thanks. Also, I've been looking into this project: https://labs.encoded.io/2016/11/12/ionic2-with-angular-cli/, so except that we need to make sure we include the references to the SASS files, it shouldn't be too bad to make Ionic 2 working with the ng-cli! I will try to contribute soon on it!

sinedied commented 7 years ago

Everything is ready, anyone who wants to contribute, just assign the issue you want to work on to yourself so we can follow who's working on what on the project page. 😸

FrancoisDF commented 7 years ago

Hey, I'm finally spending some time on the mobile app! I'm still trying to see how to re-organize the ionic app structure to match with the app structure generated by the ngx-rocket ... it's actually more complicated than expected. I can make use of angular-router to separate the authentication from the rest of the app, but I'm still facing issues to get away from the new ionic navController that replace the angular-router. About ionic router, there is a component to get deep linking but that will still be its own logic regarding the web app way of doing routing... Do you have a strong opinion about only using the angular-router even in a mobile context? Did you create a small POC to get an idea of what result you wanted to end up with?

sinedied commented 7 years ago

I looked at this problematic some time ago, and it seems there's no straightforward solution in Ionic 2+: for the moment it seems the best way would be to use Ionic navigation and deep linker systems in replacement of the angular-router used for web app. I did not had much time to play with Ionic these last weeks, but yeah using the integrated DeepLinker (and maybe also with the native deep link plugin) would be the easiest way to go.

There's not much info on the subject, but it seems the Ionic team has completely abandoned the idea of integrating with angular-router, which is sad :(

FrancoisDF commented 7 years ago

I've been playing with the new ionic 3 @IonicPage decorator. It's pretty nice since your pages are now modules, but those modules are never initiated. They just exist under the pages folder which makes them accessible to the app from any controller by the page name. It also means that this new implementation highly depends on the app folder structure and the fact that all pages are under the pages folder. I think it's going to be quite of a challenge to get both mobile and web working the same ecosystem. Let's see ^^

sinedied commented 7 years ago

Just for the record, I made a post on their forum since I found that they're more and more drifting away from (Angular) best practices over time: https://forum.ionicframework.com/t/default-ionic-structure-is-bad-for-large-projects/95938

@R0muald Yes it will be a challenge unlike with Ionic v1 (!), but from what I've seen it does not seems tightly related to the folder structure, but rather an arguably "best" practice from the Ionic team. I'll try to play a bit with it...

sinedied commented 7 years ago

I have started working on basic integration, and have run into a few issues so far:

It's really not trivial integrating Ionic navigation in a proper by feature structuration as recommend by Angular 😞

Even worse: ionic-cli seems to perform some under-the-hood magic with @ionicPage decorators tied to the deeplinks plugin, so routes are emitted ❗️

sinedied commented 7 years ago

After a lot of struggle, here is what I found during extensive comparison between angular-cli and ionic-cli (I even considered moving to using Ionic CLI for mobile projects...):

Missing in ionic CLI:

Missing in Angular CLI:

Due to the tight integration (among other issues) of @ionicPage() with Ionic CLI, I'm in favour for now to not use it in the starter template. To compensate for it, I thinking of POC'ing integration of standard angular/router (for URL routing/deeplinks support) with Ionic navigation system using a core service helper :smiling_imp:

@R0muald do you have any thoughts on this?

EDIT: quick POC done, and the first result is that it seems possible to bind angular-router navigation to ionic navigation, and that's good news I think :)

sinedied commented 7 years ago

For anyone interested, this is where I'm working on for the mobile branch: https://github.com/ngx-rocket/starter-kit/tree/mobile/ionic-routing

With a few lines of plumbering, Ionic navigation is easily tied to Angular router, and this allows to use the exact same principles as the web version, without the pitfalls of @IonicPages.

I'm currently working on authentication page, and unit/e2e tests will come after. Once it's stable enough, I will migrate the code to the generator.

Any feedback appreciated 😄

FrancoisDF commented 7 years ago

This is definitively a great start! I did work on a POC and got away from @ionicPages by using modules, but didn't get to implement it with the angular-router so kudos for that! I'm also more interested in the tab navigation and found out that it's more depending on the [root] navigation which is linked to ionic navigation ... so I ended up using ionic navs instead... But maybe both can be used at the same time. maybe adding a deep-link when using tabs can help for the routing ...
Also, just for the theming part, I would see two new files theme/ionic.scss and theme/ionic-variables.scss. Each of them would be imported by theme/theme.scss and theme/theme-variables.scss to get a better separation between styles and help for the code generation.

sinedied commented 7 years ago

@R0muald what would you want to see in theme/ionic.scss? Should it be the Ionic imports content that's in main.scss? If that's it, then the same could be done for the Bootstrap branch.

As for the mobile branch, it's nearly complete now, all that's remaining is the service worker support but I'm thinking of doing it in a second stage, as it's not really mobile-specific and could also apply to the Bootstrap version.

For the mobile-specific tooling, I have created a new repo: https://github.com/ngx-rocket/scripts All supporting scripts will move to this tool now, so it's not tied to the generator.

Also as a side note @R0muald, someone will start working a "responsive tabs" version of the ionic mobile shell, instead of the side-menu: bottoms tabs will be used in "smartphone" breakpoints, and tabs will move vertical on the left side when the app is in larger breakpoints, like this:

In larger mode:

What do you think? I would like to have all starter templates to be phone/tablet/desktop responsive, I think that's the simplest way of having a responsive tab-based template, but I'm open for better ideas 😄

sinedied commented 7 years ago

While discussing possible improvements to the mobile/cordova branch, I have applied all the changes (and fixed a lot by the way 😉 ) to the generator, so everything is close to be ready for a new release with a HUGE changelog! 🎉

The only task remaining here concerns the PWA/Service worker support, but since does not concern directly the mobile (hybrid) branch, I will keep it for a later update.