5 ms·

I'm too inexperienced to have a definitive opinion, but I'm not nearly so positive and wanted to toss out a contrasting opinion to the current comments. After

I'm too inexperienced to have a definitive opinion, but I'm not nearly so positive and wanted to toss out a contrasting opinion to the current comments. After a few years of using React and some past experience with various other templating/view systems (webdev of one sort or another since '99) I started picking up a little Vue. So far it's been easy enough, but it is highly confusing compared to most other systems I know. The syntax is like JS handled through custom HTML attributes. In one place a string is a string, in another it's a reference to a component property. If I want to iterate over a list, I spit out the `<ul>` and then an `<li>` that has special attributes that says to repeat it N times, filling in these different bound values. Compare that to, say, React, where my code is code, and my HTML looks like HTML (but is actually code) and the relationships become more clear, less magic. If I want to loop over an array and output some <li> tags....that is exactly what I do. Vue reminds me of JSP...that's not a point in it's favor in my book. Now - I've only been using it for a week, and there is so much more to learn. But in terms of first impressions, Vue has not impressed me...and I actually expected to be impressed.

philliphaydon 8y ago
I have the opposite feeling to you. The template feels like HTML to me and the syntax is clear and concise. React for me gets confusing with it all muddled together. But each to their own.
- dmitriid 8y ago
  Compared to React (and React’s JSX) Vue’s syntax is orders of magnitude more complex and is very inconsistent: https://news.ycombinator.com/item?id=19199423 https://news.ycombinator.com/item?id=19199423
  - konart 8y ago
    I feel that this baybe the case when you know js very well and it's just easier for you to write 'custom-js' that will be transpiled to regular one. I'm working on backend most of the time and relatively recently I needed to do switch to frontend part of our service. For me Vue seems much easier and less confusing. You just have your plain html template and a few 'hooks' to make it work with your js script. >magnitude more complex and is very inconsistent: Just as the other guy said - it is very intuitive. You don't even have to learn much of js to make it work perfectly.
    - dmitriid 8y ago
      Thank you! That is the best explanation I’ve seen on how people may perceive Vue vs React vs other frameworks. Never thought of it this way.
    - eeeeeeeeeeeee 8y ago
      I think this is accurate. My background is also in the backend realm and so I'm not a frontend person and my Javascript knowledge is marginal. I recently had to take on a more frontend project and I went with Nuxt/Vue over React. That being said, I do share some of the other comments about how it can be confusing with bound elements and iterating over objects, or areas you aren't allowed to use string concatenation. A lot of this magic happens behind the scenes so it's a bit of trial and error, and feels foreign if you're used to being able to do those sorts of things in the past. I also think that React (with JSX) is a bit more "out in the open" about how things work and what is expected, without reading tons of documentation, and less under-the-hood magic. So it's easier to get up to speed, and your JS knowledge will improve over time (especially if you already know other languages).
  - bpicolo 8y ago
    You can use JSX in Vue if you so choose (https://vuejs.org/v2/guide/render-function.html https://vuejs.org/v2/guide/render-function.html). I personally prefer the templates, and I enjoy the usage of HTML attributes for loops / conditionals, but the option is there, and there's no one correct answer here that everybody can agree on (which is fine).
  - mmcnl 8y ago
    That's a very strong statement. To me the templating part of Vue is the least of my problems. While in theory you could make it sound complex by listing an exhaustive list of custom attributes, in reality this is almost never a problem. I have 2+ years experience in Vue, and I've never had any issues with the templating. Problems that are orders of magnitude more complex than templating are problems related to component lifecycles, functional composition, higher-order components, application architecture, server-side rendering + hydration, etc. None of this is solved by using JSX or some other templating language and these kind of problems exist regardless choosing Vue/React. I feel like these kind of arguments are usually made by people who don't have any extensive experience using Vue, because in practice, it's not really a problem. Sure, you may not like it and prefer JSX (I understand all the pros and cons, all very valid), but that's a whole different statement than saying "Vue's syntax is orders of magnitude more complex and very inconsistent". That's just plain wrong.
    - dmitriid 8y ago
      > a whole different statement than saying "Vue's syntax is orders of magnitude more complex and very inconsistent". That's just plain wrong. There is an easy test to see if my statement was true or false: <tag attr="x"> where "attr" is a Vue attribute. What is x and what can x be? An expression? A string? A function reference? An object? How will it be processed and presented in the end? As a string? As a function call? At any given point in time the value in an attribute is entirely dependent on context (which particular Vue attribute it's in) and on a very arbitrarily defined rules for those attributes. For example, v-on accepts three absolutely different and incompatible things: v-on:click="x + 1" A Javascript expression v-on:click="function_ref" A function reference bound to JS-code v-on:click="function_call(param1, param2)" Looks like a function call but isn't. It's a way to declare a function ref that will be called with bound params And that's just one of the tags! I'm not even touching on the JS side of things where magic is abound (see comments at the end here: https://news.ycombinator.com/item?id=17471199 https://news.ycombinator.com/item?id=17471199) Compare to React's JSX: <tag attr="x"> // x is a string <tag attr={{ x }}> // x is a valid Javascript expression These are the same and they are consistent for every single attribute. The only limitations come from the meaning and the usage of the attributes themselves. <tag onClick={{ function_ref }}> <tag onClick={{ () => regular_JS_arrow_function() }}> onClick expects a function reference because that's what it will eventually call And the rest around JSX? Plain old Javascript. Where this: { data: function () { return { open: false } } } doesn't magically turn into this in a completely different part of the object: { methods: { toggle: function () { this.open = !this.open } }
- ergothus 8y ago
  I doubt we'll agree, but something as simple as: make an unordered list of hrefs with a url (based on name) and the name. Also, have a class on the currently selected <li> (currently selected meaning some variable matches the item name in the list) ends up with several special attributes, and a scope question (will a bound class see the iteration variable?) - all of which is not a question in something like React because there's not special scope being created, the same rules I'm used to always apply. Different strokes for different folks, but I was quite surprised at my experience. Everyone keeps using the word "intuitive", and anything that I have to learn all these rules and special cases for is the opposite.
BigJono 8y ago
I've been using it for 6 months now, and I still can't wait to go back to React, for the exact same reason you mentioned. I'm 'fluent' in Vue now, and it hasn't grown on me in the slightest.
viraptor 8y ago
> In one place a string is a string, in another it's a reference to a component property. It's not wrong, but this way it sounds way more scary than: "Properties which start with "v-" are treated specially by Vue and don't end up in the rendered output."
- dmitriid 8y ago
  It doesn’t sound scary. It sounds correct and on the point. Vue’s v-* attributes are a stringy mess [1], and it doesn’t really matter that they don’t end up in the output. [1] https://news.ycombinator.com/item?id=19199423 https://news.ycombinator.com/item?id=19199423
javitury 8y ago
One thing I love about Vue is flexibility. If you want to use pure javascript, you can create the render function directly and forget about templates. Most of vuetify components are pure javascript. Also vue has support for JSX if you prefer that.
- have_faith 8y ago
  This is the same for React. Not sure about Angular it's been a while since I've used it.

philliphaydon 8y ago

I have the opposite feeling to you. The template feels like HTML to me and the syntax is clear and concise. React for me gets confusing with it all muddled together. But each to their own.

dmitriid 8y ago
Compared to React (and React’s JSX) Vue’s syntax is orders of magnitude more complex and is very inconsistent: https://news.ycombinator.com/item?id=19199423 https://news.ycombinator.com/item?id=19199423
- konart 8y ago
  I feel that this baybe the case when you know js very well and it's just easier for you to write 'custom-js' that will be transpiled to regular one. I'm working on backend most of the time and relatively recently I needed to do switch to frontend part of our service. For me Vue seems much easier and less confusing. You just have your plain html template and a few 'hooks' to make it work with your js script. >magnitude more complex and is very inconsistent: Just as the other guy said - it is very intuitive. You don't even have to learn much of js to make it work perfectly.
  - dmitriid 8y ago
    Thank you! That is the best explanation I’ve seen on how people may perceive Vue vs React vs other frameworks. Never thought of it this way.
  - eeeeeeeeeeeee 8y ago
    I think this is accurate. My background is also in the backend realm and so I'm not a frontend person and my Javascript knowledge is marginal. I recently had to take on a more frontend project and I went with Nuxt/Vue over React. That being said, I do share some of the other comments about how it can be confusing with bound elements and iterating over objects, or areas you aren't allowed to use string concatenation. A lot of this magic happens behind the scenes so it's a bit of trial and error, and feels foreign if you're used to being able to do those sorts of things in the past. I also think that React (with JSX) is a bit more "out in the open" about how things work and what is expected, without reading tons of documentation, and less under-the-hood magic. So it's easier to get up to speed, and your JS knowledge will improve over time (especially if you already know other languages).
- bpicolo 8y ago
  You can use JSX in Vue if you so choose (https://vuejs.org/v2/guide/render-function.html https://vuejs.org/v2/guide/render-function.html). I personally prefer the templates, and I enjoy the usage of HTML attributes for loops / conditionals, but the option is there, and there's no one correct answer here that everybody can agree on (which is fine).
- mmcnl 8y ago
  That's a very strong statement. To me the templating part of Vue is the least of my problems. While in theory you could make it sound complex by listing an exhaustive list of custom attributes, in reality this is almost never a problem. I have 2+ years experience in Vue, and I've never had any issues with the templating. Problems that are orders of magnitude more complex than templating are problems related to component lifecycles, functional composition, higher-order components, application architecture, server-side rendering + hydration, etc. None of this is solved by using JSX or some other templating language and these kind of problems exist regardless choosing Vue/React. I feel like these kind of arguments are usually made by people who don't have any extensive experience using Vue, because in practice, it's not really a problem. Sure, you may not like it and prefer JSX (I understand all the pros and cons, all very valid), but that's a whole different statement than saying "Vue's syntax is orders of magnitude more complex and very inconsistent". That's just plain wrong.
  - dmitriid 8y ago
    > a whole different statement than saying "Vue's syntax is orders of magnitude more complex and very inconsistent". That's just plain wrong. There is an easy test to see if my statement was true or false: <tag attr="x"> where "attr" is a Vue attribute. What is x and what can x be? An expression? A string? A function reference? An object? How will it be processed and presented in the end? As a string? As a function call? At any given point in time the value in an attribute is entirely dependent on context (which particular Vue attribute it's in) and on a very arbitrarily defined rules for those attributes. For example, v-on accepts three absolutely different and incompatible things: v-on:click="x + 1" A Javascript expression v-on:click="function_ref" A function reference bound to JS-code v-on:click="function_call(param1, param2)" Looks like a function call but isn't. It's a way to declare a function ref that will be called with bound params And that's just one of the tags! I'm not even touching on the JS side of things where magic is abound (see comments at the end here: https://news.ycombinator.com/item?id=17471199 https://news.ycombinator.com/item?id=17471199) Compare to React's JSX: <tag attr="x"> // x is a string <tag attr={{ x }}> // x is a valid Javascript expression These are the same and they are consistent for every single attribute. The only limitations come from the meaning and the usage of the attributes themselves. <tag onClick={{ function_ref }}> <tag onClick={{ () => regular_JS_arrow_function() }}> onClick expects a function reference because that's what it will eventually call And the rest around JSX? Plain old Javascript. Where this: { data: function () { return { open: false } } } doesn't magically turn into this in a completely different part of the object: { methods: { toggle: function () { this.open = !this.open } }
ergothus 8y ago
I doubt we'll agree, but something as simple as: make an unordered list of hrefs with a url (based on name) and the name. Also, have a class on the currently selected <li> (currently selected meaning some variable matches the item name in the list) ends up with several special attributes, and a scope question (will a bound class see the iteration variable?) - all of which is not a question in something like React because there's not special scope being created, the same rules I'm used to always apply. Different strokes for different folks, but I was quite surprised at my experience. Everyone keeps using the word "intuitive", and anything that I have to learn all these rules and special cases for is the opposite.

BigJono 8y ago

I've been using it for 6 months now, and I still can't wait to go back to React, for the exact same reason you mentioned. I'm 'fluent' in Vue now, and it hasn't grown on me in the slightest.

viraptor 8y ago

> In one place a string is a string, in another it's a reference to a component property. It's not wrong, but this way it sounds way more scary than: "Properties which start with "v-" are treated specially by Vue and don't end up in the rendered output."

dmitriid 8y ago
It doesn’t sound scary. It sounds correct and on the point. Vue’s v-* attributes are a stringy mess [1], and it doesn’t really matter that they don’t end up in the output. [1] https://news.ycombinator.com/item?id=19199423 https://news.ycombinator.com/item?id=19199423

javitury 8y ago

One thing I love about Vue is flexibility. If you want to use pure javascript, you can create the render function directly and forget about templates. Most of vuetify components are pure javascript. Also vue has support for JSX if you prefer that.

have_faith 8y ago
This is the same for React. Not sure about Angular it's been a while since I've used it.