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!
DISCUSSION (4)

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.

Why didn't you write it in ivi or svelte?

Classic DEV Post from Aug 20

Who's looking for open source contributors? (August 20 edition)

Please shamelessly promote your project. Everyone who posted in previous weeks ...

READ POST
Follow @ben 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
Limit concurrent asynchronous calls
#javascript #node #tutorial
Do you know about these SVG techniques?
#showdev #svg #javascript
Trending on dev.to
Text Yourself the NASA Picture of the Day with Standard Library and Node.js
#node #javascript #showdev #webdev
Test-Driven React: The Mostly Definitive Guide to Testing React Components
#react #javascript #tdd #testing
Var vs Let vs Const
#javascript #bestpractices
5 helpful features in Chrome's DevTools
#devtips #webdev #javascript #productivity
Simple HTML/CSS Workflow With Parcel
#webdev #css #javascript #html
What is Data Binding?
#javascript #webdev #beginners #data
Build a RESTful API with the Serverless Framework
#serverless #node #javascript #beginners
Practical Patterns with React Easy State
#react #javascript #webdev #state