Hacker News new | past | comments | ask | show | jobs | submit login

> 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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: