I'm building an application that will be served via browser and on desktop via ElectronJS. I'm using Typescript and React. I have separated the whole app in the following packages:
- ui: it has all the UI logic implemented through React components.
- web: Gatsby app that will import code from the ui package and glue them to the framework
- api: GraphQL api
- core: business logic that is common to all applications
- desktop: ElectronJS implementation of the UI
I'm not sure about how to integrate the ui with the web package and the desktop packages, in particular about the routing mechanism. Some options I can think of:
- ui export pages components only
- web and desktop packages import the pages and are responsible for routing, for example.
- Advantages: flexibility
- Disadvantages: the ui is no longer the package responsible for all the ui logic of the app. Web and desktop could implement the pages in a different flow, for example
- ui exports a single App component that encapsulates all the pages and routing
- ui has its own routing mechanism
- Advantages: all the ui logic is in one place
- Disadvantages: finding a routing mechanism that is cross-platform
- ui exports a single App component that encapsulates all the pages
- ui defines the interface for the router that should be passed in
- web and desktop packages import the App component from ui and pass a router class/component that matches the interface required
- Advantages: all the ui logic is in one place, ui delegates to other apps the responsibility to define what's specific for those apps
- Disadvantages: ????
Which one would you suggest and why?
Thanks in advance!