Porting over the existing MachineVision front-end from OOUI to Vue.js (without changing much in terms of design or functionality) gives us an interesting opportunity to do some real-world performance comparisons of the two approaches. And since this is a nice but not mission-critical feature, I feel like we have a little bit of room for experimentation that could inform more high-stakes projects down the road.
**Payload Size**
This is the simplest thing to measure but also probably the least informative. Modules were fetched locally in isolation using these request params:
`/load.php?modules=ext.MachineVision&skin=vector&lang=en&debug=false`
| Module | MV Classic | MV Vue.js |
|----------|--------------|--------------|
|`ext.MachineVision`|58.86KB|66.05KB|
|`vue`|0KB|91.90KB|
|`vuex`|0KB|10.15KB|
So the Vue.js version is about 109.24KB heavier than the "classic" version. Of course, the Vue.js version still has to load all the original OOUI/OOJS dependencies, since we are still relying on OOUI widget modal dialogs (this is because we don't have a global, Vue.js-compatible equivalent of WindowManager / ProcessDialog yet, and creating one here was out of scope).
The `oojs-ui-windows` module weighs 51.91KB, and `oojs-ui-widgets` itself is 106.01KB – if we were able to move away from OOUI-based process dialogs here then the comparison would start to look much more favorable.
**Time to Interactive**
TBD
**Other key metrics?**
TBD
@Krinkle and @Catrope I'd love to hear any recommendations you might have on other key metrics that would be good to try to capture before and after we deploy the Vue.js port –