Vue vs React: Choosing the Best Tool for Your Project in 2019. Part 2

Today, we want to provide you with the second part of the article dedicated to Vue vs React. Here we compare these tools by such technical aspects, as tooling, flexibility, mobile development, and component approach. In case you missed the first part, here is the link for your convenience.

Let’s get this show on the road.

Technical features

Tooling

React
To begin with, React offers a third-party tool create-react-app (CRA). This option provides you with a rapid start while creating React apps. It helps you to avoid a time-consuming configuration process and it can be used for scalable and large projects.

Prior to the official CRA release, coders were required to deal with the Webpack-config and other .rc files from former apps anytime they began developing a new application, or configure it by hand. If you do not use CRA, you need to put the same configuration from one application to another. Actually, it is not much time-consuming but is pretty tedious.

Furthermore, React has large support for the main IDEs.

Vue
Vue-cli is an integral tool for fast project creation for Vue.js. These projects have a ready-made structure, an installed configuration, as well as a number of basic files.

The main advantages of Vue-CLI:

• Out-of-the-box features (Babel, TypeScript, ESLint, PostCSS, PWA, etc.).
• Graphical User Interface.
• Fully configurable, you do not need to eject.
• An opportunity for developers to build their own plugins and templates.

Flexibility

React is all about UI, so originally, you gain support in building UI components.

ReactJS gives you an opportunity to operate with state management. However, in case you have a large project, you need to use Redux as a state management tool for your convenience. It simplifies state management pretty much.

Furthermore, if we take into account the React router - it is not an official package, but also a third-party one.

On the flipside, Vue.js is a dynamic framework which provides with out-of-the-box tooling to create an application. However, if necessary, it additionally offers all the functionalities that you may need:

• Vuex for state management.
• Vue Router for application URL management.
• Vue.js Server-Side Renderer for Server-Side Rendering.

Mobile development

React Native is a framework for creating cross-platform iOS and Android applications using JavaScript. Shortly, it gives React developers an opportunity to create mobile applications. It was released in 2015 and is React-based. it does not use WebView and HTML, but native components have bindings in JS and are wrapped in React.

On the other hand, Vue is paired with NativeScript (NS) which gives an opportunity to create cross-platform applications with the help of XML, CSS, JavaScript. Actually, NativeScript deals with the same issue as React Native mentioned above, but they have some distinctions.

NativeScript syntax and implementation are much easier for a web developer to understand using HTML / CSS / JavaScript. XML usage is also similar to HTML in markup creation.
NativeScript has direct access to native platform API.

In order to compare and realize the popularity and developers community usage of both frameworks, we provide you with the following comparison table State of JS 2018 Chart.

Furthermore, below we present a Google Trends Chart displaying the search results of React Native and NativeScript for the past 4 years.

Source: Google Trends

As you can see, React Native is much more popular among software developers that means a bigger amount of ready-made solutions are available.

Component approach

In general, Vue and React follow the same component approach in development: it means that you have one file for one component. However, there are still some different aspects interesting to discover.

React
Many years, developers have tried to separate templates and embedded Javascript logic, but in JSX they are again mixed. Maybe it sounds almighty, but you should listen to Peter Hunt's speech “React: Rethinking Best Practices”.

JSX is an optional preprocessor with an HTML-like syntax that is then compiled into JavaScript. Hence some oddities - for example, you need to use className instead of class, because the latter is a reserved keyword in JavaScript.

Vue
Vue offers “single-file components”. This is like a compromise regarding the division of responsibilities - templates, scripts, and styles are not in one file, but in three different, ordered sections. This means you get syntax highlighting, CSS support and the ability to easily use preprocessors like Jade or SCSS.

Let’s get acquainted with the same component created for a To-Do List application both in React and Vue to see the difference between ReactJS JSX and Vue.js templates.

Vue component structure:

<template>
  <div class="ToDoItem">
    <p class="ToDoItem-Text">{{todo.text}}</p>
      <div class="ToDoItem-Delete"
        @click="deleteItem(todo)">-
      </div>
  </div>
</template>

React component structure:

import React, {Component{ from 'react';
import './ToDoItem.css';

class ToDoItem extends Component {
  render() {
    return {
      <div className="ToDoItem">
        <p className="ToDoItem-Text">{this.props.item}</p>
        <div className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</div>
      </div>
    );
  }
}

export default ToDoItem;

Conclusion

Here we presented you the second part of the article covering such technical issues like tooling, flexibility, mobile development, and component approach.

The third (final) part is coming soon and there we will compare Vue and React by such technical features, like performance, state management (Redux and Vuex), and storage data reception.

Stay tuned and read the full article version here: Vue vs React: Choosing the Best Tool for Your Project in 2019.

Comments

[Lewis Palmer]

I'm sorry, but ReactJs can be entirely driven by State. To say that React doesn't give you an opportunity to manage state, and that a third party library is a requirement, is entirely incorrect.

[Codica]

Thanks much for your reply and contribution, Lewis. The issue mentioned is corrected. We wanted to point out that Vue provides an out-of-the-box tool, but React offers a third-party one.

Anyway, we are grateful for your feedback pretty much.