User:Aron Manning/Which web framework to choose

Which modern, reactive web framework to choose for the new decade: Vue or React?
(Research essay, summary at the end.)

A response to the Frontend Architecture Working Group's very well written proposal: RFC: Adopt a modern JavaScript framework for use with MediaWiki
Thank you for work!

I've collected the most relevant assessments from neutral comparisons between 2018−2019 that I've found with the search query "Vue vs React", starting with the more concise articles, aiming to be neutral myself.

Comparison 1

https://www.mobileappdaily.com/2018/08/20/reactjs-vs-vuejs

When To Deploy React.js

While developing a complex app
When developing both Mobile and Web App
For community support

Why Use React.JS?

No need to rewrite the code: When using React Native for building an interactive user interface, there is no need for the developer to write the code from the scratch and it saves all the extra effort while increasing the efficiency at the same time.
Components can be reused: The component-specific structure of React gives offers the facility to develop applications using an agile approach, which is simplified for the developer with the help of the reusable components.
ReactJS is a single codebase: Developers often have to write app's code separately for different platforms like iOS and Android but with the React JavaScript framework this issue is resolved as it is a single codebase.
Compatibility with third-party plugins: Another huge reason to use this JavaScript framework is that react.js provides great compatibility with third-party plugins without facing any speed or memory space issue.

When To Deploy Vue.js

While developing a web app having templates
When developing a simple category app
When racing against time

Why Use Vue.JS?

Reduced optimization efforts: The component's dependencies are automatically tracked in Vue.JS and during its render that's why the system is aware of when to re-render thus, reducing the optimization efforts.
Official support: Although both React and Vue provide robust Routing Solutions, but when it comes to official support corners Vue.js leads react. In Vue native, the state management and routing libraries are officially backed up, unlike react.js updates.
Ease-of-use: As this uses the standard HTML-based templates, the revamping process of an already existing app becomes much easier. This ease-of-use has made Vue a popular framework with the reusable templates and effective structure.

Comparison 2

https://www.codeinwp.com/blog/angular-vs-vue-vs-react/ (December 11, 2019)

React, interestingly, combines the UI and behavior of components. For instance, here is the code to create a hello world component in React. In React, the same part of the code is responsible for creating a UI element and dictating its behavior.

My note: This is a benefit in highly interactive, complex UIs, where the DOM is strongly coupled with the functionality and often change together. The change can be made in one place.

Vue: Further, you can also use pre-processors in Vue rather than CSS, which is a great functionality. Vue is great when it comes to integration with other libraries, like Bootstrap.

My note: MediaWiki style sheets are coded in LESS and pre-processed to generate CSS.

Comparison 3

https://www.mindk.com/blog/react-vs-vue/ (December, 2018)

templating vs JSX
Any valid HTML can be a Vue template. You can add JS functionality with bindings and custom directives (attributes). Templates allow you to gradually migrate your project to Vue. The framework has a great degree of customization allowing you to:

Use SCSS or CSS scoping instead of CSS;

Write your code in preprocessors like Pug;

JSX gives you the versatility of a full programming language with temporary variables, flow controls, and referencing JS values directly in scope. JSX also supports sophisticated IDE features like autocomplete, type checking, or linting.
In the end, the choice between JSX and templates comes down to personal preference. JSX can feel more powerful and flexible while templates offer a clear separation of concerns preventing you from injecting too much logic into views. Finally, designers and HTML developers are seldom used to JSX which makes collaboration a bit of a problem for UI/UX-heavy teams.
Documentation
Vue has wonderful docs and its API references are one of the best in the industry. They’re well-written, clear and accessible dealing with pretty much everything you need to know to create Vue applications.

Unlike React, the docs are translated in several languages in addition to English.

For better or worse, Vue is more opinionated than React with many issues having a clear answer in the docs.

React’s documentation pales in comparison with Vue’s. It goes through the basics of React development and includes some advanced concepts but the presentation isn’t as accessible or well-structured. What’s more, it doesn’t include the detailed overview of React ecosystem like in Vue’s docs.
Scalability
With front-end frameworks, scalability comes in two flavors: expanding a single-page application (SPA) and adding more pages to a traditional MPA.

Vue is excellent for creating interactive multi-page apps. It allows you to quickly import the core library and inject Vue into the existing pages. You don’t even need to use components for simpler features.

Although Vue is well-suited for developing large SPAs, it wasn’t created for this purpose. As your project grows, reusing HTML templates becomes a pain compared to JSX syntax.

