JavaScript Tools: A React and Vue Comparison

React, Vue, and Angular are the three dominant JavaScript frameworks in 2019. According to State of JavaScript 2018, React.js and Vue.js have the highest developer satisfaction rates, and these are also the technologies I’ve explored the most to build user interfaces. In this post, we’ll be covering the similarities and differences between the two, and along the way I will be providing discoveries from working with each.

Similarities

React and Vue use declarative programming and a Virtual DOM to keep the user interface and the state of the application in sync. The two handle data/state changes differently under the hood, but the development concept is the same.

Both tools can be used with centralized state management. As an application increases in size, it gets harder to manage and to share data across components without causing unpleasant side effects. By offering a single way to modify the state, they simplify debugging.

Both can easily be plugged in to any existing web application, even if it’s not a single-page application. This is the case with the Gutenberg editor, which is built with React and was recently implemented in the WordPress ecosystem. The case is similar with GitLab, where their jQuery codebase is being gradually replaced with Vue.

React and Vue also share the same core programming paradigms: component-based architecture, props, and lifecycle methods. If a developer is already comfortable with React, they will be able to pick up Vue with ease.

React and Vue are lightweight, and their performance is fairly similar. This image shows where React and Vue line up in terms of size:

Source: Daily JS

Ecosystems

React is an open-source JavaScript library released in 2013 by Facebook. It is not opinionated given it does not provide defaults for routing, state management, etc. The React team has left these things up to the community.

As a result, a huge React ecosystem has emerged offering a plethora of third-party solutions. This gives developers a ton of flexibility in how they create their applications. To a new JavaScript developer this may be a bit overwhelming, while experienced developers love this flexibility because they can leverage multiple options.

Several technologies have also emerged utilizing the library, such as the popular static site generator Gatsby.js and mobile native rendering with React Native. React provides the advantage of learning one library and utilizing the code across multiple platforms.

Vue is an open-source “progressive” JavaScript framework released in 2014 by Evan You, a former Google developer. Vue tries to pick the middle ground where the core itself comes bare-bones like React, but offers adoptable pieces, like a routing solution, state management solution, build toolchain, and CLI. They are all officially maintained by the Vue team, well-documented, and designed to work together, but you don’t have to use them all if you choose not to.

Vue has a smaller market share, yet its community is constantly growing. It has fewer third-party libraries than React, but has more tools available right out of the box.

To generate static pages or implement server-side rendering with Vue, Nuxt.js is the most popular and production-ready solution. Currently, Vue does not have a widely adopted way to develop native apps. However, this could change in the future with native frameworks NativeScript and Weex.

Code Style

React recommends writing components with the JavaScript syntax extension, JSX, which is a way of writing HTML-like syntax within JavaScript code. In React, JSX is an abstraction of the React.createElement method used to create Virtual DOM entities. The advantage of JSX is access to the full power of JavaScript within your component view. This gives us the ability to create truly reusable components.

Vue pushes the idea of Single File Components with distinct blocks for HTML templates, styles, and JavaScript. Any valid HTML can be a Vue template. You can add JavaScript functionality to your templates with bindings and directives (special attributes).

Below are two examples of a simple List component iterating over an array of items:

React – JSX

import React from 'react';

class List extends React.Component {
  state = {
    items: ['apple', 'orange', 'grape']
  }

  render() {
    const { items } = this.state;

    return (
      <ul>
        {items.map((item) => <li>{item}</li>)}
      </ul>
    );
  }
}

export default List;

Vue – Single File Component

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['apple', 'orange', 'grape']
    }
  }
}
</script>

I personally prefer Single File Components with Vue because the separation of concerns creates structural landmarks on the page that make it quicker to navigate the file itself. There’s nothing wrong with React’s JavaScript and JSX combo, but the code gets a little muddled, IMO. You do get used to it, though.

The Vue framework offers a great degree of customization, allowing you to:

• Choose a template language like Pug
• Drop templates in favor of JSX or render functions
• Scope your CSS or SCSS to the component

Scoped styles and SCSS can also be written in React components, but require choosing a third-party library like CSS Modules or Emotion.

When it comes to writing highly reusable components, there are specific cases where Vue templates are not the ideal solution and the power of JSX or render functions is needed for your Vue component.

