XRUI Implementation Pattern

For re-use, composability and 2D/3D compatibility, we need to separate the concerns of the various aspects of a UI/XRUI implementation. There are three concerns:

• ECS System
• React Components
• Flux State

For example, the XRUI Loading Screen is comprised of three files:

• The XRUILoadingSystem
• The XRUILoadingDetailView
• The LoadingState

Ideally, the XRUILoadingSystem contains only the 3D specific logic, XRUILoadingDetailView contains only JSX, and LoadingState only contains the Hyperflux state/service/action/receptors. This is such that XRUILoadingDetailView can be used as a 2D asset without needing the 3d logic and renderer, such as for a 2d game or a minimalist page that doesnt need to run a 3d context.