Hacker News Reader

Comment by mcv | Hacker News Reader

Vue templates are not in any way more of a totally new language than JSX is. Vue templates are simply XHTML snippets with added data bindings. JSX is not quite XHTML (you have to use className instead of class) with added data bindings.

I find Vue templates slightly cleaner for that reason, but the difference isn't big. How they're used is different, though: React wants everything, including the XHTML, to be javascript. Vue puts it all in HTML, with script tags for the javascript.

View on HN

If I have this:

  <div v-for="item in items">
    <span>...</span>
  </div>

The refactoring tools must know that the "items" inside the "v-for" refers to a property of the data object. In other words, the content of the data bindings is a totally new language by itself (the content of v-for has its own syntax, with a parser).

Compared to the equivalent in React, which would be:

  {this.items.map(i => (
    <span>...</span>
  )}

Or possibly

  let elements = [];
  for (item in this.items) {
    elements = <span>...</span>
  }

It's way easier for a refactoring tool to support JSX since it's just syntactic sugar over JS. If you were the developer of such a tool, you would just need to consider "<>" as values and possibly consider anything inside "{}" as normal Javascript.

And indeed, as pointed by another commenter, React supports classes and integrates very well with Typescript since React 16.

JSX is a dsl, like typescript or flow, it doesn’t change or affect your code, all assumptions stand, it doesn’t break scope. Vue templates are not a dsl, they break all assumptions and your scope. There is no difference between Vue and angular in that regard, both could not do this with templates:

    const A = () => <div />
    const B = () => <A />

JSX turns that into:

    const A = () => createElement('div')
    const B = () => createElement(A)

That is all that JSX does. Vue on the otherhand parses its own language, breaks scope, separates concerns that shouldn’t be separated and in the end joins them via dependency injection again. We’ve been through this years before Vue existed with angular and others.

BTW, your info is outdated. "class" is allowed in React as of V16.

Reply on news.ycombinator.com