Both technologies use component lifecycles or methods that offer a way of hooking to specific events in the “life” of a component. Vue’s take on lifecycles is a little more straightforward and more intuitive than React. Being a younger framework, Vue seems to have taken the better things from React and Angular and addressed some of their problems.

Learning Curve

Initially, JSX could be a bit of a learning curve for a typical developer. Although JSX is a different approach, it is very similar to HTML, and a developer should be able to grasp it with some practice.

Vue puts a bit more focus on approachability: Making sure people who know basics such as HTML, CSS, and JavaScript can pick up the framework as fast as possible. Vue’s separation of concerns is immediately familiar to any front-end developer, making the framework easy to learn.

Vue does use its own specific syntax with bindings and directives. These are designed to make developers more productive and keep code clean. On the flip side, this means developers have a larger API to learn.

Learning new APIs can introduce cognitive overhead and is a valid concern. However, I would argue React introduces significant cognitive overhead itself for the exact opposite reason. React’s smaller API means we need to use relatively complex patterns to achieve certain things, and this is where we start to meet React’s higher learning curve.

When writing more advanced components, e.g., components wrapping others and giving them additional behavior, you will start to see noticeable differences. With React, you will need to make use of one or more Higher-Order Components, Render Props, or the Function as a Child Component pattern. These patterns provide great solutions to real problems, but they add significant cognitive overhead (more so than learning new syntax does) as they are relatively complex patterns.

In Vue, these patterns are mostly unnecessary due to the larger API exposing a number of methods of passing data around. For example, Scoped Slots (slot-scope attribute) is Vue’s solution to Render Props in React. At the end of the day, learning functional programming patterns in React will make you a better developer, but you have to ask yourself: Do you want to learn patterns and code these yourself in React, or do you want to learn Vue’s syntax and let its code handle solutions for you?

React’s community is indeed much more significant, but has the disadvantage of being more fragmented than Vue’s. It can be harder to find straightforward answers to common problems. Given that Vue is more tightly defined than React, it is noticeable that in Vue many questions are answered straight in the documentation itself, without needing to search too much in other places.

It’s also worth noting that Vue has wonderful documentation and its API references are some of the best in the industry. They’re well-written, clear, and accessible. React documentation is fine. It goes through the basics of React development and includes some advanced concepts, but the presentation isn’t as accessible or well-structured.

All in all, developers will be able to get up to speed faster with Vue than React.

Final Thoughts

Both are powerful tools with their own advantages, and anything you can do with one, you can do with the other (for the most part).

React provides remarkable flexibility for how developers architect their applications. Developers who are JavaScript purists will most likely be drawn to React because a component is just JavaScript – functions returning elements.

Vue as a framework provides more built-in features and companion libraries from the core team, which eventually makes the development experience smoother.

Router integration is a prime example. Vue has conveniently exposed route navigation hooks (beforeRouteEnter, beforeRouteUpdate, and beforeRouteLeave) inside route components where you can easily execute page transition logic.

Vue gets us closer to the actual DOM representation when working with event handlers. I have come across pain points when programming interactions in React, as having access to all properties of an event is not as straightforward.

Vue also provides the option to emit events or pass callbacks (like you would in React).

Finally, being able to quickly write Single File Components and switch to JSX on the fly shows Vue’s flexibility as a tool and progressiveness.

As a developer choosing between the two, I tend to learn toward the one that offers more integrated solutions, is easier to use, and is faster to develop in. You know what I’m saying.

Source: Medium

Recommendation

Again, anything you can do with one, you can pretty much do with the other: component libraries, small to large applications, simple to complex applications, server-side rendering, and generating static pages. However, based on their different natures, I would recommend…

Choose React if:

• You are looking to build complex applications where specific third-party libraries are needed.
• You are potentially going to code a native mobile version of your website and code sharing is important – some React code can be shared with React Native.
• Your developers prefer JavaScript over HTML.

Choose Vue if:

• You need a quick turnaround.
• You are building highly interactive applications with custom animations, page transitions, etc.
• Your developers prefer HTML templates.

Bonus

If you are curious to try React or Vue, Brad Traversy has a fantastic, free one-hour crash course on each tool:

• React JS Crash Course – 2019
• Vue JS Crash Course – 2019