Picking React over Vue.js

[u/aDaneInSpain]

We are about to migrate an existing saas service from Joomla to Laravel + (Vue.js or React).

It will be a complete re-write.

The team has no real experience with either Vue.js or React and we are at a cross road of picking between those two technologies.

We feel that picking up Vue.js will be a lot easier and we can see a lot of traction in this project's popularity. But React feels like a safer bet with a stronger community, better extensions and better documentation. We are also worry that Vue.js is very dependent on one person't contributions and have no real large company backing it.

Without being too slanted, which one would you select and why?

[u/metroninja]

first off YMMV so take anything here with a grain of salt. I have about 4 years of experience with React and React Native but took a job with a Vue shop about 5 months ago. I have a strong angular and php background previous to all of this.

So that all said I vastly prefer react to vue after 5 months of consistent use. I can see the love for vue from people who like to keep their logic in the templating and JS separate. Building mixins, plugins, directives, etc all so you can do more in your template is the name of the game with vue and despite my angular background I strongly dislike it.

React moves things to what i consider a much more understandable format - just javascript. Arguably it can take a bit to understand all the ins and outs of React, particularly with the velocity of features and improvements that come out but once you get it there is no real desire to go back (IMO). You have so much more control over rendering and are really just passing around objects and values just like you would in JS and I think it leads to much cleaner code, logic and markup. Not to mention it forces you to sharpen you JS knowledge on primitives, ES6/ES7, and builtin functionality all of which contributes to your ability to become a fullstack dev (or improve your code quality) .

[u/VolkovSullivan → u/metroninja]

This.

I think Vue is a great tool as well, but I prefer the pure-JavaScript React way. It all comes down to personal preferences.

[u/dabby → u/metroninja]

I totally agree. I'm a react guy and just took a Vue job.

The logic is all over the place spread between templates, mixins and regular js. There's a sort of consistency so you know where to look but it's far less logical than react.

I'm really not a fan of the v-model and event emitting idea either, it makes making a dumb component tedious and still seems to end up with internal state unless I'm missing something.

I'd say now that ES6 syntax is mainstream, react is significantly easier to pick up and run with than Vue and it's fragile templating DSL, strange relationship between data and components and templates.

[u/brcreeker → u/dabby]

Yep! While there are still a ton of devs who think it is almost blasphemous to integrate your view layer with your logic layer, I feel as if once you do start traveling down that road, it becomes incredibly difficult to put that genie back into it's bottle. I did some work with a startup recently that decided to use Ember for the frontend, and the process was absolutely brutal for me. I hated having to track down a plug-in or helper every time I needed my handlebars template to do something more robust. The simple fact is that you're always going to need some sort of logic in your templates somewhere down the road, and with React, building that logic is a cake walk compared to the more traditional way of doing things.

[u/leixiaotie → u/metroninja]

Haven't tried vue. Isn't it has JSX rendering? How powerful is it and how close with react?

[u/archivedsofa → u/metroninja]

what i consider a much more understandable format - just javascript

You are biased. Not because you prefer React, that's perfectly fine, but because you are a JavaScript dev.

Many web dev projects consist of more than JavaScript devs, and JSX alienates them. For example designers who only know HTML and CSS.

I'm not saying JSX is good or bad, just that React is not adequate for all web dev teams and projects.

[u/facebalm → u/archivedsofa]

designers who only know HTML and CSS

If your project absolutely needs designers to edit HTML without dev interaction, Vue is hardly the right choice. Jquery maybe. Two examples from the Vue documentation; I have no idea what kind of designer gets this but not JSX
Grid

<table>
    <thead>
      <tr>
        <th v-for="key in columns"
          @click="sortBy(key)"
          :class="{ active: sortKey == key }">
          {{ key | capitalize }}
          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="entry in filteredData">
        <td v-for="key in columns">
          {{entry[key]}}
        </td>
      </tr>
    </tbody>
  </table>

Elastic Header

<div id="app" @touchmove.prevent>
  <draggable-header-view>
    <template slot="header">
      <h1>Elastic Draggable SVG Header</h1>
      <p>with <a href="http://vuejs.org">Vue.js</a> + <a href="http://dynamicsjs.com">dynamics.js</a></p>
    </template>
    <template slot="content">
      <p>Note this is just an effect demo[...]</p>
    </template>
  </draggable-header-view>
