Summary of the IRC meeting on #wikimedia-office on Feb 22, per https://tools.wmflabs.org/meetbot/wikimedia-office/2020/wikimedia-office.2020-02-19-22.03.html

• EricGardner made a demonstration extension that shows off these features: https://github.com/egardner/mediawiki-extensions-VueTest (KateChapman, 22:16:39)
• <EricGardner> That extension repo also contains a lot of documentation that may be useful for folks getting started with Vue, and some additional config for linters, test runners, etc that I found useful (KateChapman, 22:16:51)
• <EricGardner> Also, one important limitation of the approach Roan is describing is that JS still needs to be written in ES5 (KateChapman, 22:17:04)
• <Nikerabbit> Are there other things besides ES6 that aren't supported yet, but maybe in the future? (KateChapman, 22:21:47)
• https://vue-composition-api-rfc.netlify.com/ (milimetric, 22:24:47)
• It is required for our scale and range (core/extensions, multiple orgs/teams, community gadgets) that the framework strictly follow a no-breaking-change rule other than removal of deprecated functionality after replacements are added in a previous release. (Krinkle, 22:43:28)

Full logs: https://tools.wmflabs.org/meetbot/wikimedia-office/2020/wikimedia-office.2020-02-19-22.03.log.html

From skimming the logs, it seems that there are lots of details to be explored, but none of them block the RFC as proposed. Is that a fair summary?

22:43:28 <Krinkle> #info It is required for our scale and range (core/extensions, multiple orgs/teams, community gadgets) that the framework strictly follow a no-breaking-change rule other than removal of deprecated functionality after replacements are added in a previous release.

Vue 3 planned multiple major breaking changes: removal of the filter, change of v-model, removal of inline-template, removal of data object declaration, etc. Those APIs are not deprecated in Vue 2, and those APIs are user-facing API that mediawiki developers should directly call. You can check https://github.com/vuejs/rfcs/issues?q=label%3A%22breaking+change%22+is%3Amerged for further details.

Is this really OK for this RFC? For me Vue.js looks like doesn't meet this requirements, which possibly blocks the RFC.

In T241180#5851832, @Michael wrote:

That sounds intriguing, but unfortunately, it uses template literals which are not available in IE 11. So since IE11 still considered a modern browser that gets the highest level of support from MediaWiki, we would still need a build step to ensure that all features are working there as well.

https://github.com/developit/htm does support IE11. Weather to use template literals or not is totally up to users. Since template literals is just another form of function call. You can call htm directly without template literals syntax. Check this out: https://github.com/simnalamburt/snippets/blob/b49265b1/html/htm-without-es6.html#L21-L42

Also you can always use https://babeljs.io/docs/en/babel-standalone in the browser too.

In T241180#5912969, @simnalamburt wrote:

You can call htm directly without template literals syntax. Check this out: https://github.com/simnalamburt/snippets/blob/b49265b1/html/htm-without-es6.html#L21-L42

Snippet:

return html('\
  <ul>\
    ',list.map(function(e) { return html('<li>',e,'</li>') }),'\
  </ul>\
')

I can see the horror on the face of designers.
It's great that it's possible, but for the "benefit" of IE11, I wouldn't take that path of suffering.

Server-side transpiling / compiling a separate bundle for IE11 would be the approach I'm interested in.

Project lead of Vue.js here. Anything I say is obviously going to be biased, so take them with a grain of salt, but I'll try my best to reason with objective facts.

The main reason I'm posting is because @simnalamburt 's arguments above which seem to be heavily biased, unnecessarily hostile and intentionally misleading.

In T241180#5843150, @simnalamburt wrote:

1. Vue is Evan You's one-person project, which poses a risk to MediaWiki's sustainability.

Yes, they do have a team, but who maintains the actual Vue project is only one person[1][2], Evan You, the creator of Vue. Unfortunately, there’s no active outside collaborator either.

[1]: https://github.com/vuejs/vue/graphs/contributors
[2]: https://github.com/vuejs/vue-next/graphs/contributors

The Vue.js project is not just the core library. It's made up of the core lib, the supporting libraries (router, vuex), CLI, build tools, devtools extension, and the documentation. Me as the project lead is primarily focused on the core, while most of the supporting libraries are now fully maintained by team members. For example:

• https://github.com/vuejs/vue-router is maintained by https://github.com/posva
• https://github.com/vuejs/vuex is maintained by https://github.com/ktsn
• https://github.com/vuejs/vue-cli is maintained by https://github.com/sodatea
• https://github.com/vuejs/vue-devtools is maintained by https://github.com/Akryum
• https://github.com/vuejs/vuejs.org is maintained by https://github.com/chrisvfritz, https://github.com/phanan, https://github.com/sdras, https://github.com/NataliaTepluhina and many more.

In comparison, projects like React is a monorepo that puts most of its official packages AND the documentation in a single repository. So comparing the contributor graphs of facebook/react and the Vue core repo will be highly misleading.

Bottom line: It is inaccurate and misleading to cite only the core repo trying to label it as a "one-person project".

If Evan is forced to stop managing Vue due to certain circumstances, MediaWiki will have to manage Vue or change the framework again, which is undesirable.

This brings up an interesting topic that has been discussed earlier in the thread: the sustainability of the project.

