Hacker News Reader

Comment by _Codemonkeyism | Hacker News Reader

Not a flamewar, starting a new project, VUE or React?

Depends on your criteria. At this time I feel like React has a larger ecosystem (assuming there isn't a lot of incompatibilities with v16), and there's a clear path to mobile if that's a choice. Vue seems to be a simpler programming model, and makes it easier to iteratively build. Personally I'd say don't make a choice at the beginning, but build a simple version of your app in both (say login and 2 or 3 pages) and make a decision based on that.

Vue is less complex, easy api, and easier to jump into. React is more complex, bigger learning curve, but more featured. Vue has satisfied my needs for 99% of projects.

This really boggles my mind. Having looked very closely at both (and being a react developer full time), I can not recognise this assessment. I just can't see how people can claim that Vue is simpler or easier than React.

React is idiomatic javascript. Vue is it's own quirky thing that doesn't feel anything at all like Javascript to me.

Different peoples brains work differently. React clicks with your brain, but not Vue. I've been doing web development since 1996. I read through both the React documentation and the Vue documentation. Vue just clicked with my brain. I totally groked it from the beginning. React... not so much. Vue has been amazing for us so far.

I'm not sure what feeling anything like JavaScript has to do with the discussion. No one asked which framework is most like JavaScript. I don't think JSX turning JavaScript into some weird XML/HTML hybrid feels like JavaScript either. Sure you can use it without it, but why would you? Vue works for me and others, whereas React works for you, and others. Let's just keep working on our projects.

Because the rest of your application is Javascript. Less cognitive burden when you switch to working on different layers of your application.

Wait, do you really experience cognitive burden when switching between html, js, and css? It surprises me if you do.

I'm talking about switching between a context where there are first class functions that can be easily passed around, to a context where there's some archaic and magical, non idiomatic convention based on string based dependency injection, or magical way of writing attributes.

Except JSX isn't JavaScript, and no one uses React without it. So it's arguably just as much of a cognitive burden.

Depends what you call idiomatic. I dont think JSX is really a JavaScript idiom, more like a HTML idiom applied to JavaScript which happen to be often used together.*

At the end of the day, I think that calling something idiomatic is subjective and so, varies from people to people.

*: to be clear, my point is many people use JSX with React because it feels idiomatic (I manipulate HTML/DOM, so why not just write with HTML-like syntax?) but it is not idiomatic to JavaScript and I don't think the other React APIs are that nice to use. If I didn't use JSX with React, I'd tend to use other framework because, in my opinion, they make more sense.

JSX is optional.

It's optional, and also not optional. Nobody is using React without JSX in practice, because it's ugly and verbose.

Not true, without JSX, React is basically Mithril, if you alias React.createElement to a short function name.

Yeah, and I'm arguing that it's pretty ugly to write nested html that way.

Hater-or-lover of JSX, it is definitely an intuitive way to think about HTML in the context of JS.

I prefer the vue model that's a bit closer to the metal, though, if only because of quirks like className

Think I see what you are getting at--in practice most folks using React are going to use JSX and build tools, and if you alias the function it's kind of non-standard.

Mithril has "class" instead of "className"; that irks me too.

And vue optionally supports Jsx, so original comment or using it as a reason why ‘react sucks’ is being super pandentic. It’s ok to have multiple frameworks!

Optional features contribute to a tool's complexity, especially when every single example assumes you are using said optional feature.

And <Foo bar={'hi!'} /> is the same as Foo({ bar: 'hi!' })

Agreed. Pure views are much simpler.

You can write prop-only, pure views in vue. :)

Ignorance revealed :) thanks. What's Vue's idiomatic approach for managing state at the top, outside of all components (like Redux)?

