Which one is better? Vue or React?

Made a stupid site to track the stars of both projects on github. (written with Vue so I am biased)

https://vue-vs-react.ycmjason.com/

Source: https://github.com/ycmjason/vue-vs-react

Did you find this post useful? Show some love!

It would be very difficult for anyone to argue that one is objectively better than the other. They're both good in their own rights.

Perhaps, one might be better suited than the other given a set of requirements and this is where we can begin to discuss the merits of each tool.

And that's what they are. Tools. Each designed to address specific concerns.
Which one is better: ball-pein hammer or claw hammer?

React

Advantages

  • "Learn once, write anywhere": react, react-vr, react-native
  • Large community, which translates to lots of guides, documents, help, modules, plugins ...etc
  • High demand (but even this has to be predicated on location)
  • Do everything in JS 🤷 ?

Disadvantages

  • Steeper learning curve, due to the set of associated tools typically used with react (e.g. state managers, build, testing).
  • When react started, animations were a bit of a challenge. Not sure about the state of this today.
  • Do everything in JS 🤷 ?
  • When react started, the library was a large bundle that led to bad user experience on slower/mobile networks. The team has broken up the project into smaller modules, if you're not careful, you could still end up sending a large bundle to the user at the end, which leads to having to figure out tree-shaking & code-splitting.

Vue

Advantages

  • Easier to get started with. Less of a learning curve.
  • Easier to introduce into a small part of an existing product/project.
  • Animations were one of Vue's strengths from the project's inception.
  • Do everything in its respective native web DSL for a given task (aka HTML, CSS, JS versus do everything in JS).
  • Much smaller library in size.

Disadvantages

  • Easier to find employers looking for React developers than Vue developers in the US.
  • You'd have to master a Vue-specific DSL that is not as transferable as mastering "just JavaScript"

And that's just what I can list off the top of my head. I am sure many other folks can think of more advantages and disadvantages of each tool.

The point is: evaluate and choose each tool given a set of requirements or priorities. No tool is objectively better than another.

I personally consider the following when it comes to choosing frameworks/libraries.

  1. The capability of them
  2. The developing experience with them

========

For capability, both of them are capable of doing the same things. They both utilise the virtual dom. And have similar component concepts. One thing that Vue is capable of but not React is the <transition> component. This makes building animated UI a lot simpler and gives you more control over it. (See more vuejs.org/v2/guide/transitions.html) In fact, due to Vue's capability with animations and transitions, I suspect this is the reason why Facebook built this site with Vue. (newsfeed.fb.com/?lang=en)

========

In terms of developing experience, I would say Vue has its advantages over React.

  1. Less steep learning curve It is generally agreed that Vue has a less steep learning curve. Mostly due to the excellently written documentation and guides and the simplicity of the framework.

Furthermore, Vue is truly reactive. this.a = "hello world" would change the displaying text. Whereas in React, you have to do this.setState((prevState, props) => {...}) which is not very intuitive.

Vue is also easier to set up. vue-cli 3 provides a developer friendly interface to creating new projects. The project created has its development dependencies (e.g. testing frameworks, bundlers, linters...) installed as plugins. The philosophy behind this is to allow vue projects to stay up to date with the standards easily. Let's say one day Vue.js decided to use parcel, instead of webpack, as their recommended module bundler. Existing projects could switch to parcel seamlessly just by updating the bundler-plugin in their project without worrying about removing old stacks, installing new stacks and configuring them. (See this video about vue-cli 3.0: youtu.be/TRJMT9yjONQ?t=10m18s)

Vue is also very friendly to existing projects. You could use Vue in many ways, from including <script> tags to using bundlers like webpack/parcel/rollup. The fact that it is so flexible made Vue a great candidate to be included to existing projects without the need to introducing extra build steps.

Gitlab is one of the companies that replaces part of their website with Vue components. Find out more in this article: about.gitlab.com/2016/10/20/why-we...

  1. Component-scoped CSS out of the box
    It might be possible with React as well, but the way Vue handles that is simple and straightforward. Hence better developing experience.

  2. Complete separation of html, js and css
    Although in the same file (.vue), the three sections are clearly and intuitively separated in three tags (<template>, <script> and <style>). It is very very unlikely that one would mix them. Whereas in React, due to JSX, one could easily mix these three together and produce less maintainable code. This very often reminds me of my early days coding in PHP when I haven't got enough experience. This problem could be solved by following good standards, but wouldn't it be easier for us to go for something where this problem could hardly happen?

  3. Vue has more official libraries
    Routers and Stores are two of the main features that is essential to developing a large scale application. React has react-router and redux, but neither of them are official libraries of React. (Redux has been added to the official library as Facebook recruited the creator of Redux.) On the other hand, Vue has vue-router and vuex which are official libraries.

========

I was a fan of Angular.js when it first came out. Then switched to Angular 2. Then started using React when Angular 2 turns out to be too complicated to use. Loved React + Redux. Many concepts from React Redux are truly inspiring. Then I discovered Vue.js last summer, and I fell in love. Currently an active contributor of an official Vue project VuePress. (github.com/vuejs/vuepress)

Some people prefer using JSX and "do everything in Javscript". I respect their opinion but hope that they make their decisions only after they have tried different alternatives. Otherwise you might miss out your next favourite thing.

Classic DEV Post from Mar 5

What's your dream job?

...

READ POST
Follow @jess to see more of their posts in your feed.
Jason Yu
Jason Yu is a passionate real-life problem solver and musician.
More from @ycmjason
Do you know about these SVG techniques?
#showdev #svg #javascript
Let me explain to you what is `this`. (Javascript)
#javascript #beginners
Trending on dev.to
Don't make that function async.
#node #javascript #async #webdev
Can react be used as a utility full stack web app?
#react #discuss #javascript
Integrate PureScript with your JavaScript application
#purescript #javascript #functional #programming
How do you promote your apps or projects?
#discuss #javascript #apps #startup
Makin' Bacon with Node.js, Hapi, and Vue
#node #hapi #vue #javascript
Kushy Frontend in NextJS
#showdev #nextjs #react #javascript
TIL: Element.prototype.matches can be used to check if an element includes a certain class
#javascript
8 Ultimate Full Stack Interview Questions and Answers
#fullstack #interview #node #javascript