Page MenuHomePhabricator

Prototype common UI patterns with Vue SSR
Closed, ResolvedPublic8 Estimated Story Points

Description

Using the prototype from T385321, build out a few common UI patterns, to assess the feasibility of using SSR for them and discover what we'd have to do to make them work.

Incomplete list of things we could explore:

  • Build a form with Codex's form components
    • Make submitting it work both in JS with XHR and without JS with plain HTML
    • Make populating it with arbitrary data (e.g. from the query string) work on the server-side
    • (in particular, we might encounter problems with components that don't currently use an HTML form element like Select, or complex form field components like ChipInput)
  • Build a button that populates a form with data to be edited, either dynamically in JS, or by reloading the page with a query string without JS (inspired by PatchDemo's copy feature)
  • Build a button that launches a dialog containing a form with JS, or navigates to a URL that presents that same form without JS (inspired by the edit button in the old multiblocks design)
  • Build a tab layout where clicking a tab switches to that tab dynamically in JS, or some other way without JS (either using CSS or by reloading the page with a query string)
  • Build a search bar (ideally using TypeaheadSearch) that is fully functional in JS and renders a basic form with text input without JS
  • Try to write realistic code and explore which limitations of the SSR prototype it might run into
    • e.g. require( 'mediawiki.api' ) may fail even if it's only actually used client-side
  • Explore what it would take to make more Codex components work well without JavaScript by using CSS or newer HTML tags. We already have this in Accordion with the <details> tag and in ToggleSwitch (which is a checkbox with CSS), but we could also look at:
    • ButtonGroup / ToggleButtonGroup (using hidden checkboxes/radios?)
    • MenuButton (using checkbox hack or <details>)
    • Message dismissal
    • Dialog (may not be possible?)
  • More broadly, explore what it would take for every Codex component to server-side render in a way that is at least reasonable and not broken (but not necessarily optionally functional) without JavaScript
  • Try adding less styles

Incomplete list of places to take inspiration from:

  • CSS-only components, where they differ significantly from their Vue counterparts
  • Multiblocks (redesign of Special:Block)
  • MediaSearch
  • PatchDemo (not built with Codex, but uses OOUI-PHP with infusion; not a MW special page)

Event Timeline

CCiufo-WMF moved this task from Inbox to Needs Refinement on the Design-System-Team board.
Catrope set the point value for this task to 8.Feb 3 2025, 7:02 PM

Change #1119209 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Select: Add native select version for SSR

https://gerrit.wikimedia.org/r/1119209

Change #1117994 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] [Proof of concept] User rights form exploration

https://gerrit.wikimedia.org/r/1117994

Change #1119225 had a related patch set uploaded (by Anne Tomasevich; author: Catrope):

[mediawiki/core@master] [Proof of concept] Use Tabs component in SSR

https://gerrit.wikimedia.org/r/1119225

Change #1119228 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] [proof of concept] Use Select in SSR demo

https://gerrit.wikimedia.org/r/1119228

CCiufo-WMF updated Other Assignee, added: AnneT.