Page MenuHomePhabricator

[Spike 8hrs] Should Desktop Improvements use Vue 2 or Vue 3 for Vue.js search?
Closed, ResolvedPublicSpike

Description

Part of the desktop improvements project involves implementing a search type-ahead widget using Vue.

v2.6 is the current & stable version of Vue at the time of this writing. It’s built using ES5 and it technically supports Internet Explorer 9 and up[1].

The most crucial ES5 feature used by Vue v2 is Object.defineProperty, which is used to build its reactivity system.

Accoding to the MediaWiki browser support matrix[2] , MediaWiki currently serves javascript to Internet Explorer 11 and up.

The next major release of Vue, v3, is set to be released in the very near future. This version of Vue is written with ES6 and does not support Internet Explorer 11 by default. Vue 3 uses the es6 Proxy feature as a core part of its new reactivity system, which is supported by Edge 12 and up.

However, Vue 3 will also decouple it's reactivity system from Vue core into a separate package, and will ship with a compatibility build that supports IE11 [2], using the old reactivity system. But Vue 3 has not yet been officially released (beta is available[4]), should we start with it anyway?

Open questions:

  • Should we start DIP using Vue 2 or Vue 3
  • If we start with Vue 2, will that require a major effort to upgrade to Vue 3?
  • If we start with Vue 3, should we use the old reactivity system & support IE 11?
  • Does Vue 3 need another security review? Vue 2 was reviewed in T168264.
  • What version is or will be available in Core?
  1. https://vuejs.org/v2/guide/installation.html
  2. https://www.mediawiki.org/wiki/Compatibility#cite_note-5
  3. https://medium.com/vue-mastery/evan-you-previews-vue-js-3-0-ab063dec3547
  4. https://github.com/vuejs/vue-next/releases/tag/v3.0.0-beta.1

Event Timeline

Restricted Application changed the subtype of this task from "Task" to "Spike". · View Herald TranscriptApr 8 2020, 2:41 PM
Niedzielski renamed this task from [Spike] Should Desktop Improvements use Vue 2 or Vue 3? to [Spike] Should Desktop Improvements use Vue 2 or Vue 3 for Vue.js search?.Apr 8 2020, 2:43 PM
Niedzielski updated the task description. (Show Details)

Personally, I would rather start with the v3 ecosystem knowing there's a risk we may have to migrate backwards to v2. The alternative is to go with v2 and know for sure that we have to migrate up to v3.

When googling "is Vue 3 production ready" this single forum post (which is clearly the definitive source of truth) says "no". But will Vue 3 be production ready by the time we want to deploy the search widget? Hopefully!

Regardless, my thinking on this decision rests primarily on one question:

What version is or will be available in Core?

And as of February 6th 2020, that's Vue 2.6.11.

@Catrope, can the Vue 3 beta be made available in Core (maybe as a vue-next module)? If not now, what do you think the timeline would be?

@Catrope, can the Vue 3 beta be made available in Core (maybe as a vue-next module)? If not now, what do you think the timeline would be?

I don't think we should make a non-production-ready version of Vue available in MW core. I also don't think making multiple versions of Vue available would be helpful, probably not even in a migration context. It would be way too easy to end up loading both versions of Vue on the same page (to support some Vue 2 features and some Vue 3 features), and any shared code (like component libraries) would either depend on one version of the other, or have to be forked so that there's a Vue 2 and Vue 3 version of them (at least for dependency management purposes; the actual code may or may not be very different).

Migrating from Vue 2 to Vue 3 will likely not be a big change for most code, it'll just add features. The things being deprecated/removed are obscure things, for the most part. The initialization code will change, which I think is going to be the hardest part to deal with, but we could wrap that with a compatibility wrapper, or advocate for the Vue 3 compat build to support both calling styles. For everything else, I'm hoping we'll be able to have a smooth migration using the compat build. Additionally, most new features in Vue 3 are available as plugins for Vue 2, and we could start using those before we upgrade.

