I want to build a brand new app that should be deployed both as a hybrid mobile app and a desktop web app.
Mostly the logic and the user interface are very similar for both apps. Except for some differences:
- Screen size optimization for mobile (e.g. hidden side menus in mobile vs expanded ones in desktop)
- Touch gestures (3DTouch) in mobile vs hover functionalities in desktop
- Touch feedback for some elements in mobile
- Page navigation in mobile vs routing navigation in desktop
I thought of using angular-material components for desktop, and Ionic components and navigation for mobile as both are built on top of angular.
Of course I aim to share as much code that I can, for the logic but also for UI container components.
So I trying to think of a good way to structure my project while creating separate Angular Modules for the desktop UI, mobile UI, shared UI and logic:
One option is to have one Core Module for both apps, importing the logic and the shared UI modules.Then switch between the specific platform UI module, when building for each platform. In this option the platform specific UI components will have the same selectors and @Inputs, but will differ in their rendered UI.
The second option is to have separate Core Modules for each platform app that will import the logic module and the shared UI components module.
Maybe someone has experience of doing such a thing and can share his thoughts about the best project structure covering all of this?
Or which project structure I've suggested is better?