Not sure exactly how relevant this is for the ticket, but something I occasionally come across is discussions of the Islands Architecture - https://jasonformat.com/islands-architecture/ . It seems to speak to some of what our concerns here are, and there are some more recent resources for it: https://is-land.11ty.dev/ , including demos using Vue: https://is-land.11ty.dev/demo-vue .

Our current implementation involves loading templates twice

I’m not sure what this is referring to…

There is double work happening:

• the server renders the html templates
• they are rerendered again with the front end code

Story writing notes:
This may be best to look at once we start working on once we begin on the editing functionality

This needs some more story writing

Related data loading doc:
https://docs.google.com/document/d/18jdMeJlc47-jDtwAOxB0aG2bZn3nbJEOz1wrhzFVz3U/edit?tab=t.0#heading=h.qepnvgwooy8r

I instrumented the sortDependencies function in mediawiki.loader.js to try and track down where our oojs dependencies are coming from, and it looks like removing that won't be all that simple:

• mobile.startup
  • mediawiki.page.watch.ajax
  • mediawiki.router
    • oojs
  • mediawiki.storage
  • mediawiki.template.mustache
  • mobile.codex.styles
  • mobile.init.styles
• wikibase.wbui2025.lib
  • mediawiki.ForeignApi
    • mediawiki.ForeignApi.core
      • mediawiki.api
      • oojs
  • pinia
  • wikibase
• wikibase.client.data-bridge.init
  • mw.config.values.wbDataBridgeConfig
  • oojs-ui-windows
    • oojs-ui-core
      • mediawiki.page.ready
      • oojs
      • oojs-ui-core.icons
      • oojs-ui-core.styles
      • oojs-ui.styles.indicators
    • oojs-ui-windows.icons
• wikibase.quality.constraints.gadget
  • oojs-ui.styles.icons-alerts
  • wikibase.quality.constraints.icon
  • wikibase.quality.constraints.ui
    • jquery.makeCollapsible
    • oojs-ui-widgets
      • oojs-ui-core
        • mediawiki.page.ready
        • oojs
        • oojs-ui-core.icons
        • oojs-ui-core.styles
        • oojs-ui.styles.indicators
      • oojs-ui-widgets.icons
      • wikibase

So even if we cleaned up our own direct usage of ooui (from Data Bridge and Quality Constraints), we would still be pulling in oojs because mobile.startup and mediawiki.ForeignApi use it.

OOJS is much smaller than OOUI though.

• oojs: 15224 bytes (minified but without compression)
• oojs-ui-core: 189975 bytes (scripts only, and not counting its dependencies)
• oojs-ui-widgets: 72000 bytes
• oojs-ui-windows: 42181 bytes

So I think eliminating OOUI dependencies would still be quite valuable even if OOJS remains.

Fair. If I disable quality contraints and data bridge, oojs-ui-* does indeed not get loaded. I'll take a look at whether it's possible to make those loads conditional on (the absence of) MEX.

Change #1268552 had a related patch set uploaded (by Arthur taylor; author: Arthur taylor):

[mediawiki/extensions/WikibaseQualityConstraints@master] Do not load oojs-ui for the new mobile (MEX) interface

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

That said, on my wiki (and also on Wikidata), oojs-ui-widgets is also pulled in by ext.echo.ui, so we won’t get rid of it via WBQC alone. (@ArthurTaylor I’m guessing you don’t have Echo installed?)

for ( const [ name, module ] of Object.entries( mw.loader.moduleRegistry ) ) { if ( module.state !== 'ready' ) continue; if ( module.dependencies.includes( 'oojs-ui-widgets' ) ) console.log( name ); }

Weird. I do have echo installed, and don't see oojs-ui-widgets load if I disable Kartographer / Data Bridge and apply my patch.