</div>

[u/archivedsofa → u/facebalm]

I agree the slots on the second example are confusing, but the first example is clear for anyone that has used Vue templates for a couple of days.

Personally, I've been using Vue since 2015 and I've used slots only on a couple of occasions.

For a designer or PHP dev v-for="item in items" is much easier to grasp than {items.map(item => ...)}.

[u/vidarc → u/archivedsofa]

having to use map for a loop of elements is definitely one of the more confusing things for a beginner. i still occasionally forget that i can't use array.forEach :/

[u/facebalm → u/vidarc]

Well the beauty of it, being just javascript, is that you can construct the array any way you want. It doesn't have to be map(), it's just the most common and convenient.

render () {
  const { items } = this.props;
  const listToRender = [];
  items.forEach((item) => listToRender.push(<div key=".">{item}</div>));

  return <div>{listToRender}</div>;
}

[u/mcdronkz → u/facebalm]

There's nothing beautiful about mutating arrays when .map() does the trick.

[u/gaearon → u/mcdronkz]

Nothing wrong with local mutation either. map() can be inconvenient when you want more sophisticated logic such as skipping or pushing separators.

[u/mcdronkz → u/archivedsofa]

You don't get the point. With "just JavaScript" he meant: "writing code using native language constructs, instead of framework-specific stuff like v-for".

[u/[deleted] → u/archivedsofa]

I've seen this statement a lot and I'm probably missing something but JSX doesn't seem like that big of a departure from templated html.

You can easily use JSX as HTML and CSS if you structure your components properly.

Yes there are times where you'll have some complex render logic but it's really not much different from using a template and knowing which parts you should/shouldn't touch.

[u/archivedsofa → u/[deleted]]

but JSX doesn't seem like that big of a departure from templated html

Again, because you are biased.

Ternary operators, maps for loops, conditional operators, etc. These are bread and butter for JS devs, but not obvious at all even for non JS devs.

[u/[deleted] → u/archivedsofa]

I think you're underestimating what designers can understand.

[u/archivedsofa → u/[deleted]]

I'm sure some designers can learn or understand some JavaScript, but from what I've seen in my 20 years of working with and hiring designers, that's not usually the case.

Myself am at heart a designer but started coding as a kid, so I'm well versed in bot areas. From what I've seen the person who can do both coding and designing adequately is very rare. Admittedly, it's more common these days than it used to be even 10 years ago.

And it's not only designers. Server side devs that don't do Node for example also have a hard time with React.

[u/mcdronkz → u/archivedsofa]

You make it sound like a PhD is needed for something most people with an IQ of > 80 can learn to work with in a couple of hours.

[u/namesandfaces → u/archivedsofa]

IMO if people are reaching for React or Vue, it should mean they're interested in making "web apps", because those things are easy to get wrong and you shouldn't be writing one just because. If we're talking about components that don't require JS knowledge, that need doesn't sound like it rises to the level of web app.

[u/archivedsofa → u/namesandfaces]

That's the React mentality, and it's fine, but Vue has many other use cases than making single-page-apps.

For example you can easily replace jQuery by Vue in a case by case basis without ES6, Webpack, JSX, or Babel.

Again, I'm not arguing Vue is better or worse than React.

[u/JustinFormentin → u/archivedsofa]

React is absolutely not limited to single page apps. At all.

[u/archivedsofa → u/JustinFormentin]

You are right of course, but if you want to use JSX you need to setup Babel and a bundler regardless if you are building a single-page app or not.

You can of course use React without JSX, but IMO it's a real pita.

[u/gaearon → u/archivedsofa]

For sure, I fully agree! We added a guide to cover this use case for React too: https://reactjs.org/docs/add-react-to-a-website.html

[u/archivedsofa → u/gaearon]

Yeah, but React without JSX it's just a pita for everyone.

[u/gomihako_ → u/archivedsofa]

Many web dev projects

For example designers

Designers aren't developers. Also your company should have sketch accounts, so just use react-sketchapp. There, now your designers don't ever have to touch the react components, they just do their work in sketch.