Vue.js vs. React

Re:Vue.js vs. React by mediumdeviation on Saturday August 19, 2017 @10:46AM (#15053650)

JSX is closer to JS than HTML, which means it annoying to write in some cases. Quick, what does this render as?

  <a href="...">Link 1</a> |
  <a href="...">Link 2</a> | 
  <a href="...">Link 3</a>

It's not

  Link 1 | Link 2 | Link 3

as you'd expect - instead, the whitespace after the pipe character is eaten by JSX. This is because HTML is whitespace sensitive, but JS is not, and so to allow indentation, JSX trims whitespace.

Here's another -

  <dl>
    { Object.entries(definitions).map(([term, definition]) => (
       <dt>{ term }</dt>
       <dd>{ definition }</dd>
    )}
  </dl>

This does not work - instead, you need to return an array, but the result is ugly - the commas are part of JS, not HTML, and don't appear in the output, but reading this quickly it's hard to see that (the difference is the braces surrounding the block).

  <dl>
    { Object.entries(definitions).map(([term, definition]) => ([
       <dt>{ term }</dt>,
       <dd>{ definition }</dd>,
    ])}
  </dl>

Vue's 'weird DSL' is HTML (the same is not quite true for Angular's). What you see is exactly what you get. Having a DSL also means you can define your own syntax. Things that are verbose (due to historical reasons in JS), such as iterating over an object, can be made simple -

  <dl>
    <template v-for="(definition, term) in definitions">
      <dt>{{ term }}</dt>
      <dd>{{ definition }}</dd>
    </template>
  </dl>

[ Parent | on HN ]

Re:Vue.js vs. React by scarlac on Saturday August 19, 2017 @11:12AM (#15053823)

I disagree on your first example: I've historically found the extra whitespace a huge PITA for years. It causes extra "unpredictable" spacing in your design which is usually unwanted. It's only an issue for multi-line prose. React is opinionated here but I've found it's the most useful option.

On the 2nd point, you are partially correct. In general it's a code smell - strongly consider making it a component (in part for optimization). But definition lists are specifically strange: Unlike other repeating elements in HTML they don't have a container element like tr, li, fieldset, etc.

[ Parent | on HN ]

Re:Vue.js vs. React by dmitriid on Saturday August 19, 2017 @11:53AM (#15054036)

It's funny you bash JSX, which is a very thin XML-like DSL on top of JS, and then turn around and claim that Vue's DSL is HTML

   <button v-bind:disabled="isButtonDisabled">Button</button>
   <div v-bind:id="'list-' + id"></div>
   <form v-on:submit.prevent="onSubmit"></form>
   <a @click="doSomething"></a>

Something tells me JSX is the better DSL.

[ Parent | on HN ]

Re:Vue.js vs. React by innocenat on Saturday August 19, 2017 @12:15PM (#15054149)

When you make it so that (which is how everyone is writing Vue anyway)

   <button :disabled="isButtonDisabled">Button</button>
   <div :id="'list-' + id"></div>
   <form @submit.prevent="onSubmit"></form>
   <a @click="doSomething"></a>

It gets really, really clear that anything not in {{ }}, or attribute not prefixed by @ or : is HTML.

[ Parent | on HN ]

Re:Vue.js vs. React by scottmf on Saturday August 19, 2017 @06:57PM (#15056093)

What's the difference between :disabled and the regular HTML disabled? Same for ID, etc. How do strings differ from variable names?

The only way I see that as being more "intuitive" is if you're familiar with other templating languages.

JSX is far clearer:

  <button disabled={isButtonDisabled}>Button</button>
  <form onSubmit={handleSubmit}></form>
  <a onClick={doSomething}></a>

All you really need to know is everything between braces is plain JavaScript, and property names are camelCased.

[ Parent | on HN ]

Re:Vue.js vs. React by dmitriid on Sunday August 20, 2017 @06:21AM (#15057800)

...and property names are Javascript property names. Because, well, JSX is a very thin layer on top of Javascript

[ Parent | on HN ]

Re:Vue.js vs. React by steinuil on Saturday August 19, 2017 @10:56AM (#15053716)

Good point about the whitespace, but I'd still rather have the templates inside my code than separate the two, mentally parsing two separate languages with different syntax and stitching them together is a lot more mental overhead IMO.

[ Parent | on HN ]

Re:Vue.js vs. React by mediumdeviation on Saturday August 19, 2017 @11:02AM (#15053757)

It's a matter of personal opinion, but I guess I'm more used to server-side templating languages, which Vue's looks much more similar to. I have the same problem as you for JSX - I keep trying to read it as HTML, except it's not, and mentally translating it is annoying.

[ Parent | on HN ]

Re:Vue.js vs. React by jaequery on Saturday August 19, 2017 @11:02AM (#15053754)

i assure you, you will get over that phase real quickly. you will come to appreciate how nicer it is to write your code this way. because the same thing happened to me.

[ Parent | on HN ]

Re:Vue.js vs. React by hunterxg on Sunday August 20, 2017 @02:35PM (#15059632)

Your not mentally parsing two languages. Your parsing business logic in js and templating in regular html.

You still have to understand html inside weird jsx code...

[ Parent | on HN ]

Re:Vue.js vs. React by arvinsim on Saturday August 19, 2017 @11:03AM (#15053762)

If you want whitespace, the proper thing to do is to use   HTML entity.

[ Parent | on HN ]

Re:Vue.js vs. React by dwb on Saturday August 19, 2017 @04:52PM (#15055530)

  {' '}

Not the prettiest, but doesn't come up often in my experience.

[ Parent | on HN ]

Re:Vue.js vs. React by maaaats on Saturday August 19, 2017 @01:03PM (#15054384)

No, that has other implications.

[ Parent | on HN ]