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.
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.
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).
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.
There is an easy test to see if my statement was true or false:
<tag attr="x">
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
Compare to React's JSX:
<tag attr="x"> // x is a string
<tag attr={{ x }}> // x is a valid Javascript expression
<tag onClick={{ function_ref }}>
<tag onClick={{ () => regular_JS_arrow_function() }}>
onClick expects a function reference because that's
what it will eventually call
{
data: function () {
return {
open: false
}
}
}
{
methods: {
toggle: function () {
this.open = !this.open
}
}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.
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.
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."
Vue’s v-* attributes are a stringy mess [1], and it doesn’t really matter that they don’t end up in the output.
I started in 97 as well, and cannot recommend Vue enough. I've done React, Angular 1 & 2, and I keep coming back to Vue.
I always feel like with React/Angular I'm conforming to work how they want me to work. (Esp. Angular - React is more forgiving). Whereas Vue is just a complement to the way I already work. I can use as much or as little of it as I wish.
A hearty endorsement indeed.
This is why I like angular quite a bit, it’s not whatever the dev decided to do. It doesn’t include a whole bunch of small libraries of questionable support.
The usual <div :something='stuff + "here"'/> way of writing it errs on the side of HTML over JS, using quote marks awkwardly to enclose a statement rather than JSX's more sensible curly brackets. It makes it harder to visually parse, and it's sometimes annoying to not be able to use one type of quote marks unescaped within the statement.
Overall, this is one of many ways in which Vue (like Angular) seems like HTML with functionality tacked on, as opposed to React, which is closer to idiomatic JS. I've used both extensively and I don't think I can recommend Vue over React anymore -- unless you're, say, prototyping and looking to build an app entirely on the client, with no build step, where Vue really shines. Or unless you're doing something HTML-centric, like converting a static site.
Vue relies too much on overloading the string type for my taste (fundamentally, all JS libs do this to some extent). Too much magic happens with these string-based v-bindings.
Irrespective of that, these days I am hard pressed to not use typed JS in some form or fashion anyways.
There are some benefits from just embracing JavaScript though, especially, as you mention, integration with things like TypeScript.
What do you mean by "anyways"? I use TypeScript with Vue and it's great.
Mutiny.
I have a feeling after Vue 3 hits and in a couple years JSX will be the defacto way to work with Vue.
The "I wouldn't use Vue except for a small project" meme really needs to die too. Vue's build process is mature, has server-side rendering, and is used by some of the biggest companies in the world. If it's good enough for them at scale, it's good enough for the rest of us.
I'm still waiting for the 2019 equivalent of http://haml.info/
Here's a Pug -> JSX transformation: https://github.com/pugjs/babel-plugin-transform-react-pug
Detouring from the most popular path tends to come at the price of tooling idiosyncrasies that are rarely worth it, but it seems to at least work with eslint-react and has syntax highlighting in some editors.
Some examples here: https://reagent-project.github.io/
It's not haml, but I'd argue it's awesome.
Sounds like you should be making more use of computed properties and component methods.
Naturally, even though you can disregard the templating and resort to idiomatic JS, like one in React, you managed to develop an opinion after not using the features you like.
This just makes no sense honestly. I'm all for people having opinion to the point where you can blatantly say "I hate Vue because I like React more", there's literally no need for justification.
But spewing nonsense just to justify your preference is just bad. Are you a junior dev by any chance?
I've used both extensively and I can recommend Vue over React because React is a pile of mental manure. I never understood React hype, but then again - IT is a fashion business, and when "leaders" invent crap - flies tend to follow.
That's exactly what it's like. Working with Vue doesn't even feel like you're using a JavaScript framework. You just write your HTML, your CSS, your scripts/data and you're done. Vue is brilliant.
The community around it is also extremely helpful.
React sort of used to have this problem, too, when you had to rely on classes for state, but the hooks era is a breath of fresh air. Everything is just a function. It feels freeing.
I think if you're at the point where "passing data around in props is a nightmare" that's the pain point that VueX is meant to resolve, and it should feed into the solution. But following the principle of "components should manage their state without VueX if it's easy/convenient for them to do so" is a good way to avoid the global state becoming too unwieldy.
Of all the frameworks I've used, it's brilliant because it hardly takes any thinking away from the business logic, so I'm not bogged down, it stays OUT of my way, and it's rock solid.
I HIGHLY recommend it, and this is from someone doing web since 1997.