Comparison 4

https://www.dunebook.com/react-vs-vue/ (December 5, 2019)

Vue is simpler in terms of syntax. In React, all components express their UI within render functions using JSX, a declarative XML-like syntax that works within JavaScript.

React has a CBA with pure JavaScript; a declarative style; and powerful, developer-friendly DOM abstractions.

React provides outstanding performance thanks to its virtual DOM and smart-reconciliation algorithm, which, as a side benefit, lets you perform testing without spinning up (starting) a headless browser.

Vue is incrementally adaptable, with a core library focused on user interfaces that you can use in existing projects

Vue is approachable–the beginners can pick up the library easily, and the confirmed developers can be productive very quickly

Vue is a little smaller & faster than react. It doesn’t mean Vue is better than react.

In a nutshell, if you need to build a lightweight or medium-sized application, or maybe even prototype an idea? Use Vue. Building a larger application? Use React

Comparison 5

https://programmingwithmosh.com/javascript/react-vs-vue-a-wholesome-comparison/ (November 15, 2018)

Code Style And Learning Curve

React

For a typical web developer, initially JSX could be bit of a learning curve. Although, JSX is a different approach, it is very similar to HTML and a developer should be able to grasp it with some practice. React also treats everything as a component, and each component has its own component lifecycle. React has lifecycle methods, that handle these components.

Vue

Vue’s coding style is similar to what web developers are used to before the advent of React. Vue separates HTML, JavaScript and CSS like the traditional way of coding web applications. It does allow JSX, if that is your preferred code style. Vue also has component lifycycles, but they are simple and much more intuitive than React. Vue also is a younger framework, so it made sure it took the best of React and addressed some of the problems with React. Based on the comparisons of code style, if you are a JavaScript developer who has not used React or Vue, you will find coding with Vue easier and more intuitive.

Documentation

Although Vue is the youngest framework in the JavaScript space, it has the best documentation hands-down. Vue has been appreciated by many developers for it’s clear and concise documentation. Hence, new developers love to get on-board with Vue since it is easy to navigate through the concepts.

The React documentation is getting better off-late and the React core team is taking an effort to make the documentation better. But if you were to compare documentation of React vs. Vue today, the clear winner is Vue.

Framework Size

Vue is smaller than React. React is considered quite small when compared to Angular and other frameworks, but Vue happens to be smaller.

Vue is not the smallest solution out there. Preact is smaller than Vue, and it is basically React, with some features stripped out. The image below shows where Vue and React fit it in terms of size.

Comparison 6

https://codersera.com/blog/vuejs-vs-reactjs-comparison/ (December 2019)

Companies Using ReactJs: Facebook, Instagram, Netflix, New YorkTimes, Yahoo, WhatsApp, Codecademy, Dropbox, Airbnb, Asana, Microsoft
Companies Using Vue.js: Facebook, Netflix, Adobe, Grammarly, Behance, Xiaomi, Alibaba, Codeship, Gitlab, Laracasts

Rerendering and Optimization

When you compare React and Vue, speed can’t be a significant comparison factor in deciding which is better. In terms of performance, its re-rendering feature is a significant differentiator. React’s mechanism triggers the re-rendering of an entire component tree when the component’s state is changed. To avoid the unnecessary re-rendering of subcomponents, extra features and properties may be used.

GitLab - Vue

https://about.gitlab.com/blog/2016/10/20/why-we-chose-vue/

Simplicity and ease of use. Primarily what drew us to Vue.js is that it allows our team to easily write simple JavaScript. Getting started with Vue.js is extremely easy. Its source code is very readable, and the documentation is the only tutorial you'll ever need. You don't need external libraries.
[...] what we love about Vue.js: it's an elegant combination of structure and simplicity.

Vue - official comparison

https://vuejs.org/v2/guide/comparison.html

In React, everything is just JavaScript. Not only are HTML structures expressed via JSX, the recent trends also tend to put CSS management inside JavaScript as well. This approach has its own benefits, but also comes with various trade-offs that may not seem worthwhile for every developer. Vue embraces classic web technologies and builds on top of them.
[...] as the default experience we offer templates as a simpler alternative [to JSX]. Any valid HTML is also a valid Vue template, and this leads to a few advantages of its own:

For many developers who have been working with HTML, templates feel more natural to read and write. The preference itself can be somewhat subjective, but if it makes the developer more productive then the benefit is objective.