I generated Lighthouse reports for MEX and Desktop against prod for a simple item (https://www.wikidata.org/wiki/Q37315170), and it looks like we score okay. MEX has a couple more accessibility issues than the desktop interface, but those shouldn't be too hard to fix (and are not in the scope of this ticket)

For the Sandbox Item the results look much worse, and worse for MEX than for Desktop, so it seems like something is systematically worse for MEX. Will try and dig into that.

Change #1268913 had a related patch set uploaded (by Arthur taylor; author: Arthur taylor):

[mediawiki/extensions/Wikibase@master] [WIP] Load MEX edit components asynchronously

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

Added a patch with a proof of concept for lazy-loading the interactive Vue elements - should speed up the first load and read-only experience, with only a slight delay for users that then click on edit or add statement.

In fact, we could delay the code in entityViewInit.js / wikibase.entityPage.entityLoaded until someone clicks edit or add, and if we render the 'add statement' button on the server-side, we wouldn't actually need to load vue / pinia at all until someone clicks either add or edit (at the expense of making those actions slightly heavier).

Re. double load. It is certainly the case that in the current implementation, we send the layout for the MEX sections as rendered by php-vuejs-templating in the initial HTML:

http://wikidatawikidev.mediawiki.local.wmftest.net:8080/w/index.php?title=Q15&debug=2

<div class="wikibase-wbui2025-statement-section" data-section-key="statements" data-props="P70">
  <div class="wikibase-wbui2025-statement-section-heading"><h2 class="wb-section-heading section-heading wikibase-statements" dir="auto" id="claims">Statementsh2>div>
  <div class="wikibase-wbui2025-statement-section-content">
    <div id="wikibase-wbui2025-statementwrapper-P70">
      <div class="wikibase-wbui2025-statement-group">		
        <div class="wikibase-wbui2025-statement-heading">
          <div class="wikibase-wbui2025-statement-heading-row">
            <p>
              <span class="wikibase-wbui2025-property-name">
                <span class="wikibase-wbui2025-property-name-link" data-property-id="P70"><a title="Property:P70 (page does not exist)" href="/w/index.php?title=Property:P70" class="new">P70a> <span class="wb-entity-undefinedinfo">(Deleted Property)span>span>
	      span>
            p>
            <div class="wikibase-wbui2025-link wikibase-wbui2025-edit-link">
              <span class="wikibase-wbui2025-icon-edit-small">span>
              <span class="wikibase-wbui2025-link-heavy">
                edit
              span>
            div>
          div>
        div>
        <div id="Q15$e2074934-4032-ff71-85ef-adf2c64f415d" class="wikibase-wbui2025-statement-view">
          <div class="wikibase-wbui2025-main-snak">
            <div class="wikibase-wbui2025-rankselector">
              <span class="wikibase-rankselector-normal" title="Normal rank">span>
              div>
              <div class="wikibase-wbui2025-snak-value" data-snak-hash="0077265e471ec798f2e671de3b5d7c1324c4c819">
                <span class="snakValue">test stringspan>
              div>
            div>
            <div v-if="hasQualifiers" class="wikibase-wbui2025-qualifiers">
            div>
            <div class="wikibase-wbui2025-references">
              <p class="">
                <span>0 referencesspan>
              p>
            div>
          div>
        div>
      div>

and then send the templates for the same layout elements when Vue loads:

http://wikidatawikidev.mediawiki.local.wmftest.net:8080/w/load.php?debug=2&lang=en&modules=wikibase.wbui2025.entityViewInit&skin=minerva&version=ztntf

...
module.exports.template = "
 \n\
		
<\/div> \n\
		
 \n\
			
 \n\
				<\/wbui2025-statement-group-view> \n\
			<\/div> \n\
			<\/wbui2025-add-statement-button> \n\
		<\/div> \n\
	<\/div>";
...
module.exports.template = "
 \n\
		<\/wbui2025-main-snak> \n\
		<\/wbui2025-qualifiers> \n\
		<\/wbui2025-references> \n\
	<\/div>";
...
module.exports.template = "
 \n\
		
 \n\
			<\/span> \n\
			{{ referencesMessage }}<\/a> \n\
			{{ referencesMessage }}<\/span> \n\
		<\/p> \n\
		
 \n\