5 ms·
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="...">Li
by mediumdeviation 9y ago
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>
- steinuil 9y agoGood 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.
- jaequery 9y agoi 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.
- mediumdeviation 9y agoIt'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.
- hunterxg 9y agoYour 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...
- arvinsim 9y agoIf you want whitespace, the proper thing to do is to use HTML entity.
- scarlac 9y agoI 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.
- dmitriid 9y agoIt'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.
- innocenat 9y agoWhen 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.
- scottmf 9y agoWhat'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.
- deleted 9y ago[deleted]
- dmitriid 9y ago...and property names are Javascript property names. Because, well, JSX is a very thin layer on top of Javascript