HTML-based templates make it much easier to progressively migrate existing applications to take advantage of Vue’s reactivity features.

It also makes it much easier for designers and less experienced developers to parse and contribute to the codebase.

You can even use pre-processors such as Pug (formerly known as Jade) to author your Vue templates.

Vue has even taken [the state management] model a step further with Vuex, an Elm-inspired state management solution that integrates deeply into Vue that we think offers a superior development experience.
Another important difference between these offerings is that Vue’s companion libraries for state management and routing (among other concerns) are all officially supported and kept up-to-date with the core library. React instead chooses to leave these concerns to the community, creating a more fragmented ecosystem. Being more popular though, React’s ecosystem is considerably richer than Vue’s.

WordPress and Drupal

I haven't found the answer why WordPress uses React. Here are a few references that popped up while searching:

https://ma.tt/2017/09/on-react-and-wordpress/ On the 2017 patent clause debacle
https://techcrunch.com/2017/09/15/wordpress-to-ditch-react-library-over-facebook-patent-clause-risk/
https://www.drupal.org/blog/drupal-looking-to-adopt-react

While a few people named alternative options, React was our preferred option, by far, due to its high degree of adoption, component-based and unopinionated nature, and its potential to make Drupal developers' skills more future-proof.

My note: WordPress being the most popular CMS, the most likely reason for their choice - similar to Drupal's - is the adoption (popularity) of React.

It is worth to note that - if not for WordPress -, today we might not be considering React because of that license clause they tried to implement. Regardless of who's the backer of a project, unwanted turns can happen. It's only the balance between the community's and the backer's power that can prevent that from happening. In this sense the creators of Vue have less power to make a change to their project that would make Vue unsuitable for MediaWiki. All in all I find it very unlikely that any of these projects would take a severe turn, that necessitates abandoning that project. If it might happen, it could happen to any of them (it almost happened to React).

Sources

Cited:

Not cited:

https://dzone.com/articles/reactjs-vs-vuejs-comparison-of-popular-frameworks

Test, opinion:

Summary

Vue and React has the same purpose, the same or very similar features (in the core or in popular plugins). These differ mostly in the details and implementation approach. I'm listing only those features that distingush these frameworks for MediaWiki's purpose.

React

JSX (React's template functionality) has a more streamlined developer experience in highly complex applications with a lot of business logic written in javascript.
CSS is part of the JSX code, closely coupled with the javascript and the html.
The developer has to think about performance optimization (`shouldComponentUpdate` property) — a common source of hard-to-debug, circumstantial bugs.
React Native for mobile platforms is a mature product. Components can be shared between the webapp and the mobile app.

Vue

HTML templates have a more designer-friendly syntax
Support for LESS, SCSS, Pug (compact html syntax) pre-processors.
The developer does not have to think about when a component should be updated. There's built-in dependency tracking, which has a computational price that, but that cannot be observed in tests. Vue actually has a small performance advatage in many tests.
Ease-of-use, well organized documentation (some translated to multiple languages).
Vue Native exists. It has a small market share.

Both frameworks have

reactive DOM updates (data binding) -- core feature
DOM generation from components (templates) -- core feature
router (URL parsing, browser history navigation) -- plugin for React, in core for Vue
server-side rendering (for search engines and fast first-page loading time, old browsers and low-bandwidth connections) -- plugin for both

Summary summary

The above cited comparisons seem to agree that React is better suited for complex, business-logic-heavy single-page applications. MediaWiki is neither of these. Projects that could benefit from React's focus on javascript-first design - like statistics and specialized batch management interfaces - are free to choose their own framework, or even combine the two, independently of the framework used for the primary document-viewer and editor interface.

The articles also seem to agree on that Vue - in comparison to React - is better equipped for the document-focused multi-page environment of MediaWiki,

for designers and casual developers - who are of a much greater number in the Wikimedia Movement, than highly experienced developers,
for progressively (incrementally) transitioning the existing MediaWiki code-base.

I've only explored the developer experience with the citations above: in my view that's what predetermines how easily developers and volunteers can adapt to the new framework, which in turn determines how many contributors will get involved with the development. The community and stability of these frameworks has been investigated above and I have no concerns about the availability of either framework in the next decade, after which presumably there will be another framework to adopt.

Conclusion

Based on this research I have the strong opinion that Vue offers an easier transition and easier adaptation for designers and volunteers. These benefits could result in more involvement from the community in development, resulting in more UI improvements and hopefully bridging the gap between developers and community members to some extent.