5 ms·

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 temp

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.

mplewis 9y ago
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.
- mlsarecmg 9y ago
  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.
  - overcast 9y ago
    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.
  - corford 9y ago
    >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 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/ 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 https://vuejs.org/v2/guide/render-function.html#JSX
tekkk 9y ago
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.
- mlsarecmg 9y ago
  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.
  - mikewhy 9y ago
    Doesn't that produce the "array items should have key prop" message? Also you can use `items.map` in your example.
irrational 9y ago
"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.
- mlsarecmg 9y ago
  > 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 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.
  - irrational 9y ago
    I'm not the one who said that a beginner could blink at it and understand how to build React apps.
    - mlsarecmg 9y ago
      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.
aboodman 9y ago
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'))
- mlsarecmg 9y ago
  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.

mplewis 9y ago

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.

mlsarecmg 9y ago
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.
- overcast 9y ago
  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.
- corford 9y ago
  >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 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/ 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 https://vuejs.org/v2/guide/render-function.html#JSX

tekkk 9y ago

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.

mlsarecmg 9y ago
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.
- mikewhy 9y ago
  Doesn't that produce the "array items should have key prop" message? Also you can use `items.map` in your example.

irrational 9y ago

"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.

mlsarecmg 9y ago
> 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 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.
- irrational 9y ago
  I'm not the one who said that a beginner could blink at it and understand how to build React apps.
  - mlsarecmg 9y ago
    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.

aboodman 9y ago

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'))

mlsarecmg 9y ago
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.