I get a lot of questions about what I think about Vue.
I won't comment too much on Vue in general because I'm not familar enough with it, but I'm very familiar with templating systems, and in articles praising Vue, the fact that it uses templating system instead of JSX is almost always cited as a reason to choose Vue. This drives me up the friggin' wall, because the negative side effects of templates are not communicated or discussed. JSX exists for good reasons. To me, JSX is a great simplification and clear improvement over templates.
Template languages are often sold on looking superficially good. I recently ran across yet another one of these articles citing the wonders of Vue, and especially templates. In this article, this JSX example is included:
render() {
let { items } = this.props
let children
if (items.length > 0) {
children = (
<ul>
{items.map(item =>
<li key={item.id}>{item.name}</li>)}
</ul>
)
} else {
children = <p>No items found.</p>
}
return (
<div className="list-container">
{children}
</div>
)
}
The article berates that JSX example for being verbose, and then goes on to cite this Vue example as a counter example:
<template>
<div class="list-container">
<ul v-if="items.length">
<li v-for="item in items">
{{item.name}}
</li>
</ul>
<p v-else>No items found.</p>
</div>
</template>
This is very disingenuous by the author, since the first example is written in a very verbose way. Written in a more concise manner, it would look like this:
let ListContainer = ({ items }) => {
<div className="list-container">
{items.length === 0
? <p>No items found</p>
: <ul>
{items.map(item =>
<li key={item.id}>{item.name}</li>
)}
</ul>
}
</div>
}
I'm not sure if the author of the article is being intentionally misleading, or if he picked the JSX code from some React tutorial online. I'm going to give him the benefit of the doubt and assume the latter. If so, the original JSX above was probably written in a verbose way in order to demonstrate how things work to the reader - when explaning programming tooling, you don't want terseness, you want to explain things in clear ways with as little magic as possible.
The Vue example, however, doesn't explain much about HOW the heck it actually WORKS. I know how Array.map works, but what is v-for and what is that syntax in the attribute? Yes, it's easy enough to understand WHAT this indivudual template does, because it reads a bit like English, but when you actually have to start writing and working with these templating languages, you development speed will slow down to a crawl, because you will now have to spend time learning (and often extending) the templating langauge. Yes, it's not a big language, but it's still a bloody language that I have to learn. In JSX, there is very little to learn, and I can then exploit my existing JavaScript knowledge and tooling.
For example, let's say that I want to filter out items that are inactive. JSX is just JavaScript, so I just filter:
let ListContainer = ({ items }) => {
<div className="list-container">
{items.length === 0
? <p>No items found</p>
: <ul>
{items
.filter(item => item.active) // <-- LINE ADDED
.map(item =>
<li key={item.id}>{item.name}</li>
)
}
</ul>
}
</div>
}
How to do this in the Vue template? I honestly have no idea. I wanted to provide an example here but 10 minutes of googling later I still cannot find how to do it. It might be possible to figure out somehow, but the point is that I already HAVE Array.filter! This knowlege problem exists JUST because we've invented an entire custom language to use here instead of just using JavaScript.
The entire PHP community learned this 10 years ago when most sane PHP programmers stopped using Smarty (http://www.smarty.net/) when they realized that PHP itself was excellent as a templating language.
JavaScript is no different here - it's perfectly good as your templating language, don't invent yet another niche language.
I've been working in Vue for two months, after doing React and React Native for a few months. Although I like Vue, I still prefer the style of React, a lot of the reasons you said are the reasons why. I don't want to learn a templating language that does a lot of things "magically" when I can just write javascript.
I do have to note that your filter example is a bit off, and is pretty simple to do in Vue, although not in the template language itself.
See here we're building a single-page Vue component, and describing a
computed
method, which automatically computesactiveItems
whenitems
change. I wanted to show this example since I think it further exemplifies why Vue and templating have downsides in that they add hidden complexity to gain short-term simplicity. How doescomputed
actually work? What constitutes a change initems
for it to recompute? Does adding an item? Editing an item? Most of the issues I've run into with Vue are issues that stem from not understanding how things work under the hood, and myself (or open source contributors) doing things that aren't simple in Vue, and the second you walk away from things with simple solutions, you get quickly into confusing territory.