I have been working on Vue full time for over 4 years now. The user count (primarily based on Vue Devtools weekly active) has been growing at 1.7~2X year over year. The financial backing from sponsors have been growing at a similar pace (aside from myself, we now have two devs, https://github.com/posva and https://github.com/sodatea working full time on Vue related projects thanks to our sponsors on OpenCollective (https://opencollective.com/vuejs, a 501(c)(6) account hosted under the Open Source Collective)).

As you can see from my personal Patreon and our OpenCollective, the sponsor sources are very diverse and there is no single dominant backer. We have seen sponsors come and go, but the overall sponsorship amount has been consistently growing for years.

Bottom line: the project is financially very stable and bears minimal risk in sudden stoppage of development.

Also, React’s decision making is more predictable and transparent than Vue. React has an RFC process and decisions are made by the consensus of the React core team. Vue has an RFC process too, but only one person Evan You decides whether to accept or reject the RFC[3].

[3]: https://github.com/vuejs/rfcs/pulls?q=is%3Apr+is%3Aclosed

This is factually wrong. Every merged RFC has reached consensus inside the Vue core team - I'm just the one doing the actual merging. Most of the RFCs actually goes through an internal draft phase before they are made public, so technically the team consensus happens even before they are submitted as a pull request. If a core team member opposes an RFC, they also have all the rights to comment directly under that RFC thread and voice their opinions. Feel free to ask any of our core team members if that is true, but PLEASE do not spread misinformation as if they are facts.

2. React evolves in a stable and reliable way, while Vue breaks APIs.

When Vue was upgraded from 1 to 2, there were tons of breaking changes[4].

This was over 3 years ago. That is to say: we haven't shipped breaking changes in 3 years.

Now, Evan You is also preparing Vue 3, which has major breaking changes[5] again: removal of the filter[6], change of v-model[7], inline-template[8], etc. This RFC mentioned the transition feature, and it’ll be changed[9] too.

We established the RFC process with the exact purpose to let our users know about them and provide feedback in advance. If you look at the dates, the first RFC with breaking change for v3 was proposed more than a year ago (https://github.com/vuejs/rfcs/pull/8).

These RFCs are not arbitrary: we only introduce breaking changes if we consider it a reasonable trade-off, and that our users agree with it. In every breaking change RFC, we carefully consider the implications of these changes and how much they would affect existing usage. Every RFC has a dedicated section discussing the adoption strategy on how we can provide a reasonable migration path - many of them will be supported with a compatibility build with deprecation warnings (this is what we did for the 1.x -> 2.x upgrade as well). We are doing all this exactly because we care about stability.

On the other hand, React has been evolved in a more stable way[10][11]. Not only the number of breaking changes was much less than Vue, but also all those breaking changes were changes of only behavior, not API. All removed APIs were deprecated a year ago, so there was an enough time for users.

I don't think the comparison justifies your conclusion that "React has been evolved in a more stable way". Objectively, you would have to make more code changes as a result of React "changing behavior" in the past 3 years compared to Vue (where you literally have to make 0 changes).

Another tangent point here: many in this thread have argued against the stability point in the original RFC citing how stable React core is, but missing the point that the RFC was referring to not just the core libs, but also "related tools and best practices". If we look at how the React state management solutions are moving from Flux -> Redux -> MobX -> Immer -> Hooks, how logic reuse are moving from mixins -> higher order components -> render props -> hooks, and how there are over 60 different CSS-in-JS solutions each claiming to be the best.

Personally, I think it is great that the React ecosystem has been continuously experimenting with new ideas, but I think it's also fair to say that "best practices" in the React ecosystem is a target that moves much faster than that in the Vue ecosystem.

It is also worth mentioning that Concurrent Mode, which is arguably the biggest feature that the React team has been working on for over 3 years, requires users to write React code in a "concurrent-safe way" - i.e. staying away from mutable state, and following a number of rules that contradicts with common patterns seen in pre-concurrent-mode usage. The design of React Hooks is a result of trying to introduce a concurrent-friendly API to replace classes, however in trying to stay concurrent-safe, Hooks introduces a whole new category of usability issues, e.g. the need to manually list dependencies to invalidate stale closures, and the need to manually memoize callbacks with useMemo to prevent unnecessary re-renders. Full-on concurrent mode, once enabled, also makes your app non-compatible with a large part of the existing ecosystem because many libraries are not "concurrent-safe". Code written with Hooks and Concurrent mode enabled will look drastically different form React code that was written 3 years ago.

That said - I think the React team is doing a great job at shipping such drastic paradigm shifts in a backwards compatible fashion, but claiming that React is more stable than Vue just doesn't make sense.

However, Vue is a one-person project with no incentive to maintain backward compatibility despite the hard work. Evan You is already overwhelmed with managing Vue alone and can't afford to maintain API compatibility. Vue pursues multiple values as a design principle but stability is not one of them.

Again, sounds like baseless accusations to me. Hopefully the RFC process section above has already addressed this point.

4. React is evolving much faster than Vue.

Since Vue 2.5 which was released at 2017-10-13, the development pace of Vue has seriously decreased. Since then, Vue 2.6 (2019-02-04) was the only release that had new features. And since Vue 2.6, Vue 2.x became in maintenance mode which means it’s fixing only bugs and security vulnerabilities.

It is true that Vue 2.x has been in maintenance mode for a year. This is because we have been focusing on making major improvements to the framework in v3, which comes with a ton of fundamental improvements and new features. Also, the Composition API has already been made available for 2.x as a plugin during this period.

And Vue 3 has been in preview for 2 years.

Factually incorrect: We first announced the plan to work on Vue 3 in September 2018 (https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf). Vue 3 has been in alpha stage since Jan 3rd (https://github.com/vuejs/vue-next/releases/tag/v3.0.0-alpha.0) with most of the planned improvements and new features completed and we are set for beta in the coming months.

Within the same period, React evolved dramatically. Fragments, Portals, React Fiber, Suspense, Hooks. These new features impacted the whole frontend community and impacted Vue 3 too. Not to mention that React not only evolved fast but also preserved the API letting existing codes works.

Do realize that the development of frameworks is not a race about who moves faster. Designing and shipping major new features is a lengthy process and each team will do it at different paces and timings. Picking an arbitrary time frame and comparing the number of new features shipped most likely leads to skewed conclusions.

5. Bigger community, more contributors, more free lunch.

As you mentioned, React has a much larger community with many more programmers. Which means MediaWiki can get much more potential contributors by choosing React. And MediaWiki team will be able to save more time since there are many stable libraries out there.

Community size has marginal returns once it grows beyond a certain threshold. With over 1 million active users worldwide, I personally believe the Vue community is "big enough" to provide anything the React community can provide.

In terms of contributors, the entry of barrier could play an important role too. I would imagine that not all potential contributors to MediaWiki are JavaScript veterans who already know how React works, but it should be fairly easy to grasp HTML templates.

A separate comment regarding shipping the runtime compiler:

• The runtime-only build of Vue is ~23kb gzipped, and ~33kb with the compiler. The compiler itself is only 10kb gzipped extra payload. In fact, we consciously design our compiler to minimize its size because its potential usage in the browser.
  • In comparison, to compile JSX at runtime, it requires the entire Babel runtime which is not optimized for payload size at all.

• Typically, compiling a decently sized template takes around a few milliseconds on an average laptop (depends on template size, obviously). The cost of runtime compilation will be well within reasonable range if the use case is embedding a few interactive widgets on a page with largely pre-rendered content. That said, I would recommend benchmarking the cost of runtime compilation in prototypes or smaller scale scenarios to properly gauge whether the cost is something acceptable for the intended use cases.

Thank you for the excellent detailed reply, @EvanYou. This is a great summary of the points, and gives a good perspective to this RFC and the entire modernization endeavor in general.

I would also make the point that historically, the Wikimedia movement has been very active in contributing upstream to whatever libraries we've been using. Our use cases tend to expose some unique behaviors and we can then help make the solutions and supporting libraries more robust. We've been doing that consistently with other libraries over the years, whether it is with patches and fixes to the existing code or with supporting libraries around it.

Having an environment that supports and encourages such collaboration in general is another plus to consider.

Hi @EvanYou I'm actually grateful to see you here! Since the framework authors rarely participate in discussions on which framework to use.

First of all, I'm sorry to hear that my comment felt aggressive. I want to tell you that my comments are not about "Vue/React is better than the other" or personally attack you or Vue project. It's about which framework better meets MediaWiki's needs. After reading you comments, I realized that some parts of my comments were misleading and some parts of my comments were even based on misunderstanding but I'd like to tell you that none of them was intentional. I'll try not to sound hostile in this time with my limited English skill.

About the bus factor

Yes I knew and I actually mentioned that Vue.js project have a team which maintains multiple supporting libraries, and there's nothing wrong with you focusing on Vue core. Looks like it was not a wise word choice to tell Vue core as "actual Vue project" (sorry for my English). But I think the fact that the Vue core is managed by one person is worth mentioning in the RFC's review process. There were several people who already mentioned this point in this RFC. This issue is what people actually care.

As far as I know, React core and ReactDOM is maintained by four people: Dan Abramov, Brian Vaughn, Andrew Clark, and Sebastian Markbage. They are not the founders of React, and React source code has been handed over by several developers over time. And this history is a strong credit for React's sustainability. Since you can trust that development will be continued even if some developers are forced to stop the contribution due to developers' circumstances.

I know Vue.js is financially stable and actually that's very grateful thing! But I think it's still a risk that Vue core is being developed by one developer. If https://github.com/posva or https://github.com/sodatea or anyone else are planned to participate in the development of Vue core, I will withdraw this statement. But in the current state, the bus factor of the Vue core seems to be one.

Yes it's Vue core not entire Vue. But still, bus factor 1 for Vue core sounds dangerous for MediaWiki.

About the RFC process

Sorry for the misunderstanding. I've been watching the Vue.js RFC, and I found that the person from Vue team who comments/merges/closes the RFCs was mostly by you, so I thought you were the decision maker. Even some RFCs were created by the Vue team people and closed by the Vue team people, so I couldn't imagine the discussions taking place outside of the GitHub Issue Tracker. Are there public channels or places where Vue team people discuss these RFCs? If so, there will be no more person like me who thinks Vue's decisions are not transparent or unpredictable.

About the breaking changes

I agree that those breaking changes introduced in Vue 2 and planned for Vue 3 is reasonable and necessary. And actually there's nothing wrong with it. As a programmer I'm actually a big fan of breaking APIs for progression, and I've never personally complained about it. But because MediaWiki is a project that takes backward compatibility seriously, I think it worth mentioning in the review of this RFC.

Vue.js indeed didn't shipped breaking changes or changing behavior in last 3 years is because Vue.js 2.0.0 was released at 2016-10-01. React didn't shipped breaking changes or changing behavior in last 2 years too, since React 16.0.0 was released at 2017-09-26. What we need to compare is how it was to migrate Vue 1.x → 2.x → 3.x and React 0.14 → 15 → 16 → 17.

• Was removed or changed API of future release were deprecated, or marked as unstable beforehand?
• How much code modification is required for the migration process?
• How much code will be affected by the change?

https://reactjs.org/blog/2016/04/07/react-v15.html#breaking-changes This is React 0.14 → 15 migration document. All removed APIs were deprecated in 0.14. There is 3 behavioral changes and only 2 of them impacts applications. The first one required small amount of code change at least in Facebook, and the second one is actually bugfix.

https://reactjs.org/blog/2017/09/26/react-v16.0.html#breaking-changes This is React 15 → 16 migration document. All removed APIs were depreacted in 15, and those removed APIs are still supported as separate packages without performance overhead, so React component modification were not required. Only import ... from ... codes needed changes and automatic migration tool (codemon) for that was provided. Behavioral changes are actually change of unsupported behavior and bugfixes like "Now componentWillMount hooks will be called in deterministic order".

There's no list of planned breaking changes for React 17 but we can talk about React Concurrent Mode. If users want to use Concurrent Mode users need to rewrite codes in concurrent-safe way. If users can't afford the migration costs, then Blocking Mode will be suffice since it does not require such code overhaul.

https://vuejs.org/v2/guide/migration.html This is Vue 1.x → 2.x migration document. There're quite many breaking changes and, AFAIK most APIs were not deprecated or marked as unstable beforehand. Many of them requires code modification but thankfully there is migration helper. Most changes were made to daily APIs so most users were affected.

https://github.com/vuejs/rfcs/issues?q=label%3A"breaking+change"+is%3Amerged This is planned Vue 2.x → 3.x breaking changes. AFAIK most APIs are not deprecated or marked as unstable in Vue 2.x yet, but this can be changed in future Vue 2.x releases. It is good to see that total number of breaking changes itself is much smaller than 1.x → 2.x, but still many of them requires code midification. I heard that Vue team is going to release a compatibility builds which provides backward compatibility with a cost of performance impact.

Overall, the React team always had deprecation process before API changes, and always stressed that "only a small number of codes should be affected" even if code modification is needed. There was a case where an deprecated API used by a large number of code was deleted, but that API is still supported by seperate packages so didn't need to update React component codes.

Vue does not seem to have a deprecation process yet. Instead, Vue provides migration helper which tells you how to change your codes and compatibility build with a runtime cost.

Evaluating these facts, I think React preserves API stability better than Vue. And I do not think this comparison is heavily biased. MediaWiki is a project that takes backward compatibility very seriously, and we need to think about whether Vue meets the following criteria:

22:43:28 <Krinkle> #info It is required for our scale and range (core/extensions, multiple orgs/teams, community gadgets) that the framework strictly follow a no-breaking-change rule other than removal of deprecated functionality after replacements are added in a previous release.

About moving library trend and new ways to write components.

Library trend doesn't define best practices. Redux still works in production without issue and MobX too. Actually those libraries are different thing that each have its pros and cons. In 2020 many people writes functional component with hooks but still the other many people write codes in class component with redux and there's nothing wrong about it. There is a phrase that Dan Abramov always repeats on the Internet: You don't need to rewrite your codes in <something new>.

• You might not need redux https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
• Mixins are OK https://twitter.com/dan_abramov/status/1041788614928203777
• createClass is OK https://twitter.com/dan_abramov/status/1041790225318649857 https://twitter.com/dan_abramov/status/1067817945139691520
• You don't need to rewrite in hooks https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both https://twitter.com/dan_abramov/status/1109574256734752768 https://twitter.com/dan_abramov/status/1118107150918746112

React always maintained API stability for those "old fassioned" codes and this value perfectly aligns with MediaWiki's needs.

About the pace of development

I think it is undeniable that React led the introduction and development of various paradigms in stable and fast way. React is suitable for projects that need to evolve for a long time, such as MediaWIki, because it actively introduces a new paradigm and at the same time reliably introduces APIs. The reason that I selected a certain time frame is to compare two frameworks in objective way. If you think my conclusion is distorted, I wonder what your opinion is.

About the community size

Honestly I can't predict how the size of the community will affect MediaWiki. But I think that having a larger community will at least not adversely affect MediaWiki.

In summary, I still thinks React will be more conducive to MediaWiki's sustainability. If you think differently, comments are always welcome. Just please execuse my extremely slow English writing.

Please note that I'm not the one who claims to not use Vue at all. As mentioned above, I even used Vue voluntarily in my day job and that project is still maintained. Not to blame you or your project, but to determine which project would be a better fit for MediaWiki, I hope we can have a nice and enjoyable discussion. :)

P.S.

To be honest, the another reason that I'm glad to see @EvanYou here is because he is the first person who reacted with my main points. I've read the IRC meeting logs of #wikimedia-office on Feb 22, and no one reacted to my comments. It seems like the decision to use Vue.js has already been made.

Comments such as "why not React" would really have to show why our current implementation path won't work at all

No implementation path won't work at all. Even continue using jQuery and OOjs will somehow work. I just tried to sort out the pros and cons of what I know, since this is RFC(Request For Comments).

If FAWG decided to take these shortcomings and just move on, please let me know. Or if FAWG have already developed too much with Vue.js and can't get it back, please let me know. If FAWG decided to use Vue.js as MediaWiki developers' personal preference, please let me know. MediaWiki is an open source project, but in the end most of the work is done by the developers of MediaWiki, and I think it's better to follow it if there is a clear preference from the developers of MediaWiki. If for some reason you've already decided to use Vue.js, I won't comment anymore. I'm a third party with little contribution to MediaWiki anyway.

Hello, @EvanYou!

Thank you for your detailed response from which we learned a lot. Please forgive us, if any of the opinions in this discussion were inappropriate or incorrect, I assume that was not the intention, even if these are very direct and opinionated.

Please note that both simnalamburt and myself are volunteers / users of this project. Our opinions are personal, even if it might sound as representing more than that.

In T241180#5921939, @simnalamburt wrote:

But I think the fact that the Vue core is managed by one person is worth mentioning in the RFC's review process. There were several people who already mentioned this point in this RFC. This issue is what people actually care.

Please do not generalize based on your opinion and another one or two person's similar focus. While I do care about this as a fact, it is not an issue in my opinion. I understand how such an implication can be perceived as hostile. It is clear that there's a healthy community around Vue and quite a few developers who are able to continue core development if the need arises. The core being maintained by one specific person is more of a management question, rather than an issue as you suggest.

Yes it's Vue core not entire Vue. But still, bus factor 1 for Vue core sounds dangerous for MediaWiki.

As detailed above, not at all, imho. A note on the fine details of the English language: using a less dramatic word like "perceived risk" is more factual and might be more welcome. Every engineering decision is a balance between risks and benefits. Imho this "risk" is mostly speculative and far outweighed by the benefits of progressive adaptability and friendliness towards non-developers in Vue.

[...] But because MediaWiki is a project that takes backward compatibility seriously, I think it worth mentioning in the review of this RFC.

That's only true in certain cases. Generally, MediaWiki operators had great difficulties migrating from certain versions in the past. In fact, there's much more effort and thought invested into the migration aspect of Vue than MediaWiki. While the basic approach in MediaWiki is to not change things, but instead carry the technical debt, Vue has a well thought-out process to facilitate changes and migration. There are a few lessons there that we could learn to clean up MW's code-base, thereby reducing the size of the big JS bundles (300+ KiB compressed) sent to clients.

I stepped away from this discussion for a moment, but I wanted to say thanks to everyone for all the thoughtful contributions. And a special thanks to @EvanYou for engaging with us here, it's really great to have his perspective as the creator of the framework under discussion! Thanks for sharing some information about how the Vue team is managing the introduction of new features and project sustainability.

I also appreciate all the thoughtful comments in favor of alternative approaches like React. I think @simnalamburt has done a good job articulating React's strong points. Everything that's been shared in the course of this RFC discussion will help to inform what the Foundation does as we try to figure out how to modernize the front-end of a 15+-year-old tech stack that serves billions of people.

Personally, I still think that Vue is a better fit for WMF for a couple of reasons, a few of which Evan just mentioned upthread.

Stability: I've used Vue since version 0.12, and the single biggest breaking change I experienced was the removal of the filter option. It was pretty straightforward to migrate the same functionality to methods and/or computed properties. New features have been added but the core APIs have remained very stable. And, equally important in my mind, the community-defined best-practices have also remained pretty stable. I thought Evan expressed this very succinctly:

Another tangent point here: many in this thread have argued against the stability point in the original RFC citing how stable React core is, but missing the point that the RFC was referring to not just the core libs, but also "related tools and best practices". If we look at how the React state management solutions are moving from Flux -> Redux -> MobX -> Immer -> Hooks, how logic reuse are moving from mixins -> higher order components -> render props -> hooks, and how there are over 60 different CSS-in-JS solutions each claiming to be the best.

I think the Vue community has figured out how to continue evolving without embracing this level of fragmentation – but unlike Ember (which espouses a similar approach), there is still a lot of flexibility in how the tools are used. I think this is a good fit for MediaWiki. We don't need to live on the bleeding edge as long as we aren't stagnating. I don't even think Vue is "behind" React, there are just different priorities.

Compatibility: The other big point in favor of Vue in my opinion is its emphasis on backwards compatibility. We still provide first-class support for IE 11. We also don't have a standard process for compiling or transpiling front-end code in place yet. We are still unable to use "ES2015" features in 2020. Using React without Babel and JSX seems like a huge headache (I appreciate @simnalamburt's mention of HTM, but that library still relies on template literals, which we can't use in IE). It is possible to use React outside of a modern JS environment, but I'd say that Vue provides much better support. Our initial experiments in modifying our PHP-based front-end module system to support Vue single-file components (with JS code in ES5 of course) have been very promising. I think Vue and React offer very similar benefits (reactivity, component-based APIs, state management, more test-able front-end code, performance, etc.), but the migration path for using Vue looks much easier from where we currently stand. The fact that Vue provides a template compiler optimized for in-browser usage is a big part of this; to my knowledge Vue is unique in this respect.

These are my personal views, but I think they are shared by many members of the FAWG (where we discussed some of these topics at length). Wikimedia Deutschland (our sister org, which is behind the Wikidata project) also decided to start using Vue a few years back and it seems to have worked out well for them. But we'll continue to evaluate these decisions as we move forward with experiments and pilot projects.

Thank you @EvanYou, your answer was enlightening. To dig a bit more into the compatibility builds you mentioned here:

Every RFC has a dedicated section discussing the adoption strategy on how we can provide a reasonable migration path - many of them will be supported with a compatibility build with deprecation warnings (this is what we did for the 1.x -> 2.x upgrade as well).

I'm not at all comparing, but we were put in a tough situation in the past when jQuery UI didn't follow this particular semver practice: https://semver.org/#how-should-i-handle-deprecating-functionality. It sounds like Vue does follow this with compatibility builds, but you say "many of them" instead of "all". In our ecosystem we support user-written gadgets and scripts, and it's not scalable to migrate all of them without a compatibility build. For the 2 -> 3 migration, we think we can manage because we're just starting to adopt Vue and we have more control. But going forward, do you think it's possible for Vue to adopt the semver deprecation policy more absolutely?

@Demian Thank you! You're the second person who discussed about my main points! Comments are always welcomed!

About the bus factor

I also don't care about the Bus Factor when I do my personal projects. I've been always a big fan of "Let's take a risk and move forward". But is this OK too for WikiMedia? Don't WikiMedia developers care about Bus factors either like me? But I think it worths a discussion.

I've seen many cases[1][2][3] talking about bus factors in WikiMedia discussion. Argo CI has even been rated as having a bad bus factor because it was two people.[4] You said that saying "people do care about bus factors" is a generalization but it seem like people actually care about the bus factor to me.

[1]: https://www.mail-archive.com/[email protected]/msg05410.html
[2]: https://phabricator.wikimedia.org/T28#1081799
[3]: https://phabricator.wikimedia.org/T221112
[4]: https://www.mediawiki.org/w/index.php?title=Wikimedia_Release_Engineering_Team/CI_Evaluation_Cabal/2019-09-17&oldid=3611926

Of course, we can always choose to take risks. To do so, let's just discuss about this risk and make a decision. I don't know if I missed it, but so far it doesn't seem that the RFC has been modified to take this risk, or that a member of the FAWG has said to take this risk. Please feel free to say "we can take that and let's move forward"! Let's have some discussion and get some consensus.

About the breaking changes

I think this is the exactly the certain case that MediaWiki takes compatibility seriously. Since the framework choosed in this RFC will not only used inside MediaWiki but also shared accross whole MediaWiki frontend community like extensions, gadgets, user scripts, etc. I have seen oojs being careful to even update jQuery to avoid breaking changes, and have seen oojs-ui do deprecation before breaking changes. But as I said Vue does not have a deprecation process and I'm concerned about this.

If a deprecation process is added to Vue in the future, this claim will be withdrawn. At present, however, WikiMedia seems to have to give up its requirements that "strictly follow a no-breaking-change rule other than removal of deprecated functionality after replacements are added in a previous release".

@egardner Thanks for the comments and I agree that the migration of Vue is not so painful. I'm just saying that migration of React is easier because it have deprecation process and doesn't require component code modifications in many cases.

As I mentioned in https://phabricator.wikimedia.org/T241180#5921939, the library trend is not best practice. Just as WikiMedia doesn't have to use React just because people use React the most, people don't have to use Redux just because they use Redux the most, and not rewrite all the code because trend has changed.

There is a phrase that Dan Abramov always repeats on the Internet: You don't need to rewrite your codes in <something new>.

• You might not need redux https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
• Mixins are OK https://twitter.com/dan_abramov/status/1041788614928203777
• createClass is OK https://twitter.com/dan_abramov/status/1041790225318649857 https://twitter.com/dan_abramov/status/1067817945139691520
• You don't need to rewrite in hooks https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both https://twitter.com/dan_abramov/status/1109574256734752768 https://twitter.com/dan_abramov/status/1118107150918746112

These library choices are not fragmantation. You can use class component and hooks in a same project and it's nothing wrong. You can use css modules and css-in-js in a same project and there's no issue with this. Sticking with old libraries are not stagnation. The "facebook.com" still containes thousands of components written in "createClass" and it works perfectly without issue, nicely interoping with new libraries or new components. I think this is a great advantage for projects like MediaWiki which have large user-written extentions and gadgets.

About using it without bundler

When I first read the RFC, I thought WikiMedia planned to put bundler or build steps in some form in the future. As I read it again, looks like there's no specific plan for now. It may even be possible to avoid building steps at all. I thought this is not a big deal since I thought that WikiMedia will have build steps in the future. But if not, I agree with you that this is seriouse developer experience issue.

From the TechCom discussion yesterday, and the discussion here, adaption of Vue seems to be blocked on commitment to a deprecation policy as outlined in https://semver.org/#how-should-i-handle-deprecating-functionality. Breaking changes without deprecation are not something we can handle, even if the necessary migration would be trivial. We just don't have the necessary level of control to "stop the world" and migrate.

Is this a fair summary? Are there any other critical points?

PS: An updated version of MediaWiki's own deprecation policy went on last call yesterday, see T193613: RFC: Establish stable interface policy for PHP code.

@daniel I think there should probably be some clarification regarding Vue's deprecation and versioning policies.

1. Vue sticks to semver and only ships breaking changes in major releases. This means as long as the user uses a proper semver range (e.g. ^2.6.0) with their package manager, they will never encounter unexpected breakage.

2. Vue introduces major version bumps at a much lower frequency compared to React or Angular, and it is our intention to stay on a major version as long as possible. So instead of deprecating and removing features once every several months, we tend to provide a relatively longer stable cycle (v2 -> v3 is 3 years) and group deprecations and feature removals around these major releases.

3. We have only done one major version bump (v1 -> v2) so far, and we have learned a lot over the three years about what can be improved about this process. This is why we announced v3 way ahead of time and introduced the RFC process to give the community ample time to prepare for the changes and even participate in the design process. Deprecation notices in a minor version before the next major is definitely something we can and should adopt.

4. For the v3 migration, this is the currently planned procedures:
   1. v2.7 will be released with deprecation warnings for features that are set for removal. This release will also become an LTS version with 18 months of extended support time.
   2. v3 will come with a "compatibility build" that exposes v2 behavior (where applicable) via feature flags and provide deprecation warnings / migration guidance when v2 usage is detected. v2 compat feature flags that can be turned off individually so the migration can be performed piecemeal.
   3. Codemods will be provided for simple API syntax changes that can be automatically upgraded.
   4. A migration helper will scan the codebase and provide guidance for any changes that cannot be covered by the compatibility build or codemods (we try our best to avoid such changes, but sometimes they are inevitable).

Hope this addresses the stability concerns.

In T241180#5923538, @EvanYou wrote:

4. For the v3 migration, this is the currently planned procedures:
   1. v2.7 will be released with deprecation warnings for features that are set for removal. This release will also become an LTS version with 18 months of extended support time.
   2. v3 will come with a "compatibility build" that exposes v2 behavior (where applicable) via feature flags and provide deprecation warnings / migration guidance when v2 usage is detected. v2 compat feature flags that can be turned off individually so the migration can be performed piecemeal.
   3. Codemods will be provided for simple API syntax changes that can be automatically upgraded.
   4. A migration helper will scan the codebase and provide guidance for any changes that cannot be covered by the compatibility build or codemods (we try our best to avoid such changes, but sometimes they are inevitable).

Hope this addresses the stability concerns.

I think the key issue here is the completeness of the compatibility build. The MediaWiki ecosystem involves MW core, many extensions (which are separate git repos), and gadgets and user scripts that are written by our users on wiki pages. This means that, in @daniel's words, we can't easily "stop the world" and migrate everything at once to deal with a breaking change. If there are breaking changes in Vue 3, then as soon as we upgrade the version of Vue that MW core uses from 2.6 (or 2.7) to 3.0, extensions that use features that are no longer supported will immediately break. But we also can't update that code in the extensions first, if doing so requires features that are only available in 3.0. With a somewhat annoying amount of effort, we could land all the migration changes in rapid succession and only have a broken master branch (and CI system) for an hour or so, then deploy all those changes at once. But for code that lives on-wiki, we can't do that: deploying Vue 3 before migrating that code would break, and migrating it before Vue is deployed would also break. It's (kind of) OK to break our development environment for an hour, but it's much less OK to break things on production wikis.

If the v3 compat build you mention provides full compatibility, such that all code written for v2 works with it and all code written for v3 does too, that would put us in a much better situation, where we can migrate more gradually. If it provides compatibility for most things, then maybe a smooth migration is still doable depending on what the missing features are (maybe they're rarely used and/or have good alternatives that we could pre-migrate them to). I don't know if you're far along enough to be able to shed some light on what level of compatibility you expect to be able to provide, but when you do have that information, it would be very helpful to have. It'll be the key factor determining how smooth or how rocky our migration path will be.

Having said all that, I should add two caveats. First, as @Milimetric said, we think we'll be able handle breaking changes a lot better for the Vue 2->3 migration, because we don't expect to have very much code to migrate yet by then. I also don't expect we'll have any on-wiki code using Vue at that point (or if we do, it'll be very little), because that requires some additional infrastructure that we haven't built yet. That means that the problems that an not-quite-fully-compatible compatibility build would cause would be much more manageable, and we're OK dealing with those. For Vue 3->4 and future migrations, a smooth migration path will be much more important. Second, a trivial migration path would be to expose both Vue2 and Vue3 as separate modules and let each piece of code load the version it needs, until everything is migrated (assuming that Vue2 and Vue3 instances can coexist on the same page). This would be challenging for shared components, and it certainly wouldn't be ideal from a performance perspective (I joked at a meeting this week that "nothing would break... except for my neck when the Performance Team sneaks into my apartment and murders me in my sleep"), but it could be an escape valve for isolated code that's especially difficult to migrate for whatever reason.

There seems to be an assumption made in a number of comments that while OOUI and other component libraries will stick around in the "short term", that in the medium term we would like to move away from using them. While for smaller apps, gadgets, special pages etc. that use a handful of buttons and textboxes, this is probably feasible, VisualEditor is tightly interwoven with OOUI to the point where we'd probably have to rewrite 30-50% of the codebase. Such a project would take years of developer time and cost the Foundation millions.

This doesn't mean we shouldn't look to introduce better ways to do things like this, the OOUI codebase is flawed and getting old, and no doubt something we write from scratch now will probably be better, but we need to be honest with ourselves about the technical debt we are incurring. If we don't have a plan to somehow integrate Vue & OOUI, we are committing to maintaining both as we certainly don't have the resources to ever fully drop OOUI.

I think mentioning two points are necessary here.
First, regarding breaking changes, I have been maintaining several gadgets in my home wiki at my volunteer capacity, the biggest reason I have been so reluctant to update my gadgets to OOUI (not to mention keeping it up-to-date with its breaking changes) is that it's really hard to comprehend and has a pretty steep learning curve, specially for a volunteer who has a pretty limited time. Not to mention other volunteers who are not professional programmers would have harder time. Having a modern and easy to understand framework would make it easier for volunteers to maintain their gadgets with breaking changes.

Breaking changes are a challenge for the new framework being adapted and definitely currently a problem in our ecosystem but I feel a modern one addresses the issue, at least to some degree, rather than making it worse.

In T241180#5928366, @Esanders wrote:

There seems to be an assumption made in a number of comments that while OOUI and other component libraries will stick around in the "short term", that in the medium term we would like to move away from using them. While for smaller apps, gadgets, special pages etc. that use a handful of buttons and textboxes, this is probably feasible, VisualEditor is tightly interwoven with OOUI to the point where we'd probably have to rewrite 30-50% of the codebase. Such a project would take years of developer time and cost the Foundation millions.

This doesn't mean we shouldn't look to introduce better ways to do things like this, the OOUI codebase is flawed and getting old, and no doubt something we write from scratch now will probably be better, but we need to be honest with ourselves about the technical debt we are incurring. If we don't have a plan to somehow integrate Vue & OOUI, we are committing to maintaining both as we certainly don't have the resources to ever fully drop OOUI.

Second, Your point is true, there will cost with adapting a new framework, specially for VE. I'm not disputing that but, and this is my feeling and I might be very wrong here please point out, I feel WMF doesn't spend much engineering resources on frontend as other user-facing tech organizations (of course, for example Apache foundation doesn't need that much frontend resources). This should change and this RFC, assuming it will be approved, can serve as justification for improving the situation.

In T241180#5928546, @Ladsgroup wrote:

Second, Your point is true, there will cost with adapting a new framework, specially for VE. I'm not disputing that but, and this is my feeling and I might be very wrong here please point out, I feel WMF doesn't spend much engineering resources on frontend as other user-facing tech organizations (of course, for example Apache foundation doesn't need that much frontend resources). This should change and this RFC, assuming it will be approved, can serve as justification for improving the situation.

I agree that this would be the ideal outcome, but we have to be realistic about our resourcing, and in the absence of real commitments to them changing drastically, be aware of the tech debt we are incurring.

My concern is that there is already a momentum around deploying Vue and it is even being used for new projects, but we haven't either (a) committed to that change in resourcing or (b) had a serious discussion around maintaining Vue & OOUI separately.

Per today's meeting of TechCom, this RFC is going on Last Call. If not concerns remain unaddressed by March 18, this RFC will be accepted as proposed.

TechCom considers all concerns raised so far in the discussion above to be sufficiently resolved. To specifically address the concern I raised last week, it now appears that we can be confident that sufficient compatibility mechanisms will be in place to allow for a smooth migration away from any deprecated features.

As to the question of maintaining or migrating OOUI: as far as I know, this has been part of the original discussions within the FAWG sub-group that evaluated vue.js. @kchapman can provide more information on resourcing of this effort.

TechCom approves this RFC with the understanding that a component library needs to be developed so use of Vue.js happens in a coordinated and reusable way. A migration path from OOUI needs to be included in this planning.

The Desktop Refresh search box pilot is exempt from this.

Vue.js and React are already deprecated. Web Components is the standard approach from W3C. I think it makes perfect sense for WikiMedia to use standards over proprietary frameworks that are on their death row. Anything Vue and React can do, you can also do with web components.

Web Components also does not require build steps as they run natively on the web. That is a huge pro for both development and the end user consuming the product. Not having a build step is also a great way to ease the road to using ES modules in production.

There are several libraries to help with the creation and usage of Web Component too, to make them closer API wise to Vue and React. Lit-Element is a popular solution: https://lit-element.polymer-project.org

I also see the discussion on costs above. Rewriting everything to a JS framework is signing up for another rewrite in 5 years. Web Components is standardized and won't have to be refactored in coming years. Also important to note that Web Components can run inside Vue for example. This is also true for framework X launching in 2028. If the frameworks supports HTML/DOM, it supports Web Components. The point being, the Foundation would save A LOT of money writing as much as possible in web components as early as possible. It's future proof. Vue, React or what have you can be used to orchestrate the web components into pages and/or bridge with the state machine and VDOM if such a layer is desireable.

I apologise in advance for the drive-by commentary, but I was reading through this thread and I found it pretty disturbing.

This proposal reads to me like you went into it already wanting to use Vue.js, then went through whatever mental gymnastics were necessary to retroactively justify that call. A better rationale would have started with "these are our pain points, and this is our evaluation of how these options address our problems." Things like this are less effective:

Better support for usage without Webpack/Babel/front-end build tools
We should still explore introducing a full build step in the future (including full support for module bundling, ES6+ transpilation via Babel, etc), but this is a non-trivial change to the architecture of MediaWiki.

Non-trivial changes, like rewriting frontend components with Vue? A build step for software has been commonplace since well before Wikimedia even existed, the idea of introducing one is non-controversial and should have been evaluated in its own right for benefits like offloading complexity to compile-time rather than run-time.

There's also little analysis here of the user-impact - this proposal is entirely focused on the developer experience. A project like Wikimedia has a userbase of "everyone", which means that making technology decisions that eschew even 1% of users would be taking tens of millions of people out of the equation. Techniques essential to all of these libraries, such as shadow DOM, are still unsupported by older browsers which collectively still represent ~5% of market share. And even on modern browsers, websites designed with these tools require more compute resources to display, making it more cumbersome or even impossible to use on low-end or older hardware. This proposal considers the performance of these libraries, but only relative to one another - not to the baseline. None of this was quantified, either, we're just given conclusions.

I would recommend that you reconsider your approach.

If anyone’s wondering where all these drive-by comments are coming from: we’re apparently making the rounds on Hacker News. Yay.

Folks: please understand that you’re extremely late to the party. We’ve been discussing this for months, and that’s not including all the work of the Frontend Architecture Working Group that led to this RFC in the first place. There’s been a “last call” period for anyone to raise concerns, and nothing new was brought up during those two weeks. I don’t think this means that commenting on this task is now completely forbidden (though I frankly don’t know what could come out of it, since I’m not aware of any process existing to reopen an RFC). But I think I can speak speak for many of us when I say that blanket statements such as “Vue and React … are on their death row” are not going to be met with an abundance of patience at this point.

@ddevault none of the solutions discussed in this thread relies on Shadow DOM.

Ah, that's right. I had forgotten there was a difference.

I did a deep popularity comparison of React, Vue and Angular here: https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190

The bottom line is that React is by far the most popular frontend framework (and continues to grow faster), except for the GitHub stars.
In addition, React is more loved and "wanted" than other front-end frameworks (although it is more used: satisfaction tends to decrease with popularity).

React is way easier to support in long term, than Vue and Angular. Long-term support is the most important feature specific only to React

As written above in big letters, please refrain from adding late drive-by comments to this task as they are not helpful. Please do read. Thanks.

I stumbled upon this proposal and thought I would ask, has anyone here heard about Nuxt? Also Nuxt3 was announced/released recently too. https://v3.nuxtjs.org/

@Jasonkhanlar: thanks very much, I hadn't heard of that before. I'll consider it for our wikistats refactor, and maybe @egardner would be interested when he gets back.