Svelte: Why not JSX?

[Rich-Harris]

I really need to write this blog post, because I'm bored of answering this question

[karanganesan]

What !!! Is this even a question ??? 🙈🙈🙈

[karanganesan]

@developit would like to share some thoughts about this question ? 😅😊

[vedam]

directly followed by

• [ ] why not mobx, hooks, router or what-not
• [ ] why not css-in-js
• [ ] why no typescript, devtools-support
• [ ] why not fill-in-what-you're-used-to

[karanganesan]

• [ ] why not coffescript

because the code get even more smaller with CS removing let and even the semicolon 🎉

<script>
    name = 'world'
</script>
<h1>Hello {name}!</h1>

so that even Hello World program can get smaller 🌠

[karanganesan]

New blog post name : Why not X?

@Rich-Harris it's better this way so that it answers all questions 🖖

[kazzkiq]

On a developer experience level, I have three reasons of why not JSX (not limited to Svelte):

1. Because JSX is ugly (compare a React component with a Svelte or Vue equivalent);
2. JSX is verborragic (too much code written for simple things);
3. JSX messes (breaks) both HTML and JavaScript languages¹.

¹: While Svelte, Vue and Angular also make modifications on HTML, those have much clearer purposes focusing on dev productivity and experience (e.g. event handling, bindings, loops, etc). In React, it feels like the modifications are purely to quickfix limitations or messed architecture from the core: className and dangerouslySetInnerHTML attributes, forced self-closing tags and the need for a wrapper element for every component are some examples that come to mind.

React has lots of merits, but it looks like it got stuck with it's own "bad" decisions from the past (which were not bad back in the day) and can't get out of them without risking a community backslash.

[PaulMaly]

1. Because imperative language (JavaScript) can’t be conveniently applied to declarative language (HTML).
2. Because the main part of DSL term is “domain specific” which should mean “the most convenient way to use”.

[akaufmann]

@Rich-Harris
It's sad, but you can't win this fight. I think, maybe a blog post on why HTMLx is great - without mentioning JSX and why it's better than (JS)X - can achieve more? What do you think?

@vedam

why no typescript, devtools-support

No, this blog post should be: Why Typescript and good DevTools support is a high priority for us and you can expect it soon. 😉

PS: Thanks Rich, Svelte v3 brings fun back to development. Write Less Code, Get More Done 💯

[PaulMaly]

Btw, about TS, you can try this: svelte-ts-preprocess. Example of usage included in monorepo.

[constgen]

@kazzkiq, you may be wrong with point 3. JSX has no HTML at all. It completely consist of JS functions but with XML syntax in some places. It still stays JavaScript.
As soon as have changed my view on it, everything became clear - it is functional declarative programming.

[kazzkiq]

@constgen Agreed. It isn't HTML. But it mimicks it, and let devs write it inside .js files, along with JavaScript code. Pretty messy huh? So I still hold my point (it messes both languages and may confuse newcomers and junior devs).

[constgen]

@kazzkiq what you said is correct. By and large React code is not human friendly.

[ryansolid]

I'd like to see this article. It isn't actually that clear to me. Just because it's JSX doesn't mean it needs to be used like React. Control flow like conditionals and each loops feels like the only place where the syntax is not as well defined, but nothing says you have to use JavaScript there. I only have to point you as far React Loops to see alternatives in React itself. Stuff like dangerouslySetInnerHTML and className are all React-ism and are in no way necessary. It takes very little imagination to think of how Svelte could use JSX better.

What does JSX do that is positive? Explicit context. No virtual global variable state. Declarations of data used in the template follow how you declare them. More so since they are just functions, partitioning of views can be achieved easily reduce repetition in templates without resorting to making components out it which have overhead. Sometimes for mental sanity (and to write less code) composition at a smaller scale makes a lot of sense.

I think the messy argument is garbage. Svelte puts everything in the same file for similar reasons I imagine. You just want to come in and just write something without building a whole project skeleton. Why would anyone assume a new Dev's first go to is where is my separated HTML, CSS, and JS? In any other programming language or environment they would have just started with main.java etc.. If they haven't touched the Web before handing them a single file entry point is more straightforward. I think it's a terrible trend, but there is a reason there many new "React" developers that haven't even learned JavaScript or Web fundamentals. It's because it's beneficial financially and easy enough.

[pngwn]

I don't know if Rich meant for this to become a discussion issue but I just thought I'd say: Svelte could never use JSX, it fundamentally wouldn't work because JSX is just sugar over render functions. This wouldn't work for Svelte.

When Rich does get around to writing this article, I think we'll see the main reason Svelte doesn't use JSX is technical.

[Conduitry]

Hey chill out everyone. Rich being bored of answering this question does not mean let's have a bunch of opinions about something that is already settled.