Page MenuHomePhabricator

[Spike] explore porting MachineVision front-end to Vue.js
Open, Needs TriagePublic

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.

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.Tue, Mar 24, 6:07 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptTue, Mar 24, 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.Wed, Mar 25, 4:55 PM
CBogen updated the task description. (Show Details)Wed, Mar 25, 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