Here's an example of what a Vue 2 -> Vue 3 migration looks like. I'll file a task for pre-planning the migration so that we can get ahead of some of those changes, and minimize the amount of work we need to do in the future.

ovasileva renamed this task from [Spike] Should Desktop Improvements use Vue 2 or Vue 3 for Vue.js search? to [Spike 8hrs] Should Desktop Improvements use Vue 2 or Vue 3 for Vue.js search?.May 4 2020, 5:21 PM
ovasileva assigned this task to Holger.
ovasileva triaged this task as High priority.

Thanks, @Catrope!

Additionally, most new features in Vue 3 are available as plugins for Vue 2, and we could start using those before we upgrade.

@nray, mentioned this as well for Vue 2 with the composition API.

I mentioned the possibility of using the composition API plugin with Vue 2, however the following is mentioned on the plugin's github page :

Note: the primary goal of this package is to allow the community to experiment with the API and provide feedback before it's finalized. The implementation may contain minor inconsistencies with the RFC as the latter gets updated. We do not recommend using this package for production yet at this stage.

😞Since it is also considered "not ready for production" though, I'm not sure if that would offer any advantages over using Vue 3 beta .

I'll file a task for pre-planning the migration so that we can get ahead of some of those changes, and minimize the amount of work we need to do in the future.

I forgot to mention: I've now filed this task. T251974: Pre-plan Vue 2 to Vue 3 migration

holger.knust added subscribers: Holger, holger.knust.

Vue 3 Motivations
Vue 3 aims to alleviate 3 concerns developer raised about Vue 2:

  • Limited Typescript support
  • Code readability diminishes as component size growths
  • Code reuse strategies (mixins, mixin factories, scoped slots) used in Vue 2 have drawbacks, e.g. unclear separation of concerns and slower performance.

For the purpose of T244392, Typescript support is irrelevant. Code reusability is probably not a major concern for the search component since most of the functionality is provided via API calls. Code readability has the potential to be problematic but could be addressed by using the Composition API with Vue 2. The Composition API separates concerns using composition functions and makes it easier to split component code over multiple files to enhance readability and maintainability without sacrificing performance.

Key Differences

  • Faster rendering through Virtual DOM rewrite, dynamic/static content separation
  • Proxy-based reactivity (faster but drops support for IE)
  • Composition API built-in (adds ~12KB to Vue 2)
  • Introduces some breaking changes in that previous global methods, e.g. Vue.set(), would need to be imported before use
  • Introduces renamed lifecycle hooks and 2 new hooks

Unlike previous announcements indicated the library sizes of the two version do not appear significantly different

Variant / LibraryVue 2.6.11Composition APIVue 3.0.0-beta.9
Runtime only63KB / 23KBN/A63KB / 24KB
Full92KB / 33KB12KB / 5KB95KB / 46KB

All sizes are rounded (actual file size in KB / deflated size in KB over network if compression is enabled)

Risk
Vue 3 is still in beta at the time of this writing with beta.10 being released earlier yesterday. Version 3 entered the alpha phase on January 3, 2020 and entered the beta phase on April 16, 2020. The official road map does not contain a release date or time frame. It is unclear if the final release will be made prior to the target release date for the search component.

Recommendation
Since existing projects, e.g. Wikibase, already rely on the Vue version currently bundled with ResourceLoader, i.e. 2.6.11 and there is no compelling technical reason to break existing components to build the search component, the recommendation is to continue with 2.6.x for this project. It may be advisable to add the Composition API into ResourceLoader to take advantage of some of the Vue 3 features and make a later transition to 3.x smoother.

Thank you, @holger.knust (and thanks for the note, @Catrope)! I'll sign this off next week if someone doesn't beat me to it.

Niedzielski reassigned this task from Niedzielski to holger.knust.

Thank you @holger.knust, @Jdrewniak, @Catrope, @nray, and Web! Vue 2.x it is.