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.
To me looking at JSX is like, and I am taking the words from another dev, prying my eyes out with a spoon. I also know he and I are not alone in this subjective view of React and JSX. Granted, I come from a history of looking at a lot of PHP in my day and using templating systems. So, I am biased. My eyes have this methodology burnt into them. 😄
MPJ, you are right about PHP and it being a template system in and of itself. However, once you give people the ability to do more than they should, they will. Not because they want to, but because they simply don't know better. Calling a database in HTML is seriously bad PHP programming and I've seen people write PHP programs like that and I still run into questions with example code that gives me chills down my spine.
Going out a bit of a tangent, but humor me, what is one of the biggest reasons why Twitter is so successful? It's the fact that Twitter is constraining. And, as in texting, constraints in programming are actually good too, because they form boundaries. They don't allow the kitchen sink in places where it really shouldn't be. That is what Vue offers too.
In fact, Vue got even more constraining in terms of its "templating syntax" (which really isn't hard to learn for anyone) from version 1 to 2, because I believe Evan understands about constraints and about the separation of concerns between HTML for component structure and JavaScript for component behavior. This much clearer and cleaner separation also means people less experienced in JavaScript, can still manipulate component structure without seriously or irreparably breaking things. It also helps them to reason about the JavaScript code. This elegance, this constraint and separation of concerns in turn means Vue is much more open to beginners of front end programming and that means, its popularity will be greater than React's at some point. That is my own personal prediction of course.
Vue may not be more popular in the purely professional world right now, but it surely is within the hobbyist and PHP world. And these hobbyist are working with a pragmatic tool, which they can grow with to become professionals and build professional things with too. (because Vue can also do JSX). But, the good thing is, they'll learn to do it all properly from the start, because of Vue's constraints. JSX allows beginners to do many wrong things first, if they even get into it at all.
Oh, and there are a ton of professional programmers, who also think Vue is great and are building incredible things with it (like Quasar Framework or Weex).
So, looking at Vue from that tangent, if you are working on something where you want a much bigger base of users (professionals AND hobbyists), you'd have to admit Vue is the better choice and because of the template like system direction Evan imposed on it and its users. It is more pragmatic and elegant (in my eyes) and why I'm a real fan of Vue! 😄
Scott