6 ms·
I think my favorite thing about JSX specifically - is that the {} breakouts used in it, get all the same treatment from the JS/TS compiler as your Javascript/Ty
by coding123 6y ago
I think my favorite thing about JSX specifically - is that the {} breakouts used in it, get all the same treatment from the JS/TS compiler as your Javascript/Typescript does. And all without changing HTML into a JSON or Yaml representation. It just works in VSCode. The number of years of HTML being an relative of the SGML/XML family (pedants calm here, you know what I mean) shouldn't be thrown away just because it's not immediately available in JS.
I think one thing I would love to see from JSX is for it to start growing outside of the React world. Vue seems to be trying. Until React came along, we really had no compile time checking on templating languages at all. I think the reason for that, is, in part, because the templating aspect was always thought of as "dirty" that you shouldn't mix JS and the view parts. I think React debunked that notion. I've never been as productive in creating UIs as I have when I'm working in React. And a lot of that is because I call my backend, I get a typed object back, I tell the UI to use <div>{response.medication.firstName}</div> and if we ever change the structure of medication? I get full help from the compiler that that view will no longer work... If you haven't used React you might not get the full power of that.
Even if I am a React fan, it doesn't mean I don't think other frameworks won't ever take over, but I think at this point, the one that may eventually eclipse React is probably going to have native JSX support.
- fragmede 6y agoYeah, agreed. React and JSX really shines with a good component library, and the key word with react is composable. I don't know that, by itself, better syntax for HTML-in-JS would advance the state of the art. Instead of having divs and spans everywhere, they're an implementation detail of components. I can change <leftPanel> <userInfo> </leftPanel> <rightPanel> <medicationsPanel> </rightPanel> to <topBar> <userInfo> </topBar> <leftPanel> <medicationsPanel> </leftPanel> Without having to know what html+css tricks topBar is doing under the hood. Inside of medicationsPanel, there's <medicationsList> which is the `ul`. <ul> {medications.map(m => { <medicationListItem item=m /> })} </ul> medicationListItem has the `<li>`, with the styling living somewhere inside. Templates, especially in separate files, don't really manage to be composable with the same ease. Leaving the divs and spans and CSS to the lowest levels of the component library does wonders for making the code easier to reason about, and maintain. React code from a few years ago still has some warts, but it's still way less painful to try and pick up than code that was written with traditional templating. (Specifically, the templated project was using `.erb` files.) React threw out MVC and templates (though some say it's just the V instead), and is worth learning just to feel like it's possible to implement UIs cleanly.
- thayne 6y agoWebcomponents should help with this. Although the current API is not as pleasant to use as react.
- dmitriid 6y agoThey can't and they won't. Because they rely on DOM APIs to do anything useful. Which brings us back to the article.
- thayne 6y agoWhat does that have to do with having composable components?
- dmitriid 6y agoEverything. The only way the vanilla webcomponents are "composable" is through tons of boilerplate code using DOM APIs. You can't even re-create the example with list elements without tearing your hair out when using webcomponents. It's so bad that any examples showing "composability" immediately give up and use .innerHtml everywhere, and even then it's pretty bad. It's so bad, in fact, that people do anything to avoid writing vanilla and use lit-html (yay, programming with strings), Stencil, or even Preact (AMP switched to Preact to author components).
- JMTQp8lwXL 6y agoStencil uses JSX.
- thayne 6y agoWhat I would love to see is something like jsx supported directly by the browser. Although, I'm not sure what that would do in non-browser EcmaScript environments. Perhaps something like lit-html's html string tag is more likely to be standardized.
- coding123 6y agoI was going to bring up Polymer's lit-element / html`` syntax but decided it was a dead horse - but in any case, hopefully that isn't the way things go. Even though the breakouts ${} are JS and the compiler can help with those, it doesn't do much for repetition. I really think that's one area that angularjs -> angular X really struggled was templates that repeat things... React pulled that off so f...ing fabulously. It's just a map that emits more elements!
- spankalee 6y agoThat's exactly what lit-html does: html` <ul> ${items.map((i) => html`<li>${i}</li>`)} </ul> ` ...so I don't understand the critique.