React vs Vue.js – which to pick for the project?

React vs Vue.js – which to pick for the project? – Altabel Group's Blog

Similarities

• React and Vue are great for providing an excellent user interface.
• What concerns coding, both support TypeScript and Flow.
• Both make use of virtual DOM (Document Object Model). This setting allows programs to access the part of the document they might need easily.
• They are component-based. Using components of ready-to-use code introduce some additional functionality to the app/website faster. This makes the whole development process more efficient.
• Both React and Vue.js support extensive development tools as well as resources and guidelines to make coding more productive.

Differences

• Frameworks Design

React is built around the idea of composable components. They are isolated and, in most cases, only expose the props interface. It makes team collaboration a lot easier as different people can create various components that work well together. Making changes to components is also a breeze, and that would rarely cause the chain of changes through the whole codebase.

Vue.js supports two-way data binding, but one-way parent-child data flow between components is the default. Vue components are supported in every browser, have cross-component data flow, custom events communication, and other essential features.

• Optimization Efforts

Vue took many good ideas from React, most importantly the Virtual DOM. But Vue implements it with some sort of automatic dependency management. This tracks which components are affected by a change of the state so that only those components are re-rendered when that state property changes.

In React, on the other hand, when a part of the state that affects a component changes, the component will be re-rendered. By default all its children will be re-rendered as well. To avoid this you need to use the shouldComponentUpdate method of each component and determine if that component should be re-rendered. This gives Vue a bit of an advantage in terms of ease of use, and out of the box performance gains.

• Vue vs React performance

Both React and Vue are exceptionally and similarly fast, so speed is unlikely to be a deciding factor in choosing between them. Even the size is very comparable. React currently takes about 100 kb while Vue around 80 kb. This potentially makes Vue somewhat faster, however the difference is not so huge.

• JSX vs Templates

Speaking about React, all components express their UI within render functions using JSX (JavaScript Expressions), a declarative XML-like syntax that works within JavaScript.

Render functions with JSX have a few advantages:

1. The tooling support (e.g. linting, type checking, editor autocompletion) for JSX is in some ways more advanced than what’s currently available for Vue templates.
   You can leverage the power of a full programming language (JavaScript) to build your view. This includes temporary variables, flow controls, and directly referencing JavaScript values in scope.
2. JSX leaves developers the full power of JavaScript at their disposal—flow controls and advanced IDE features such as autocompletion or listing are included in the component view templates.

In Vue, there are also render functions plus it supports JSX . As the default experience Vue offers templates as a simpler alternative. Any valid HTML is also a valid Vue template, and this leads to a few advantages of its own:

1. Many developers who have been working with HTML prefer templates to read and write. It makes the developer more productive.
2. It becomes much easier to progressively migrate existing applications using HTML-based templates. It takes the advantage of Vue’s reactivity features.
3. Designers and less experienced developers can parse and contribute to the codebase more easily.

Vue JS keeps itself highly readable as it is essentially composed of just JavaScript and HTML elements, making it a very ‘pure’ option for websites and apps.

• CSS

React’s JSX combine HTML and CSS together into JavaScript. Although there is support for extracting CSS into a single stylesheet at build time, it is still common that a runtime will need to be included in the bundle for styling to work properly. While you gain access to the dynamism of JavaScript while constructing your styles, the tradeoff is often increased bundle size and runtime cost.

If you are interested in CSS-in-JS, a lot of the popular CSS-in-JS libraries support Vue (e.g. styled-components-vue and vue-emotion). The core difference between React and Vue here lies in the default method of styling in Vue is through more familiar style tags in single-file components.

Single-file components give you full access to CSS in the same file as the rest of your component code. The styling in Vue’s single-file components is very flexible. Through vue-loader, you can use any preprocessor, post-processor, and even deep integration with CSS Modules – all within the <style> element.

• The popularity of a framework

React has dedicated support from Facebook, there are no doubts about the growth of this framework. React has frequently published updates. It releases a major update every six months. But on the other side, due to the constant updates React technologies are accelerating so fast that there is no time to write proper instructions. Developers must also regularly get up to date with the new ways to do things. As of May 2020, there are 1326 developers contributing to the official React repository on GitHub.

There are plenty of UI components for React developed by the huge React community. The most popular library called Material-UI Library & Dependencies could be also downloaded freely. In version 16.8.0, React has introduced Hooks. It reduces the learning curve for frontend beginners. Moreover, hooks enable developers to adhere to functional programming instead of object-oriented programming. In addition, Facebook has a lot of mentorship programs, tutorials and supportive events.

The Vue community still keeps growing. There are 293 active contributors to the official Vue repository on GitHub as of May 2020. But keep in mind that Vue.js has the lowest learning curve among all frontend frameworks. This makes it appealing for both beginners and longtime professionals.

What concerns vacancies, React currently has more job listings than Vue. According to LinkedIn, 14 042 jobs looking for React.js in European Union, and 6 450 vacancies looking for Vue.js.

React’s strong community means users have access to quick help from experienced developers. On Github React has gathered over 122 thousand stars, and usage statistics on npm show that the framework is downloaded more than 5 million times a week.  With about 800.000 weekly downloads, Vue.js is having great results as well. Over 128 thousand Github stars show its rising popularity.