The Growth team has been working on migrating existing software (mentee overview module on Special:MentorDashboard, T300532) and creating new projects (Impact module on Special:Homepage, T222310).
While working on those projects, we've periodically reached out to #design-systems-team colleagues and received useful feedback and code review comments (thank you!). That has mostly happened in the context of fairly narrow questions. This task is to request a high-level review of our Vue code, how we've used Codex components. The reason for doing that is that there aren't many examples to draw upon in the MediaWiki ecosystem, so it's hard to know if we're doing things the best way.
Some goals for this review:
* ensure we're following best practices and latest guidance, per the product development best practices playbook
* see if there are areas to improve our code
* identify components that could be upstreamed from GrowthExperiments code
* document pain points in working with Codex / Vue in MediaWiki
I could see this audit working in a few ways:
* a synchronous meeting, 1:1 with a DST engineer and one or more Growth engineers to walk through code and talk through what we built
* write up questions/notes asynchronously to allow more time from DST engineers to look through the GrowthExperiments codebase
* a combination of the above
I'm optimistically hoping this would be a ~2 hour time commitment from both sides.
If this doesn't fit into your schedules this quarter, that's not a problem, but if it does, let us know how you'd like to move forward with something like this.
**GrowthExperiments Vue modules**
|Module name / script path | Link to code | Notes |
|ext.growthExperiments.Homepage.NewImpact | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/GrowthExperiments/+/refs/heads/master/modules/ext.growthExperiments.Homepage.NewImpact/ | Browse code ]] | Used in Special:Homepage |
|ext.growthExperiments.MentorDashboard/MentorDashboard| [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/GrowthExperiments/+/refs/heads/master/modules/ext.growthExperiments.MentorDashboard | Browse code ]]| Used in Special:MentorDashboard |
|vue-components| [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/GrowthExperiments/+/refs/heads/master/modules/vue-components/ | Browse code ]]| Bucket for Vue re-usable components and utils |
**Areas of improvement or dicussion (Work in progress)**
# Undefined variables leak: an undefined property inside an SFC template can go to production
# Property drill: clearer rules for the use of provide/inject
# SFC vs JS/TS components: writing SFC has the benefit of a "single place" for everything, however it comes with the drawback of not loading styles on the server.
# SFC vs JS/TS components: Refactoring from a Vue 3 composition API + setup recipie to use the Vue render API is tedious.
# SFC vs JS/TS components: MW SFC recipie is using "require" which requires from some transpilation or transformation to load the components in a ES6 context.
# Data flow and reactivity shave: In Vue "everything" is reactive, but in many of the GE code data is precomputed on the server.
# SPA vs micro-frontends: To reuse interfaces between different special pages we need to create a new Vue mwApp and mount it.
# Lack of mobile tooling or documentation: It should be easy to use vue-router with MW mobile overlays.