Which JavaScript library should I use?

Introduction

Most importantly, pretty much all modern JavaScript libraries do the same things - they all manage reactive state, they all update the DOM for you, they all support dynamic components, etc. Most of the substantive differences are under the hood and don’t really matter for our intents and purposes. The differences we see mostly impact developer experience (DX), and that’s what's covered here.

We will be focusing on React and Vue here, because they are the ones with which I'm most familiar.

Imperative vs. declarative

One of the biggest differences between the two is how you specify the HTML elements to render. When using React, you use an imperative approach, where you more explicitly tell it to render elements using JSX, which allows you to write HTML-like markup inside JavaScript.

For example, let's say we want to display a list of the fruits in this array:

const fruits = [‘apple’, ‘banana’, ‘orange’];

To render a list in React, we tell it to iterate through each item in the array:

return (
  <ul>
    {fruits.map((fruit) => (
      <li>{fruit}</li>
    )}
  </ul>
);

Vue takes a less heavy-handed, declarative approach. Elements are defined in a more HTML-native way using "directives", which are like element attributes:

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

Single-file components

One of the more unique features of Vue is the ability to have single-file components (SFC), which means having the JavaScript logic, the HTML template, and the CSS styling all in the same file but in different sections:

<!-- FruitList.vue -->

<script setup>
  const fruits = [‘apple’, ‘banana’, ‘orange’];
</script>

<template>
  <ul>
    <li v-for="fruit in fruits">{{ fruit }}</li>
  </ul>
</template>

<style>
  ul {
    list-style-type: circle;
  }
</style>

Here's what it would look like in React:

/* FruitList.jsx */

export default function FruitList() {
  const fruits = [‘apple’, ‘banana’, ‘orange’];
  
  return (
    <ul style={{ listStyleType: 'none' }}>
      {fruits.map((fruit) => (
        <li>{fruit}</li>
      )}
    </ul>
  );
}

In my personal experience, because of this, React allows for faster development, but Vue tends to result in cleaner source code.

Attribute conflicts

Because React is JavaScript at the root, there are certain HTML attributes that must be renamed due to conflicts with reserved words in JavaScript.

Here are a couple more common examples:

class -> className

HTML:

<button class="btn-primary">Submit</button>

React:

return (
  <button className="btn-primary">Submit</button>
);

for -> htmlFor

HTML:

<label for="email">Email address</label>
<input id="email" />

React:

return (
  <label htmlFor="email">Email address</label>
  <input id="email" />
);

Because Vue is more HTML-like at the root, you can use native HTML attribute names; there are no naming conflicts.

Similarly, inline styles in React must be specified as an object:

HTML:

<div style="background-color: black">
  Hello world
</div>

React:

return (
  <div style={{ backgroundColor: 'black' }}>
    Hello world
  </div>
);

In Vue, there is no need to do this unless you use dynamic styling.

Conclusion

To sum up, while there are probably some fundamental differences in terms of what each library/framework can do, any of them are suitable for the extent of our needs. The differences we would see involve the developer experience.

Due to JSX's nature of having HTML within JavaScript, it is usually faster to develop with React. On the other hand, Vue usually results in cleaner code with more separation of concerns.

Another thing that's worth mentioning is that React is more widely used in the marketplace, whereas Vue is a bit more esoteric.