Skip to content

Instantly share code, notes, and snippets.

@dalegaspi

dalegaspi/vue_vs_react.md

Last active June 14, 2021 02:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dalegaspi/fb2aec7253a1da70d8463a73d13138ea to your computer and use it in GitHub Desktop.
Save dalegaspi/fb2aec7253a1da70d8463a73d13138ea to your computer and use it in GitHub Desktop.
Download ZIP
Vue vs React 2021
Raw
vue_vs_react.md

For me, the better choice Vue.js regardless of size of the project. And this can be explained succintly with three simple words: Two Way Binding.

When I began using JavaScript frameworks for dynamic UI, I started with the original AngularJS. It is the original framework that elegantly implemented two-way binding in an MVVM framework, where a model is bound to an element/elements. The original implementation didn't scale as well (i.e., there is severe page performance as you add more and more two-way bindings), but this was actually mitigated (to an extent) by the introduction of one-way binding construct in v1.5.

If this feature is so great, why do some developers hate it and even calling it anti-pattern? A few reasons I could think of, actually.

  • While VueJS (and the newer Angular 2.x) has addressed the performance issues plagued by two-way bindings in Angular 1.x, there is a tendency to have performance problems overall since there is a constant watch of change of events for the model then apply the changes to pertinent changes on the HTML DOM. With JavaScript being single-threaded, this takes a huge burden.
  • Yes, two-way binding is an anti-pattern. In a pure MVC, the view does not interact directly on the model and the use (and abuse) of two-way binding perpetuates this.
  • [Unidirectional Data Flow](https://en.wikipedia.org/wiki/Unidirectional_Data_Flow_(computer_science) promotes immutability, and therefore more predictable results, less bugs.

Having had the chance to work on both React and Vue, and with the advances of ES6 and VueJS (with version 3.0), the choice has become clearer: Vue is better. In my opinion, there are two issues with React:

  • The lack of any support for two-way binding in React means you will have to deal with Redux or any of the state management. Well, no not exactly, they did introduce React Hooks to sort of avoid state management with Redux depending on use case.
  • JSX. In my opinion, it's great and awful at the same time. JSX allows you to write HTML embed JavaScript within them, but just like two-way binding, if not used carefully it makes code hard to read. VueJS template can be hard to read, but if you use it in conjunction with ES6 string interpolation, it's not actually the case anymore.

Even if you do like Redux, and JSX...they are not unique to React, anymore; JSX is supported in Vue, and Vue has an equivalent of Redux (VueX).

As for the state of the land, it's been argued that React has been more mature has more users. As of 2020, surveys like Informatics do have React as #1, but VueJS in the same survey is ranked #2. The same with 2019 StackOverflow Statistics

Other has argued that ReactJS is better for larger groups or if you have a mix of junior and senior developer, which I find a bit silly and mostly founded on conjecture. I have yet to find any empirical data that supports the argument that React is better than Vue in larger groups (or a mix of junion/senior dev teams).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment