Discussion on: React vs Vue: Compare and Contrast

View post

Here's my take on it:

React

Aims to be a library concerned with rendering UI and it stays true to that purpose. It is unopinionated on how to build apps.
In most use cases, having just a library for rendering UI is not enough, so other packages are typically added (create-react-app with routing, CSS-in-JS, state management, etc.) to improve the experience. With the add-ons, a React app becomes more framework-like.
Templating is done with JSX which are HTML-like elements plus standard JavaScript to create conditionals or loops.

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);

Less domain-specific language as most constructs use standard JavaScript. This can steepen the learning curve but will help improve JavaScript language skills.

Vue

Its purpose is also to render UI, but it has added convenience as official parts of the ecosystem (Vue CLI, Vuex, Vue Router). It is not necessarily opinionated or rigid, but it gives more guidance and convenience to build apps.
By default, Vue components are separated into a template, scripts, and styles to separate concerns.
The templates use directives, which are custom Vue attributes added to HTML elements to output dynamic content that requires an if-statement, loops, etc.

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

More domain-specific language to learn, which can lessen the learning curve but you may not pick up as much JavaScript knowledge.

John Peters • May 26 '20

I think react is opinionated. (Jsx and redux, top down data passing, hooks) However it doesn't hijack JavaScript.

Mike Talbot ⭐ • May 26 '20

I do see that differently:

JSX is sugar over basic JS, it compiles to produce a javascript function that is fast to run. "v-for=" is not. It's being interpreted at run time I believe (feel free to correct me on that, not a Vue expert, tried it for a prototype and felt it was too "other").
I certainly use Hooks (it's a method) but not Redux (don't like it). I use hooks to do lower down binding and reinterpretation of refreshes, because that's my style and it works for me. So I guess React might have an opinion but is isn't forcing it on me :)

John Peters • May 26 '20

First time I saw Jsx I thought it was the coolest thing since chewing gum! I like it actually.

Hooks tie into their state stuff, I don't like react's state stuff. Why? Because I don't see the advantage of farming off state to another thing. Internal variables to the component or even observables are closer to the metal in my opinion. In fact, an Observable could easily mimic the React state stuff. Right?

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Mike Talbot ⭐ • May 26 '20 • Edited

Yeah it's the diffing/refreshing algorithm. See I don't farm it off much - only perhaps when it's a local thing that isn't part of the real application state. So imagine my app is editing documents, I'd use useState to capture the rename of something, in a dialog, in case the user cancels. The rest of the time my React looks like this:

    return <Bound target={someRoot} refresh={refresh}>
        <BoundTextField field="name"/>
        <BoundTextField field="age" transformOut={convertToMinMaxNumber(0, 100)}/>
        <BoundAutocomplete options={choices} field="mode" label="Choose your mode"/>
    </Bound>

Those BoundXYZ things come from a neat little wrapper that interprets the specific components value and events - a one liner
for all of the MaterialUI components I use and the ability to return to
the core if I need it.

Refresh up there is basically an internal trigger using a useState() hook to trigger rendering and perform other actions.

John Peters • May 26 '20

What's your thoughts on this? I haven't tried it in React , but this is how I do it in Angular. Angular automatically detects changes to bound elements.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  let count = 0;
  onCountClicked =()=>{
  count++;
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => onCountClicked()}>
        Click me
      </button>
    </div>
  );
}

Mike Talbot ⭐ • May 26 '20

Yeah I've always liked Angular. We didn't choose it for our current project because we found it hard to "late load" unknown classes for injection into a template - which is a very specific requirement.

If I were to put the point for React it would be that its fairly explicit about what it's doing - it's very mechanical and low level - though having looked at an article of Fiber recently - I guess it isn't THAT low level.

I need something to feel like bound data to be happy, so I make my own. I dislike Redux because your logic is in a huge pile somewhere else. That never worked for the way I reason out problems.

Sergio Daniel Xalambrí • May 26 '20

Redux is not part of React, and is not even recommended in the website, neither it's recommended by the team.

But yeah, React has some opinions on how to build UIs, that includes how to define the UI (JSX) and how to control the state of your UI (top down data passing, useState/useReducer) and how to run effects. Nevertheless, aside of that it's completely un opinionated, it doesn't care how you style your components, how you fetch data, how you manager routes, not even how you animate, that is why there are libs for those things instead of being part of React itself.

John Peters • May 26 '20

When I first learned the top down data model and state stuff, I didn't like react. Then I found they altered Css and renamed tags like link.

Aarón García Hervás • Jun 4 '20

What do you mean by "they altered CSS"?

John Peters • Jun 4 '20 • Edited

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

Instead of this:

   //where the style sheet is contains the className style 
  <span class="className">Menu</span>

When I first read about this many years ago I did not like it. I didn't understand it at the time.

Aarón García Hervás • Jun 5 '20

I'd say that's "altered HTML" (JSX), but no CSS has been altered, right?