I get sad every time I look at JSX because out of every possibility laid out before the entire JavaScript community, we somehow standardized on this clumsy mess.
Comments
Log in with your Bluesky account to leave a comment
Some people read the web platform through a JS function only and JSX will suit them more
Some people read the web platform through its foundational elements and believe in a progressive approach and will like more the Vue or Svelte approach in this regard.
I get this. But I don't think anything truly "cracked" it for me.
- Svelte's the closest, but the new @render and @snippet syntax is clunky
- Vue is good, but putting a v-for on the element you're looping (not the wrapper) always gets me. Also prefer {} to ""
I'm biased but I still like ember's syntax the best. I really want us to push content tags into the JS spec so frameworks can benefit from more cross-compatible tooling even with templating.
The problem is it would require making things special. `` isn't special. It is just a component. You don't need to use it. JSX itself has no idea of scoping like that. It's possible we should be using ternaries once the new TS proposals go through. Something like: https://github.com/microsoft/TypeScript/issues/60948
i feel like syntax is pretty personal opinion. because plenty of syntax can feel magical vs not magical vs too magical from person to person. I just like svelte because html, css, and js I learned quickly and could apply with svelte. but now with components as funcs is nice.
After trying out jetpack compose it feels like what jsx should have been. A little syntax sugar can go a long way. That being said I don't hate jsx, it's gotten a lot of good mileage
Comparing it to alternatives (vue, svelte templates) , how is jsx bad ? Especially using with typescript, others can't even come close with type safety for large projects.
The build tooling can be clumsy, but I think JSX was genuinely a huge improvement on the prior status quo. By a huge margin. And I’m not convinced any better has come along since
I mean, Svelte's syntax is way better for starters, even if we're only talking about interpolation and not even mentioning conditionals or loops. Vue, too.
JSX makes you nest three levels deep just to interpolate a dynamic value inside a string. It's so verbose and full of weird rules.
Eh, I couldn’t stand Svelte when I tried it. The template-first approach brings back PTSD flashbacks from terrible frameworks of the past with severe restrictions you only find after committing to the framework and writing a lot of code.
Why would you want to shoehorn markup into a verbose function return that's riddled with gotchas and workarounds instead of just working with something that looks like HTML?
To me, the HTML is what you're writing. You're only using JS for what you have to.
I'm sure it varies from people to people, but personally I feel a context switch when moving from templates to the actual js, I don't get that with jsx. I agree that jsx is more verbose though. I prefer reading Vue or svelte code, prefer writing jsx. Both have their flaws imo
It doesn't? There's literally nothing jsx can do that any other templating method can't.
Maybe you haven't liked your experience with other options, and that's fine, but to suggest an author has greater freedom or possibilities with jsx—or is limited without it—is not at all accurate.
The React community did. Are there others that uses it? Genuinely curious.
I've only done react for about a month in my whole career, and in my head React == JSX, and neither is fun. It would be interesting to see it outside of the context of React.
Astro uses it by default, I believe, though you can use something else with it if you want to. Solid uses jsx. Vite supports jsx (and tsx) by default. And of course the React community has a pretty heavy overlap with the entire community, and plenty of different flavors of React frameworks.
that’s not strictly true for astro — comments are normal HTML comments rather than {/**/} and you don’t need to self-close void elements, neither of which are valid in JSX
feels much more HTML-y to me even though it also uses curly-brace-delimited JS expressions for control flow
Well well, color me surprised! Didn't realize it reached that far! Will have to check that out. Astro always felt nice. Gonna have to dig into it. Thanks!
Comments
Some people read the web platform through a JS function only and JSX will suit them more
Some people read the web platform through its foundational elements and believe in a progressive approach and will like more the Vue or Svelte approach in this regard.
- Svelte's the closest, but the new @render and @snippet syntax is clunky
- Vue is good, but putting a v-for on the element you're looping (not the wrapper) always gets me. Also prefer {} to ""
SolidJS is onto something with
Comparing it to alternatives (vue, svelte templates) , how is jsx bad ? Especially using with typescript, others can't even come close with type safety for large projects.
JSX makes you nest three levels deep just to interpolate a dynamic value inside a string. It's so verbose and full of weird rules.
I need a JS-first, Turing complete framework
Why would you want to shoehorn markup into a verbose function return that's riddled with gotchas and workarounds instead of just working with something that looks like HTML?
To me, the HTML is what you're writing. You're only using JS for what you have to.
Maybe you haven't liked your experience with other options, and that's fine, but to suggest an author has greater freedom or possibilities with jsx—or is limited without it—is not at all accurate.
I've only done react for about a month in my whole career, and in my head React == JSX, and neither is fun. It would be interesting to see it outside of the context of React.
feels much more HTML-y to me even though it also uses curly-brace-delimited JS expressions for control flow