Now that T241180 has been approved, we can start exploring how to use Vue.js in some of our front-end work.

The MachineVision extension could be a great case study for using Vue inside a Mediawiki environment, because:

1. It is pretty straightforward and we understand it well
2. It is a JS-only feature which only appears on a single special page
3. Code would live in a separate extension repo rather than in core
4. It's not mission-critical, and lives outside of Wikipedia entirely

I think that we could re-implement the front-end of this feature in Vue in a fairly short amount of time (a few weeks at most). Then we'll have two different versions of the same feature, and can make meaningful comparisons regarding performance, code clarity, user experience, ease of making design changes, etc.

I've forked the GitHub mirror of MachineVision for now: https://github.com/egardner/mediawiki-extensions-MachineVision. It seemed easier to keep this project here rather than in Gerrit.

@AnneT and I are working out how to divide up work here. In addition to converting UI components over to Vue, we're also going to use Vuex (the state management library) to help separate out business logic from presentation.

My goal is to produce a drop-in replacement for MV that replicates all features but is much easier to read, understand, and change going forward. Hopefully this could also serve as a good example codebase that other developers can study.

Remaining tasks

• [EG] Add custom tag functionality (T245769)
• [EG] Add new tag for depicts statements created from custom tags (T250747)
• [EG] Add not-displayed review status (T250742)
• [AT] Remove initial batch (T250326)
• [AT] Categories (T246144 / T249959 / T249821)
• [EG] Add “disable notifications” link (T249913)
• [EG] Show “Image X of Y” above personal uploads cardstack (T234449)
• [EG] Onboarding dialog (T233233)
• [EG] Confirm tags dialog (T233229)
• [AT] Add image card and cardstack transitions
• [AT] Add "publish pending" state
• [AT] Handle tab focus outline
• [AT] Centralized messages + fetch error message
• [EG] Restore client-side logging
• [AT] Improve loading indicator contrast (T251826)

Not critical for launch:

• [AT] Show descriptions/aliases via toggle (T245023)
• Focus on custom tag input on dialog open (T251825)
• Add dismissable notification about images that aren't being shown (T250860) (MV classic patch must be merged first)

COVID-19 Deployment Criteria

• Can you roll back this change without lasting impact?
  1. A recovery plan is required as this will help identify our capacity for recovering from the failure
  2. THIS IS A KEY QUESTION, if you can’t answer it, you shouldn’t deploy

• Is specialized knowledge required to support this change in production? If so, are there multiple people with this knowledge?

• Is there a way to increase confidence about the correctness of this change?
  1. Reviews (Design, Code, etc)
  2. Testing coverage (unit tests, integration tests)
  3. Manual testing (e.g. Beta, vagrant, docker)