tomgrabski for Pagepro

Posted on Nov 18, 2020 • Edited on Feb 4, 2021 • Originally published at pagepro.co

React vs Vue – A Quick Comparison (2020 Update)

#react #vue #javascript

Introduction

The number of different JavaScript frameworks and libraries definitely doesn’t make it easy to make a choice. This is why we started to provide comparisons as well as other posts so you can decide with a bit more confidence.

Last week we compared React vs Angular, which you can read here. Today I would like to help you choose between React and Vue.js.

What is React.js

Facebook developed ReactJS as an open-source JavaScript library to help developers with building user interfaces. React.js is a mix of simplicity and intense concentration on UX (user experience). However, you would need third-party solutions because React is responsible for just the View layer of the MVC model. For some developers, it’s a benefit because it allows for total freedom while choosing Model and Controller libraries.

Pros and cons of React.js

Pros	Cons
Cost-effectiveness	Incompleteness
Great UX	Lack of proper documentation
Popularity	The high pace of development
Performance
SEO-friendliness
Shortened time to market

If you want more detailed information on the pros and cons of React, we recommend reading this article.

Companies using React.js

What is Vue.js?

Vue is a progressive JavaScript framework that developers can use to build user interfaces. Contrary to monolithic frameworks like Angular, Vue is incrementally adaptable by design. Similarly to React, the core library is focused on the View layer only. Do you want to integrate Vue with other libraries or existing projects? No problem at all.

Vue.js can be characterised simply by three adjectives:

Approachable – if you know HTML, CSS, and JS, all you have to read the guide and you are ready to go!
Performant – thanks to three things: minimum optimisation, gzipped size of 20KB and virtual DOM.
Versatile – its ecosystem is incrementally adaptable and scales easily between a library and a full-featured framework.

Pros and cons of Vue

Pros	Cons
Adaptability	A small number of components and plugins
Better performance with smaller size	Closed community
Detailed documentation	Language barrier
Ease of integration	Limited features
Easy development	(Over-)flexibility
Lightweight
Reactivity
Scalability

Companies using Vue.js

React vs Vue: Head-to-head comparison

	React	Vue
Developed by	Facebook	Evan You
Release year	2013	2014
Programming language	JavaScript	JavaScript
Data binding	One-way	Two-way
Model	Virtual DOM	Virtual DOM
Official website	http://reactjs.org/	https://vuejs.org/

React vs Vue: Comparison

Every comparison requires to take a look not only at differences but also similarities. And React and Vue.js share some of them:

Composable and reactive view components
Concentration on a core library and handling routing and global state management with companion libraries
Usage of virtual DOM

And now, let’s get to more detailed comparison in a few categories.

Data binding

Vue.js is using two-way data binding. Whenever you change any element of the interface, your model state changes automatically too.

This sounds simple, but if you work on a large project and want to have a good data overview and debug easier, it is better to use React with one-way data binding. It renders the change in the interface element, only after the model state is updated first. And whenever you change the UI element, the model state stays the same with no changes.

Desktop and mobile development

If you use React and want to build native mobile applications working on Android and iOS, there is a platform called React Native. It’s a massive benefit for React developers because instead of learning a completely new technology, they can take advantage of existing skills.

Although Vue.js doesn’t have a dedicated platform like React Native, it doesn’t mean you can’t develop native applications. You can use either Weex (cross-platform UI framework) to create React Native-like platform or plugin called NativeScript-vue to build native applications.

However, React, and Vue have something in common – if you want to build desktop applications, you can use Electron with both of them.

JSX vs Templates

One of the reasons for the newcomers to choose Vue could be templates. They are based on HTML and easier to read and write to anyone that has been working with HTML before, especially when you come from Angular environment.

React, on the other hand, have JSX that gives you a huge advantage of using all the bless of JavaScript language. It is a genius component made from markup and JavaScript logic in the same file.

Learning curve

React uses JSX, which is a syntax extension to JavaScript. It can be used to describe how the user interface should look like. It’s a relatively new approach which developers need to learn and adapt if they want to use React daily.

Another issue is that in a case of React, using third-party components is almost inevitable. And developers need to learn how to do that.

Vue.js is easier to absorb than React. If you decide to go with Vue, you can use either standard HTML, CSS, and JavaScript or JSX as in a case of React.

The critical thing about Vue is that it took the good parts out of React and Angular. Because of that, the developers with the experience in either of the two technologies have some advantage here.

Documentations of React and Vue are well-written, but the latter is considered as slightly better.

Popularity

React clearly won this battle. It’s not surprising that it has a bigger community and popularity, because Facebook created and uses this technology.

To back up this claim, I prepared numbers collected from Stack Overflow, Google Trends and GitHub. Check them below.

Performance

If you want to make a decision based on performance, I have to disappoint you – both React, and Vue.js can be proud of their similar, remarkable speed. However, if you would like to see specific metrics and numbers, you can go there.

DEV Community