Comment by nek4life | Hacker News Reader

Comment by nek4life | Hacker News Reader

Parent Full thread

> I go a bit in depth here: https://news.ycombinator.com/item?id=17471199

I've read this before. Vue is a framework. It also has a templating system that is not JavaScript, it's valid HTML with attributes that tell Vue how to bind to it. It's really not that difficult.

> Vue's templates are not HTML-compliant. They are just that: templates. That get compiled to JS anyway.

Sorry, but you're wrong here. They are valid HTML.

https://vuejs.org/v2/guide/syntax.html

"Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers."

> JSX is a very thin DSL on top of Javascript. It's just function calls: https://reactjs.org/docs/react-without-jsx.html

IMHO only the simplest of components featuring JSX that don't read like a spaghetti PHP coding nightmare to me. For the small number of times you actually need the full power of JavaScript you could also use JSX in Vue with a render function if necessary. I personally prefer to keep my templates and logic separate when possible.

> It's not a webpack add-on. It's a part of Vue's templating engine that is essentially CSS-in-JS, they just give you a template to work in.

No, it's not part of the template engine, it's part of vue-loader which is used by Webpack to create single file components.

https://github.com/vuejs/vue-loader

> it's valid HTML with attributes that tell Vue how to bind to it. It's really not that difficult.

You mean it has at least three JS-like DSLs (which are not JS, and have different rules depending on which context they are in). In addition it has a very weird binding system which I described at length in the linked comment.

Yup. "Not that difficult".

Meanwhile JSX is a single consistent DSL that directly maps to function calls:

   <Tag prop=(string or valid Javascript expression)>
      other tags, strings, or valid Javascript expressions
   </Tag>

That's it. Even "html-like" attributes that people seem to not like... are exactly what HTML attributes are in actual Javascript DOM APIs [1] [2]

The amount of custom attributes, custom DSLs and gotchas just in the "HTML" part of Vue is staggering in comparison: https://pbs.twimg.com/media/DbVEoKOX0AEEen6?format=jpg&name=...

And funnily enough it ends up being compiled to what React is in the first place (here's the output of a Hello World app in Vue):

    var render = function() {
      var _vm = this
      var _h = _vm.$createElement
      var _c = _vm._self._c || _h
      return _c(
        "div",
        { attrs: { id: "app" } },
        [
          _c("img", {
            attrs: { alt: "Vue logo", src: require("./assets/logo.png") }
          }),
          _c("HelloWorld", { attrs: { msg: "Welcome to Your Vue.js App" } })
        ],
        1
      )
    }

Look, it's exactly what React without JSX is [3]. Only in React you don't need to invent a custom scripting language and binding rules.

[1] https://developer.mozilla.org/en-US/docs/Web/API/Element/att...

[2] And I'm really sad to see React team seriously discuss caving in to mob and considering replacing className with class etc.

[3] https://reactjs.org/docs/react-without-jsx.html

> That's it. Even "html-like" attributes that people seem to not like... are exactly what HTML attributes are in actual Javascript DOM APIs [1] [2]

The attributes / DOM properties in JSX are also a mixed bag and not consistent. See https://github.com/facebook/react/issues/13525#issuecomment-...

> Look, it's exactly what React without JSX is [3]. Only in React you don't need to invent a custom scripting language and binding rules.

JSX is a custom extension to JavaScript. It's not part of JavaScript or intended to be part of the spec or implemented in browsers. In fact, you have to use some sort of transpiler in order to use it. So, it's not just JavaScript.

> https://pbs.twimg.com/media/DbVEoKOX0AEEen6?format=jpg&name=....

There's really nothing that complicated in here, if you're familiar with Vue. In fact, it's really easy for me to see what's going on at a glance in one place, which is my personal preference. From my own experience, that's rarely the case when working with React the way JSX tends to get broken up because it doesn't have something as simple as a standard if conditional statement within JSX itself.

I've never claimed you do not need to learn anything when working with Vue templates, you need to understand how the system works, but it took me all of a few hours to understand. The features and benefits that I prefer over React/JSX make that worth it to me.

> JSX is a custom extension to JavaScript. > In fact, you have to use some sort of transpiler in order to use it. So, it's not just JavaScript.

Yes. However, one thing you fail to see is that it directly compiles to function calls.

   <Tag a="b" x={y+z}>{valid JS expression}</Tag>

is

   React.createElement(Tag, { a: "b", x: y + z }, [<valid JS expression>])

Which means:

- you have access to JS variable in scope

- you can use JS facilities (proper if/switch statements, for loops, functional programming, you name it)

- you need no additional scripting or templating features. It's, well, just Javascript.

However in Vue (emphasis mine):

> There's really nothing that complicated in here, if you're familiar with Vue.

Yes. Exactly. If you're familiar with Vue

So:

- custom tag attributes: v-bind, v-if, v-for, v-on, v-show, v-model... (I honestly don't know how long this list is)

- custom attribute shorthands: :key, @key

- attribute extensions: v-on:keypress.prevent

Inside attributes you can have:

- Javascript expressions (much like React inside {})

- or magic binding:

    v-bind:href="url", v-if="seen" etc.

- or JS-object-like magic bindings which resolve to a string:

    v-bind:class="{ active: isActive, 'text-danger': hasError }"

- or JS-array-like magic binding that gets resolved to a string:

    v-bind:class="[activeClass, errorClass]"

- or a magic array with objects that gets resolved to a string:

    v-bind:class="[{ active: isActive }, errorClass]"

- or a separate DSL for v-for:

    v-for="(item, index) in items"

- or a separate DSL for v-for where you can bind entities from the DSL (which looks exactly like the magic binding to data from the component, what happens when they clash?):

    v-for="(item, index) in items" :key="items.id"

- or JS expressions that may be function references that may be things that look like function calls but actually aren't:

    v-on:click="counter += 1"

    v-on:click="greet"

    v-on:click="say('what')"

- with special magic variables

    v-on:click="warn('Form cannot be submitted yet.', $event)"

- with special magic modifiers

    v-on:click.stop.prevent="doThat"

"It's not that difficult" ©™ And the list above doesn't include the overview of the JS code that underlies components in view. It's another whirlwind of magic and non-magic: https://news.ycombinator.com/item?id=17471199

Oh yes, and this gets compiled down to some JS that bears little to no resemblance to original code.

And somehow people complain about how React is difficult. Wat?

> Yes. However, one thing you fail to see is that it directly compiles to function calls.

I understand how JSX works, stop patronizing me. The only thing I fail at is seeing how any of your examples are complicated or have magic so deep that you need to continue to burn Vue at the stake for. In fact, I find your Vue template examples completely intuitive and easy understand with minimal time invested in learning how Vue templates work. It's my preference to spend a little bit of effort up front learning how Vue templates work in order to have clearer separation between business logic and templates.

Reply on news.ycombinator.com