0

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:

Option A

  • 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

Option B

  • 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

Option C

  • 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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.