Vuex (https://vuex.vuejs.org/en/intro.html)

Whether Vue or React is a more "complex" I think depends on how in depth you want to understand it. I could see that Vue is less complex to use, at least superficially, but I think it's way harder to understand.

When I look at the guide and I see stuff like this:

    <div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds
        to see my dynamically bound title!
      </span>
    </div>

I get immediately queasy about what Vue is doing. Does it parse the HTML? How exactly does scoping work? What sort of special classes and expressions can I put in the span, and in what manner will they be evaluated?

In contrast, React is a JS library, and works like any other. JSX is weird for the first minute, but it's a very light transformation to the underlying JS, to the point where when I write it I can mentally see what JS functions I'm invoking, which therefore helps me understand all those things I mentioned before like scoping rules, what this will refer to, etc.

This has been my experience as well. With react if I need something I can generally find a component someone else has already made that is well supported / decent quality. With Vue I will generally have to roll my own.

I haven't looked at React's components (which component library would you recommend?), but so far Vuetify has all the components I've needed.

I am referencing "component" as a more general term. I think Vue has support for all of the common forms/divs/etc, I was more talking about like if you wanted an extensible calendar implementation or a scalable data table implementation there are probably 10 usable components for each of these examples in React but in Vue it would be harder to find one.

That is exactly what Vuetify provides. There are other component libraries for Vue, but so far Vuetify has all the components I've needed.

https://vuetifyjs.com/

Vue is as easy to learn as Angular was. Saying that Vue is less complex - this line gets thrown around as if anyone would easily agree. It is a traditional templating framework, it ships its own javascript emulator and scripting engine, you re-learn everything. Composition is not natural to it. Every single structure is arbitrary. It has an API documentation that spans 70 pages. The cognitive overhead is large.

If you know plain javascript you know half of what makes react. The API surface usually consists of a single function: render. The rest are 3-4 class lifecycles, setState, a few jsx semantics and that's it. You solve problems in the same way you always solved them, there is nothing to re-learn and you don't bend to the framework.

Go ahead and re-create this in Vue, tell me what you're doing is easier:

    import timestamp from 'time-stamp'
    
    const Header = props => <h1>{props.text}</h1>
    
    const Main = () => <Header text={timestamp()} />
    
    ReactDom.render(<Main />, document.querySelector('#app'))

A beginner could blink at this once and start making simple apps blindfolded. A Vue beginner would be stuck even trying to create components, not to mention compose them, or pass props, or access the import. Every single step on top of this has to be fished out of the documentation: children, conditions, loops, filters, etc.

Oh please. React itself might not be that difficult but thrown in couple overly engineered libraries like react-router and immutable.js and that poor beginner will start feeling a bulging Javascript fatigue in their foreheads.

Once you get rolling both of them are good but it's no easy task to start-up a React project on your own. You need a lot libraries, have to twiddle with immutability which is no piece of cake with JS and be constantly aware of small quirks like keys when looping jsx-elements, className instead of class, how to add css preprocessor, using setState instead of directly assigning to it with the constant farce with deeply nested Object.assigning oh such fun.

React tries to make the world a better place with more theoretical approach while Vue focuses on tried-and-true methods that work and are straight-forward for everyone with a little experience in programming. (v-if might not be pretty but it beats JSX conditional) Granted modern frontend development has a lot of different things to be aware of that make it bit difficult for beginners but IMO Vue makes it a lot more simpler and productive. Some things I wish might be better like the ecosystem but oh well. Overall I'm happier and the only problem is having to fight off overly smug React-developers who have rubbed their egos so hard that they aren't able to even think about better solutions anymore.

immutable.js for what? Seems to me you're picking up hear-say here and there but why and for what would you want to use immutable. Even redux docs speak out against it. It's just a random tool like any other, you're assuming it has some deeper significance with react, it doesn't.

> be constantly aware of small quirks like keys when looping

There are no "quirks" in looping anything. It is plain javascript. I would call "v-for" a quirk on the other hand.

    const array = []
    for (let item of items)
        array.push(<li>{item.text}</li>)
    
    render (
        <ul>
            {array}
        </ul>
    )

Recreate the snippet above, then let's discuss.

Doesn't that produce the "array items should have key prop" message?

Also you can use `items.map` in your example.

I only wanted to show that react doesn't specify a programming style. He said javascript maps are "quirky." Maps are fine but so are plain loops. Ternaries are fine, so are plain if-then-else constructs if someone would like it better that way.

The example would run without keys, it's merely for demonstration. You'd need keys in Vue as well.

Vue supports JSX just fine. It also simplifies many things when compared to React:

• lifecycle method names: mounted vs componentDidMount

• proptypes: builtin vs `import PropTypes from 'prop-types'`

• component creation: basic JS object vs ES6 class extending `React.component`

Please don't spread misinformation because you prefer one way of writing frontend apps to another. React is better at complex apps, and Vue has a simpler API that many find easier to memorize.

It's rude to insult other commenters by saying "A beginner could blink at this once and start making simple apps blindfolded." I think you're being hyperbolic, but it comes off as condescending.

Frontend is hard. No one "blinks at this once" and learns how to build component-based layouts with view, data, and logic. Please be nice.

Why don't you actually recreate the snippet of code up there. The same arguments won't win you a price, and i don't agree with them for all the reasons i've stated. Show me how Vue handles the situation up there in such an easy way please, then we would have something to discuss.

> Frontend is hard. No one "blinks at this once" and learns how to build component-based layouts with view, data, and logic. Please be nice.

You seem to purposely misunderstand me. I never said someone could learn react by looking at it. I said someone could understand the nature of simple composition by looking at it.

I learned Vue fully in maybe a few weeks. React in an hour here: egghead.io/courses/react-fundamentals If you think that studying a 70 page document in order to carry out basics like composition is easy then so be it. If you'd actually dare to post the example in Vue, we'd all see how "easy" the hoops would be you'd have to jump through to realize it.

>Why don't you actually recreate the snippet of code up there.

I've never coded in React or Vue but after spending 15 mins reading https://vuejs.org/v2/guide/render-function.html here's a pure JS re-creation in Vue for you (fiddle here: https://jsfiddle.net/0wr6xskh/):

  <div id="app"></div>

  const MyHeader = Vue.component('MyHeader', {
    render: function (createElement) {
      return createElement('h1', this.text)
    },
    props: {
      text: {
        type: String,
        required: true
      }
    }
  });

  new Vue({
    el: '#app',
    render: function (createElement) {
      return createElement('div',[
        createElement(MyHeader, {
          props: {
            text: ''+new Date()
          }
        })
      ])}
  });

The above could be expressed more succinctly in JSX (I just can't be bothered reading up on the syntax since, as mentioned, I've never written anything in it and consequently don't know it). More info on Vue's JSX support here: https://vuejs.org/v2/guide/render-function.html#JSX

Why are you being so confrontational? Seriously. We're discussing web frameworks. This isn't needed on HN, or anywhere. I come here to avoid all the negativity on the web. You enjoy React, we get it. Relax.

I think the argument could be even more compelling without the es6-isms:

  function Header(props) {
    return <h1>{props.text}</h1>;
  }

  function Main() {
    return <Header text={new Date()}/>;
  }

  ReactDom.render(<Main />, document.querySelector('#app'))

Good call. Although the timestamp would have been impossible in Vue since templates don't have scope, they couldn't access imports. One would have to jump through another hoop and inject/duplicate the function into a template method.

"A beginner could blink at this once and start making simple apps blindfolded." Um... I've been doing web development for decades and I don't have a clue what those lines of code are doing.

> I've been doing web development for decades and I don't have a clue what those lines of code are doing.

I don't think that's reacts fault? http://exploringjs.com/es6/index.html#toc_ch_first-steps

Other than the es6 syntax, would you like to specify what it is that you don't understand? If you look at it, it must occur to you that react components are functions that can receive properties and return markup. Now you can compose these functions. Just like in Vue or any other framework there is a single mounting point. If you understand this, you know the largest part of the react library.

I'm not the one who said that a beginner could blink at it and understand how to build React apps.

I never said you know react by looking at it. But you know it good enough to build a simple composition. If i asked you to create another component up there that contains a span, are you seriously saying you wouldn't be able to do it after having looked at it?

    const Foo = () => <span>hey</span>

or, same thing in es5

    function Foo() {
        return <span>hey</span>
    }

And if i asked you to use this component in another, even if you saw how it's done, you would absolutely not be able to pull it off again?

    function Bar() {
        return <Foo />
    }

To be honest, i thought i didn't like react as well when i first encountered it. I didn't actually try to understand, the appearance of it seemed so radically different that i refused to think of it as simple. But i eventually tried and figured that there is actually nothing behind this framework. These are plain functions, or classes with lifecycles. I was wrong in my assumptions.

For a js developer Reactjs is far easier to pick rather then learning vue. Reactjs has few life cycle to learn rest is just javascript.

I think this is a misleading answer. It only appears that way because the React ecosystem is much bigger and tailored to more complex applications. Comparing the Vue library to the React library I find it hard to recommend one over the other -- at the end of the day they're pretty similar.

Vue is React with some Angular flavoring (html templates) and more integrated libraries (state, router, etc).

Usually not a problem but some issues on Github are in "Chinese" (not sure if Mandarin or Cantonese sorry) so not very helpful.

If you want more choices for those libs (at the cost of potentially more dependency update hell) React is great and more popular.

(Side note: Mandarin & Cantonese have the same writing.)

(Side side note: Technically true, but most people speaking Cantonese would probably use traditional characters vs simplified characters for Mandarin)

Oh, I feel stupid then. Thanks for the correction.

Sincerely, we should be leveraging the browser platform and increasingly build our apps on modern platform APIs (e.g. web components), instead of on a framework platform that means more bytes down the wire to do what the browser platform can already natively do.

Admittedly there are tooling gaps with projects like Polymer, but these are being addressed. YouTube.com is already in production built with Polymer.

So just leaving this comment here to encourage everyone to rethink the framework defaults of React/Vue in 2017.

Video here from Polymer Summit on the genesis of web components and the problem it was meant to solve (explosion of frameworks circa 2010, and slow JS apps): https://www.youtube.com/watch?v=y-8Lmg5Gobw

It depends on your project, they are both great frameworks

This is the most curious answer here. What factors would you weigh?

It's actually a very legitimate answer. Vue and React are similar tools that solve basically the same use cases, with some technical and cultural differences.

- React uses JSX and JS logic for render methods. Vue usually uses templates, although JSX is also supported.

- While React _can_ be used as a plain script tag, it's usually compiled as part of a build step. Vue can be compiled, but it seems friendlier to the "drop-in script tag" approach.

- The Vue community values official integrated addons for routing and state management. The React community prefers a "pick-and-choose your own adventure" approach.

- Since React has been around longer, there's probably more React components and related libraries available

- A larger percentage of the Vue community is located in China

The best comparison of Angular, React, and Vue I've seen thus far is at https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-... . It lays out a lot of the similarities and differences in a fair way, and gives some suggestions for why you might pick one over the others.

Sure. I am well aware of these differences. They are basically two different implementations of the same idea with two communities that do things slightly differently.

What I fail to see is how I would choose one over the other for different types of projects. To me, it's a choice a person or a team makes for all projects at once. Jumping back and forth between stacks here would be a lot like jumping back and forth between Django and Ruby on Rails. They aim to solve the same thing, and if you can use one effectively then why would you reach for the other?

I think you're overcomplicating how transferrable framework knowledge is. An expert React developer could switch to Vue no problem if there was demand for it. Similarly an expert Vue developer could switch to React no problem.

I am not. The original question was about starting a new project and the orinal answer was “depends on the project”. I am asking how it depends “on the project” and not on the person. What properties of the project would drive you to choose one over the other?

I think it's more organizational, yeah? The context for two different projects can drastically differ.

Right. So "It depends on your project" should be "it depends on your team" or "it depends on your organization"?

Probably. Also depends on your mood at the time ;)

Wire size. Your projects specific needs. Built out time (i.e making your own components). DOM requirements. Licensing. Community. etc. This is an enormous list of variables to determine. If you were not making a complex site or SPA, learning and using React could be huge overkill even though it could still get the job done. The best way to determine what framework or language to use, for me has always been to assemble my tree of needs first. That included things like, how complex are we talking here. Do we need state management? Do we do most of our rendering server side? Do I have to learn the framework? Are the docs good? Etc. Build a map of our own needs first, then spend a few hrs holding it up to the various options.

Still. It's like saying that you need to own both a DEWALT and a Bostitch drill because they are just different enough when working on dry wall in colonials vs capes. I mean I am sure there is someone out there that uses Vue for odd projects and React for even ones (and Angular for every 13th one that they start on a date that ends in a 5), but most developers I know try both, then stick to the one that they like best.

Which appeals to your aesthetic more? If you're looking to grow a team, which is more appealing to engineers available? Which has a better ecosystem of support libraries?

all good questions also ^

If you also plan to use React Native for mobile apps then go for React.

My choice for vue over react was:

I hate that facebook has basically made a new version of javascript.

I don't like facebook as a company and prefer software that is made by people who aren't told "go make this" by their boss.

Facebook has thrown out all of the previous approaches and just started again. This is good for things like the virtual dom, as the alternatives never worked to begin with, but bad for things like html templates, which have worked fine.

The problem with combining javascript and html (JSX) is that the javascript gets in the way and you can't really see what the component looks.

> I don't like facebook as a company and prefer software that is made by people who aren't told "go make this" by their boss.

If there's any huge company that gives engineers relative freedom to build what they want, Facebook is definitely it.

They're both pretty similar. I would say try working with both on something really small and see which one you like better.

Vue.js is more of a DSL. React is just Javascript. I'd say they're two very different approaches.

I'd recommend react over Vue any day of the week, to answer ops question. Vue.js is everything I hated about Angular. String based dependency injection, bizzare attibute syntax, highly opinionated.

React is everything I love about javascript. Functional, fast, and with an easy to reason about API.

Counterpoint: React is no less opinionated, fast, or has less of a DSL than Vue.

Opinionated: React is a library written for a language that is not JavaScript (the first prototype was written in OCaml). It demands immutability, which JS has no native support for. it wants you to use FP, but JS natively has little support for FP both in its standard library and syntax. FP only looks good in JS if you've never used a real FP language.

DSL: JSX is a DSL - I can't remember the last time I've seen someone use && as a poor man's if statement, or ternary statements dozens of lines long until I started writing JSX. JSX is neither idiomatic JavaScript nor HTML.

Fast: Performance benchmarks (which admitted are flawed as they can't capture real-world usage) show that React and Vue have similar rendering speeds. Vue's computed property dependency tracing means that a lot of the performance optimizations which require manual work to enable in React (manually memoize expensive computation, shouldComponentUpdate, PureComponent etc.) are handled automatically by the framework.

> DSL: JSX is a DSL - I can't remember the last time I've seen someone use && as a poor man's if statement, or ternary statements dozens of lines long until I started writing JSX. JSX is neither idiomatic JavaScript nor HTML.

Nothing in React forces you in any way to use ternaries. You can do all your pre-calculation in the render method, and if that's your style you would most certainly do that.

    const Say = ({ reverse, text }) => {
        if (reverse)
            text = text.split('').reverse().join('')
    
        return <div>{text}</div>
    }
    
    <Say reverse text="hello" />

Btw, Vue isn't any different here, you use ternaries there as well, only that it's severely limited as you couldn't refer to other components, the template is a dead string after all:

    template: `
        <li v-for="(item, index) in items">
            {{ index > 2 ? item : item.split('').reverse().join('') }}
        </li>`

> It demands immutability, which JS has no native support for.

It doesn't do that at all. Even redux uses plain shallow copies. Vue on the other hand does exactly that, it uses observables which aren't supported in most browsers. Reason why as of version 3 you will maintain two codebases (one for IE11 and prior, one for evergreen) since Proxies aren't back-compatible.

> it wants you to use FP

Not at all. It is unopinionated.

> it demands immutability, which JS has no native support for.

You don't need native support, just don't mutate state when calling setState, which is a pretty simple rule to follow.

> it wants you to use FP,

This isn't really true. React components are often written as ES6 classes and stateless functional components are only functional insomuch as they are literally just a function. I can't think of any advanced FP concepts that are necessary for idiomatic React.

> JSX is a DSL

Technically true, but in practice it is just ES6 and the HTML side of JSX so closely resembles actual HTML that the DSL criticism loses most of its meaning.

> I've seen someone use && as a poor man's if statement

It may be a code smell, but it's certainly valid JavaScript and not a technique that could be correctly described as contributing to the idea that JSX is a "DSL". Also, you don't have to do that, just use an if statement or a ternary operation to compute your result outside of the JSX block and reference the resulting variable in the template part of the render function.

> React is a library written for a language that is not JavaScript (the first prototype was written in OCaml)

This is incorrect. React was written first in JavaScript in the Facebook Ads org, to be used in the Ads Create Flow application. Jordan's dive into OCaml came later, which is why we now have Reason many years later.

On JSX... ok, that's not Javascript. Nor is it HTML. But it absolutely the right tool for the job, if that job is creating component based web applications.

JSX is such a perfect fit that I take umbrage with people who sneer at it. What better way is there to bridge the gap between the DOM and Javascript? And JSX isn't exclusive to React anymore. That's testament to how useful and practical JSX is. I can see JSX becoming bona fide standard like HTML.

It's not as opinioned as you think. All of the reasons you listed for disliking are just one way of writing it in vue. If you love jsx and pure javascript you can use them as well.

I learned react before vue and found it great compared to angular but lately I've been using vue. It is quickier and neater with the bizzare syntax and lighter overall.

With the latest release I have the urge to go back.

They're both opinionated. Actually, every framework out there is trying to reinvent the wheel (shame on Web Component slow and still ineffective development, what a pity).

I guess will stand out and prosper the one with the largest adoption (to this point, React). All this looks exactly like the old jQuery vs Mootools vs Prototype debate 10 years ago.

History repeats itself.

> Vue.js is more of a DSL.

You can use Vue as plain JS. You don't lose much by abandoning the single file components.

> React is just Javascript.

Except the entire ecosystem is designed to steer you toward JSX which is not "just Javascript".

JSX is just JavaScript.

    const A = () => <div>hello</div>

Is the same as

    const A = () => h(“div“, null, “hello“)

JSX is neither HTML nor a template DSL, it simply transform into a function signature. 9 out of 10 frameworks base on the functional approach today, including Vue.

I like opinionated frameworks.

The opposite of an opinionated framework is an opinionated user-base.

You ask what should I use for X (routing, state management, HTTP requests, etc, etc) and every react developer gives you a different combination of answers, and you have no good way to figure out which combination is the best.

I much rather the framework answer those questions for me so I can focus on getting shit done and actually building the thing I want to build.

Thanks for this. I hated Angular for the same reasons although it seemed really great at first.

Thanks to all who have replied, you helped a project succeed :-) Thanks for the downvotes to keep HN clean.

MobX + React > Vue ;)

Reply on news.ycombinator.com