From Chris (hq.training):
im thinking too, this has to be streamlined, we should not have to maintain web && mobile views, stx needs to be smarter here, if you can please tackle that too
What it looks like in a real app today. hq.training's phone app is Craft in hybrid mode: some paths are drawn by native screens, the rest by the web view. That means every screen that went native now exists twice:
| Screen | Native | Web |
|---|---|---|
| Today | resources/native/Today.stx | resources/views/m/index.stx |
| Calendar | resources/native/Calendar.stx | resources/views/m/calendar.stx |
| Progress | resources/native/Progress.stx | resources/views/m/progress.stx |
| Store | resources/native/Store.stx | resources/views/m/store/index.stx |
| Me | resources/native/Me.stx | resources/views/m/me.stx |
| Health | resources/native/Health.stx | resources/views/m/health.stx |
Six screens, twelve files, written by hand against two different vocabularies — <View>/<Text>/<ScrollView> with ui.* classes on one side, <div>/<p> with Crosswind utilities on the other — reading the same stores and drawing the same data.
They drift. A fix lands in one and not the other; a guard test that reads one file passes while the other screen is wrong. Both copies have to be kept in a changelog entry, a review, and a contributor's head.
What would fix it: a screen written once that stx can render to a web document or to native views, the way a component already renders to a page. The hard parts, from the shape of the duplication above:
- a layout vocabulary both targets can honour, rather than CSS on one side and flex-only views on the other
- components that exist on both (a grouped list, a nav bar, a tab bar, a chart)
- an escape hatch for the genuinely platform-specific — a native screen wants the platform's refresh control, a web page wants a URL
- which of the two is the source when a screen cannot be expressed in the shared vocabulary
Related: #1992 asked for native views to exist at all. This is the half after that one — having them without writing everything twice.