Page MenuHomePhabricator

[Spike] explore porting MachineVision front-end to Vue.js
Closed, ResolvedPublic

Description

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)

Event Timeline

egardner created this task.Mar 24 2020, 6:07 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 24 2020, 6:07 PM

@Catrope This is not urgent, but it would be nice to have a resource module for Vuex in core that works similar to the one for Vue itself. Right now I'm including the Vuex code in a vendor subfolder but other projects will presumably need to use this soon as well.

AnneT awarded a token.Mar 25 2020, 4:55 PM
CBogen updated the task description. (Show Details)Mar 25 2020, 6:11 PM

@Catrope This is not urgent, but it would be nice to have a resource module for Vuex in core that works similar to the one for Vue itself. Right now I'm including the Vuex code in a vendor subfolder but other projects will presumably need to use this soon as well.

Here you go: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/583818

@Catrope This is not urgent, but it would be nice to have a resource module for Vuex in core that works similar to the one for Vue itself. Right now I'm including the Vuex code in a vendor subfolder but other projects will presumably need to use this soon as well.

Here you go: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/583818

Now landed in master.

AnneT updated the task description. (Show Details)Apr 21 2020, 2:51 PM
AnneT updated the task description. (Show Details)Apr 28 2020, 1:18 PM
egardner updated the task description. (Show Details)Apr 29 2020, 4:09 PM
egardner updated the task description. (Show Details)Apr 29 2020, 6:12 PM
egardner updated the task description. (Show Details)Apr 29 2020, 6:57 PM
egardner updated the task description. (Show Details)Apr 30 2020, 7:58 PM
AnneT updated the task description. (Show Details)May 1 2020, 6:20 PM
egardner updated the task description. (Show Details)May 1 2020, 6:21 PM
egardner updated the task description. (Show Details)May 1 2020, 8:00 PM
egardner updated the task description. (Show Details)May 1 2020, 9:26 PM
egardner updated the task description. (Show Details)May 4 2020, 8:48 PM
egardner updated the task description. (Show Details)May 4 2020, 11:33 PM
AnneT updated the task description. (Show Details)May 5 2020, 3:16 PM
AnneT updated the task description. (Show Details)May 5 2020, 5:43 PM
egardner updated the task description. (Show Details)May 5 2020, 7:52 PM
AnneT added a comment.May 6 2020, 5:36 PM

Deployment plan (flexible; please let me know if you have feedback):

  • Week of May 4:
    • Wrapping up port of features to Vue (see list in the task description)
    • Completing final tasks in "MV Classic"; future tasks will be handled only in the Vue version either before or after deployment. We've clarified in current open tasks which will be done solely in the Vue version.
  • Week of May 11:
    • Post a patch for UI port to Vue
    • Review code with SD engineering team
    • Review revert process with SD eng team to ensure any of us could steward this process if we need to revert the patch post-deploy
    • Post patch in front-end slack channel (or tag relevant people in the patch) to solicit review from those outside SD team who have a vested interest, particularly on base components that replace OOUI widgets.
  • Week of May 18 or May 25, depending on others' capacity for review and the amount of updates we need to make in response to feedback:
    • Merge patch

Things that could delay deployment:

  • Extra time needed for review, especially in light of the current reduced work requirement
  • Extra time needed to respond to feedback due to SDAW kickoff, which will keep SD team members occupied for several hours a day during the week of May 18
egardner updated the task description. (Show Details)May 7 2020, 4:55 PM
egardner updated the task description. (Show Details)May 7 2020, 5:07 PM
AnneT updated the task description. (Show Details)May 8 2020, 7:06 PM
egardner updated the task description. (Show Details)May 8 2020, 11:55 PM
egardner updated the task description. (Show Details)May 11 2020, 7:13 PM
egardner updated the task description. (Show Details)May 11 2020, 8:08 PM
egardner updated the task description. (Show Details)May 11 2020, 10:26 PM

Change 595677 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/MachineVision@master] Port MachineVision front-end to Vue.js

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

Change 595677 merged by jenkins-bot:
[mediawiki/extensions/MachineVision@master] Port MachineVision front-end to Vue.js

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

Ramsey-WMF added a subscriber: Ramsey-WMF.

should be ready to test on Beta

Ready to test on production now 😄

Etonkovidova closed this task as Resolved.Jul 24 2020, 9:39 PM

Tested and monitor for while in production - seems to be Resolved.

Change 616921 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/extensions/MachineVision@master] Remove superfluous ext.MachineVision.polyfill and ext.MachineVision.config

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

Change 616921 merged by jenkins-bot:
[mediawiki/extensions/MachineVision@master] Remove superfluous ext.MachineVision.polyfill and ext.MachineVision.config

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