7 ms·

I've been using React for a year or two, and I thought it's my holy grail for frontend. Few weeks ago a colleague suggested Vue for a project. Initially I was

I've been using React for a year or two, and I thought it's my holy grail for frontend. Few weeks ago a colleague suggested Vue for a project. Initially I was skeptical, but as I learn it, my mind is blown. Esp. look at quasar.dev, it's Vue with batteries included.

xixixao 7y ago
I see a lot of untypeable code (in views). Doesn’t that slow you down whenever you want to make a change in an existing codebase?
- brailsafe 7y ago
  I feel like what actually gets output to the dom sees more of a benefit from sensible templating than from typability. Can't think of a time in untyped codebases where I thought that was important enough to slow me down. Perhaps it could help in typed codebases though.
- ratww 7y ago
  In another comment I linked to some tools that can typecheck views. It is also possible to use JSX. I've found out however that unit testing works fine for those cases.
RobertRoberts 7y ago
The Quasar site literally made me queasy with the full screen spinning. Can you summarize what it does? The site isn't clear, but it looks interesting.
- erokar 7y ago
  Quasar is a framework based on Vue that speeds up cross platform development. It lets you build for web, Andriod, iOS (using Cordova) and desktop (using Electron). It comes with a well-documented library of Material design components.
ergothus 7y ago
I've been a React dev and after a couple of years of being Vue-curious, I banged around with it a little for a work project. My reaction was the opposite of yours - I found the syntax to be some confusing "not really JS" that follows hard-to-discover rules and scoping. It felt very much like JSP - simple enough if you're just dropping in values, but as soon as something gets even slightly complex, it gets ugly quick. Error messages were also far less informative than React (to be fair, React has done a ton in the past couple of years to improve their error messaging). Example: In react, if I want a <ui> with a bunch of <li>s, I tend to output a JSX <ul> with a bunch of <li>s from some JS loop. A 1:1 relationship between the tags I produce and the tags that are generated. My loop logic is pure JS, so no surprises there. In Vue, the syntax is: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> Which seems perfectly readable, but...The "<li> tag doesn't represent what gets rendered, it's a TEMPLATE of what gets rendered. Can I reference "item" in another "v-" attribute of the <li>? What happens if I wanted to conditionally include/not-include an <li> for the list of items? A list shouldn't be where "complex" problems start. A list should still be "simple" My anecdote doesn't beat yours, (and, generally, your anecdote is the more common one), but I wanted to offer an opposing data point, because I expected Vue to be less involved than React, and I found the opposite to be true.
- ratww 7y ago
  Another way of rendering lists is like this: <ul id="example-1"> <template v-for="item in items"> <li>{{ item.message }}</li> </template> </ul>
  - ergothus 7y ago
    Interesting. I was taking the example straight from their docs: https://vuejs.org/v2/guide/list.html https://vuejs.org/v2/guide/list.html What you have here does fix the 1:1 issue, but introduces an extra layer of abstraction that still feels unnecessary/less straight-forward compared to the React version.
- ultrarunner 7y ago
  It's perfectly possible to refer to the `item` in the loop template: <li v-for="item in items" :title="item.hint"> {{ item.message }} </li> I really don't have a problem thinking of them as templates. In a sense that's all we can do anyway with dynamic lists— I don't know how React works but it seems disadvantageous to be forced to run the loop again rather than be able to do a diff & DOM insert/splice behind the scenes. My only real complaint is that the HTML attribute gets lost a little too easily. I could probably hack up some syntax highlighting augmentations to fix that, but it doesn't really bother me enough. For what it's worth, JSX is supported in Vue as well, although I've found it's not really my thing compared to Vue templates.
testnew2 7y ago
I understand that vue might be marginally better than react but what I enjoy is building things not learning frameworks. I really have no complaints with react. I think the most important thing is to use what you know and just get things donewhether that be vue or react.

xixixao 7y ago

I see a lot of untypeable code (in views). Doesn’t that slow you down whenever you want to make a change in an existing codebase?

brailsafe 7y ago
I feel like what actually gets output to the dom sees more of a benefit from sensible templating than from typability. Can't think of a time in untyped codebases where I thought that was important enough to slow me down. Perhaps it could help in typed codebases though.
ratww 7y ago
In another comment I linked to some tools that can typecheck views. It is also possible to use JSX. I've found out however that unit testing works fine for those cases.

RobertRoberts 7y ago

The Quasar site literally made me queasy with the full screen spinning. Can you summarize what it does? The site isn't clear, but it looks interesting.

erokar 7y ago
Quasar is a framework based on Vue that speeds up cross platform development. It lets you build for web, Andriod, iOS (using Cordova) and desktop (using Electron). It comes with a well-documented library of Material design components.

ergothus 7y ago

I've been a React dev and after a couple of years of being Vue-curious, I banged around with it a little for a work project. My reaction was the opposite of yours - I found the syntax to be some confusing "not really JS" that follows hard-to-discover rules and scoping. It felt very much like JSP - simple enough if you're just dropping in values, but as soon as something gets even slightly complex, it gets ugly quick. Error messages were also far less informative than React (to be fair, React has done a ton in the past couple of years to improve their error messaging). Example: In react, if I want a <ui> with a bunch of <li>s, I tend to output a JSX <ul> with a bunch of <li>s from some JS loop. A 1:1 relationship between the tags I produce and the tags that are generated. My loop logic is pure JS, so no surprises there. In Vue, the syntax is: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> Which seems perfectly readable, but...The "<li> tag doesn't represent what gets rendered, it's a TEMPLATE of what gets rendered. Can I reference "item" in another "v-" attribute of the <li>? What happens if I wanted to conditionally include/not-include an <li> for the list of items? A list shouldn't be where "complex" problems start. A list should still be "simple" My anecdote doesn't beat yours, (and, generally, your anecdote is the more common one), but I wanted to offer an opposing data point, because I expected Vue to be less involved than React, and I found the opposite to be true.

ratww 7y ago
Another way of rendering lists is like this: <ul id="example-1"> <template v-for="item in items"> <li>{{ item.message }}</li> </template> </ul>
- ergothus 7y ago
  Interesting. I was taking the example straight from their docs: https://vuejs.org/v2/guide/list.html https://vuejs.org/v2/guide/list.html What you have here does fix the 1:1 issue, but introduces an extra layer of abstraction that still feels unnecessary/less straight-forward compared to the React version.
ultrarunner 7y ago
It's perfectly possible to refer to the `item` in the loop template: <li v-for="item in items" :title="item.hint"> {{ item.message }} </li> I really don't have a problem thinking of them as templates. In a sense that's all we can do anyway with dynamic lists— I don't know how React works but it seems disadvantageous to be forced to run the loop again rather than be able to do a diff & DOM insert/splice behind the scenes. My only real complaint is that the HTML attribute gets lost a little too easily. I could probably hack up some syntax highlighting augmentations to fix that, but it doesn't really bother me enough. For what it's worth, JSX is supported in Vue as well, although I've found it's not really my thing compared to Vue templates.

testnew2 7y ago

I understand that vue might be marginally better than react but what I enjoy is building things not learning frameworks. I really have no complaints with react. I think the most important thing is to use what you know and just get things donewhether that be vue or react.