React Vue Difference

Posted on  by admin

Recently I published an article about the usage of top front end JavaScript frameworks. The two things that stood out were the dominance of React and the explosive growth of Vue. If current trends continue, it seems likely that by this time next year, Vue will have overtaken Angular as the second most used library or framework.

What is React.js

Separation of Renderer in React

I've been using React for the last three years building websites for a client services company.

The Differences

Most of the time, the client comes to us specifying that they want to use React. However, it seems only a matter of time before Vue is a bigger part of those discussions.

Library vs Framework

React vs Vue: Head-to-head comparison

  • What follows is my first pass at better understanding the differences between these two libraries so I can give better advice to our clients.
  • Even though I’ve worked with React for three years and enjoy it, I will try to be as even-handed as possible in what follows, although some knowledge gaps with Vue may inadvertently arise.
  • I’ll start with my conclusions.
  • React and Vue are rather similar, although there are some key differences which I’ll discuss shortly.
  • This makes sense as Evan You, the developer of Vue, used React as one of his inspirations.

Differences Between Vue.JS vs React.JS

  • They are much more like one another than they are to say, Angular or Ember.
  • From the Vue documentation, we see that both:.

React vs Vue: Comparison

  • utilize a virtual DOM. provide reactive and composable view components.
  • maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries.
  • From the standpoint of a finished product, I don’t think clients (or product owners) would be able to tell much difference if their app was built using Vue or React.
  • They are similar in performance and they are both capable of being used on projects large and small.
  • If you want to publish content across multiple platforms - web and mobile, for example - then React has the edge due to the excellent React Native.
  • My colleagues have also used React to build embedded apps for TVs, which is an interesting example of another platform where you might use React.

JSX vs Templating

  • Vue does have a native mobile option in Weex, however, so perhaps it would work for your situation.
  • React also has a much larger ecosystem, which can potentially help accelerate development.
  • If you need a key feature or behavior for your app, chances are someone in the React community has already made a solution for it.

Companies using React.js

What is Vue.js?

In fact, you’ll probably find several solutions.

Other Insights

Another consideration for the type of clients my company works with is the ability to find developers that are well-versed in the library/framework they are investing in.

Read more

React has the advantage here as well, although I think this is likely temporary.

Companies using Vue.js

The other differences are mostly developer preference.

Summary

They involve paradigms that have trade-offs and I don’t see a clear right or wrong answer.

Beginning at the End

I’ll discuss those in the next section. Bottom line:If you have a team that is already familiar with React, there is no net advantage to switching to Vue (caveats below).

Pros and cons of Vue

Introduction

If you have a team that is building front end applications for the first time or are thinking of migrating away from a framework like Backbone or AngularJS, then you should consider Vue, although React retains the advantages I noted above.

Pros and cons of React.js

The other factors rest with developer preferences which I’ll discuss next.

State Management

The best place to start looking at the differences between React and Vue comes from the Vue documentation (very good) which addresses the topic quite well.

Vue vs React: Popularity

It’s particularly useful because it was written by Evan You in cooperation with Dan Abramov, a member of the React team.

Comparison Table Vue.JS vs React.JS

It also works as a nice counter balance to any biases I may have. Vue and React are similar in performance.

Vue vs React: Tooling

The Vue docs say it has a slight advantage in most cases, however, recent benchmarks show React 16 having the edge over Vue 2.5.

Recommended Article

When optimizing performance there are some differences…. In React, when a component’s state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root.

React vs Vue: JSX vs Templates

To avoid unnecessary re-renders of child components, you need to either use PureComponent or implement shouldComponentUpdate whenever you can…. In Vue, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render when state changes.

Performance

Each component can be considered to have shouldComponentUpdate automatically implemented for you, without the nested component caveats. Overall this removes the need for a whole class of performance optimizations from the developer’s plate, and allows them to focus more on building the app itself as it scales.

CSS

Update on 19/12/17: After digging a bit deeper in a recent article, I need to revise my conclusion here. Vue is slightly faster, but it depends on what you're measuring.

Key Differences Between Vue.JS vs React.JS

Follow the link for more details. Another big difference comes with Vue’s use of templates vs React’s JSX.

Vue vs React: Learning curve

Many developers don’t like templating languages. Vue’s response…. Some argue that you’d need to learn an extra DSL (Domain-Specific Language) to be able to write templates - we believe this difference is superficial at best.

React vs Vue: Data binding

First, JSX doesn’t mean the user doesn’t need to learn anything - it’s additional syntax on top of plain JavaScript, so it can be easy for someone familiar with JavaScript to learn, but saying it’s essentially free is misleading.

Templating vs JSX

Similarly, a template is just additional syntax on top of plain HTML and thus has very low learning cost for those who are already familiar with HTML.

Conclusion

React vs Vue: Similiarities

State Management

Vue vs React: Desktop and mobile development

With the DSL we are also able to help the user get more done with less code (e.g. v-on modifiers). The same task can involve a lot more code when using plain JSX or render functions. My concern is that if you are mixing JSX and a templating language, your app has more complexity.