Why Did I Quit Vue for React?

The day I started modern front-end development, I made a decision every single developer are once doing in its life: choosing the right framework.

It was the time to stop making ugly-unstructured-plain-old-javascript with jQuery.

Let’s enter in the new era of the trendy-shiny-popular-modular-javascript framework.

So I choose VueJS.

Here are the reasons why I loved (and still love) VueJs.

1. Keeping my precious HTML/CSS/JS structure at one place

By far, the number one argument to sell VueJS, make it incredible.

Vue files are very appealing for beginners.

It’s simple to understand and easy to break your entire HTML template to Vue files.

I can find out at a glance the structure (template), the behavior (script) and the look and feel (style).

<template>
<div id="myComponent">
  <Counter />
  <span v-if="reading">Hello reader !</span>
</div>
</template>

<script>
import Counter from "@/components/Counter";

export default {
  name: "myComponent",
  components: {
    Counter
  }
}
</script>

<style>
#myDiv {
  display: block;
}
</style>

2. Vuex

When I discovered how a state management system works, I started with Redux. It was hard to learn and seems to me over complicated.

With Vuex, it was damn good.

Only actions, mutations and stores are involved compared to actions, reducers and stores belonging to Redux. I didn’t catch reducers logic compared to mutations due to a lack of general knowledge when I discovered it or some bad learning resources I used.

For me, Vuex has been easier to start with for a newbie.

3. NuxtJS

To be honest, NuxtJS — inspired by the React NextJS — was my go-to-framework for a Vue project.

I like the convention-over-configuration architecture of a Nuxt project.

Pages are under page directory.

Components in component directory.

Store in store directory.

Middleware in middleware directory and so one.

All the injections are transparent. nuxt.config.js centralize all configurations. Amazing ! It let you build SSR-enabled website and SPA without headaches.

But I give React a try (again)

I didn’t tell you that before learning Vue I tried React but it was too brutal at first glance.

My knowledge about how a state management works and knowing more about ES6 language specifications has changed.

I saw plenty of articles even people around me are talking about React. So I give it a try.

And it works. Enough to adopt the framework in my projects.

Here is my point of view of the React's best benefits.

1. ES6 and TypeScript friendly

Developers know and master classes, interfaces and enumerations. It was why I was able to understand how React Components works and integrates in an application.

You can use ES6 syntax as well with Vue but React is well more designed than Vue. Look at how you have to do to register components in React:

class MyComponent extends React.Component {
  render() {
    return(<div />)
  }
}

For VueJS, you pass an object to the Vue Component function:

Vue.component({
  template: `<div></div>`
})

Therefore, modern React (today in 2020) doesn’t involve class anymore but functional component (and hooks).

TypeScript is making JavaScript great again. Just try it out, and you’ll like it.

VueJs now offers TypeScript support. This support is not well polished like React using CRA (Create React App) with TS support in a single command.

For Vue, we still need some third-party packages with custom decorators and features to create a true, complete TypeScript application, and the official documentation does not include all the information you need to get started.

2. JSX

JSX is not evil.

There are two schools: the pro-JSX and the anti-JSX. I don’t like to take a part of that conflict. JSX can be good or bad, it depends on how you want to work with your template.

From my point of view, it is more logical for a developer minded to write JSX like

return (
  <div>
    {students.map(student => <p>{student}</p>)}
  </div>
)

than the more HTML-ish way of Vue

<div>
  <p v-for="student in students">{{ student }}</p>
</div>

It’s a matter of preference, I find JSX more powerful and flexible.

3. Getting hook by hooks

I started learning and developing with React Component. The problem is, to create a single component as a React Component class, it takes a lot of effort.

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
  }

  render() {
    return(<div/>)
  }
}

Functional components let you use local state with hooks. It removes a lot of boilerplate and useless constructors.

function MyComponent() {
  const [counter, setCounter] = useState(0)

  return(<div />)
}

React Hooks simplify the use of state and other React parts like useEffect instead of componentDidMount and componentDidUpdate.

Some developers like the OOP approach by staying with classes, others the functional approach. You can use both in a project ! 🤙

4. Community

Behind great projects are great humans.

By experience, there is much more documentation, third-party tools and modules for React than Vue.

I sometimes struggled by looking for Nuxt issues and found lots of Next (React) topics.

By looking Github repos, numbers speak by themselves.

Or with their respective frameworks.

Community leverage reliability of your code by solving bug fixes quicker. Finding people with the same problem as you make your resolution fast therefore your shipping.

Vue 3 is coming…

Vue is currently in version 2, version 3 is still in beta but there are a lot of big changes.

One of them is the Composition API, you can manage the state without Vuex and more cool things on the road!

So, do I like VueJS ? Yes.

Do I like React ? Yes.

Is React better than Vue ? Matter of interest.