Thank you for your comment and for sharing your perspective. I respect your opinion, but I would like to clarify some points that you may have misunderstood. When I said that JSX makes things simpler than ever before, I was referring to the historical context of web development before frameworks like Svelte and Vue emerged. JSX was a game-changer that allowed us to write HTML-like markup directly in JavaScript and create reusable components with ease. I agree that for small projects, plain HTML may be sufficient, but for large and complex projects, JSX offers many advantages over HTML.
Furthermore, you mentioned that Svelte’s DX relies on the simplicity and its pragmatic approach to build boilerplate-free components. That is true, but it is not the whole story. Svelte also benefits from the features that JSX provides, such as autocompletion, syntax highlighting, type checking, etc. These features are essential for a good DX, and they are not exclusive to JSX. Svelte uses a custom syntax that is similar to JSX, but not exactly the same. JSX is not a new language, but an extension of JavaScript that can be easily understood by IDEs, browsers and runtimes. In fact, TypeScript, which is a superset of JavaScript, has native support for JSX as TSX. This means that many tools and software can work with JSX seamlessly. Svelte leverages these existing solutions to provide IDE features and autocompletion.
So, in conclusion, I am not saying that Svelte is bad or inferior to JSX. I am just saying that Svelte owes some of its success to JSX and that JSX is still a relevant and useful technology for web development. I hope this clarifies my point of view and I appreciate your feedback.
Thank you for your comment. I appreciate your feedback and your interest in Svelte and JSX. Some of the advantages of JSX over plain HTML that I mentioned in my blog post are:
JSX allows you to write HTML and JavaScript together, which makes it easier to create dynamic and interactive UI elements.
JSX is transpiled into plain JavaScript by tools like Babel or Webpack, which means it can run on any browser and benefit from the performance and optimization features of these tools.
JSX is not a template engine, but a syntax for creating virtual DOM elements, which means you have more control over the rendering process and can use components, hooks, and other React features.
As for the features that came with JSX, I did not claim that they are exclusive to JSX. I only said that Svelte also benefits from them, as it uses a similar syntax. These features are:
Autocompletion: This is a feature of the code editor or IDE that you use, which helps you write code faster and avoid errors by suggesting possible completions based on the context. Syntax highlighting: This is also a feature of the code editor or IDE that you use, which helps you read and understand code better by using different colors for different parts of the code, such as keywords, variables, strings, etc.
**Type checking: **This is a feature of TypeScript, which is a superset of JavaScript that adds optional static typing. This helps you catch errors and bugs at compile time by checking the types of the variables and expressions in your code.
And this all are not only with the help of JSX but also with many other existing solutions. You can learn more about it
Svelte Language Tools contains a library implementing the Language Server Protocol (LSP). LSP powers the VSCode extension, which is also hosted in this repository. Additionally, LSP is capable of powering plugins for numerous other IDEs.
A .svelte file would look something like this:
<script>letcount=1;// the `$:` means 're-run whenever these values change'
$: doubled=count*2;
$: quadrupled=doubled*2;functionhandleClick(){count+=1;}</script><buttonon:click="{handleClick}">Count: {count}</button><p>{count} * 2 = {doubled}</p><p>{doubled} * 2 = {quadrupled}</p>
Which is a mix of HTMLx and vanilla JavaScript (but with additional runtime behavior coming from the svelte…
I hope this clarifies some of the points that I made in my blog post. If you have any further questions or comments, please feel free to share them.
A real life funny example that you can use to illustrate the difference between JSX and plain HTML is:
Imagine that you want to make a sandwich. Plain HTML is like having pre-made slices of bread and cheese that you can only put together in one way. JSX is like having a toaster, a knife, a cheese grater, and some butter that you can use to make your sandwich however you like. You can toast the bread or not, cut it into different shapes, grate the cheese or slice it, spread some butter or not, etc. You have more freedom and flexibility with JSX than with plain HTML. Of course, this also means that you have to do more work and clean up more mess with JSX than with plain HTML. But hey, that’s the price of creativity!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I disagree, your IDE just knows what you are doing inside a JSX file. Browsers and IDEs know what HTML is.
Just the HTML code is lot cleaner than JSX. Svelte does it the right way.
Where? Svelte's DX lies on the simplicity and its pragmatic aproach to build boilerplate-free components.
Thank you for your comment and for sharing your perspective. I respect your opinion, but I would like to clarify some points that you may have misunderstood. When I said that JSX makes things simpler than ever before, I was referring to the historical context of web development before frameworks like Svelte and Vue emerged. JSX was a game-changer that allowed us to write HTML-like markup directly in JavaScript and create reusable components with ease. I agree that for small projects, plain HTML may be sufficient, but for large and complex projects, JSX offers many advantages over HTML.
Furthermore, you mentioned that Svelte’s DX relies on the simplicity and its pragmatic approach to build boilerplate-free components. That is true, but it is not the whole story. Svelte also benefits from the features that JSX provides, such as autocompletion, syntax highlighting, type checking, etc. These features are essential for a good DX, and they are not exclusive to JSX. Svelte uses a custom syntax that is similar to JSX, but not exactly the same. JSX is not a new language, but an extension of JavaScript that can be easily understood by IDEs, browsers and runtimes. In fact, TypeScript, which is a superset of JavaScript, has native support for JSX as TSX. This means that many tools and software can work with JSX seamlessly. Svelte leverages these existing solutions to provide IDE features and autocompletion.
So, in conclusion, I am not saying that Svelte is bad or inferior to JSX. I am just saying that Svelte owes some of its success to JSX and that JSX is still a relevant and useful technology for web development. I hope this clarifies my point of view and I appreciate your feedback.
What are those advantages over HTML?
So you claim these are the features that came with JSX? 🤷🏽♂️
Thank you for your comment. I appreciate your feedback and your interest in Svelte and JSX. Some of the advantages of JSX over plain HTML that I mentioned in my blog post are:
As for the features that came with JSX, I did not claim that they are exclusive to JSX. I only said that Svelte also benefits from them, as it uses a similar syntax. These features are:
Autocompletion: This is a feature of the code editor or IDE that you use, which helps you write code faster and avoid errors by suggesting possible completions based on the context.
Syntax highlighting: This is also a feature of the code editor or IDE that you use, which helps you read and understand code better by using different colors for different parts of the code, such as keywords, variables, strings, etc.
**Type checking: **This is a feature of TypeScript, which is a superset of JavaScript that adds optional static typing. This helps you catch errors and bugs at compile time by checking the types of the variables and expressions in your code.
And this all are not only with the help of JSX but also with many other existing solutions. You can learn more about it
The Svelte Language Server, and official extensions which use it
IDE docs and troubleshooting
What is Svelte Language Tools?
Svelte Language Tools contains a library implementing the Language Server Protocol (LSP). LSP powers the VSCode extension, which is also hosted in this repository. Additionally, LSP is capable of powering plugins for numerous other IDEs.
A
.sveltefile would look something like this:Which is a mix of HTMLx and vanilla JavaScript (but with additional runtime behavior coming from the svelte…
I hope this clarifies some of the points that I made in my blog post. If you have any further questions or comments, please feel free to share them.
A real life funny example that you can use to illustrate the difference between JSX and plain HTML is:
Imagine that you want to make a sandwich. Plain HTML is like having pre-made slices of bread and cheese that you can only put together in one way. JSX is like having a toaster, a knife, a cheese grater, and some butter that you can use to make your sandwich however you like. You can toast the bread or not, cut it into different shapes, grate the cheese or slice it, spread some butter or not, etc. You have more freedom and flexibility with JSX than with plain HTML. Of course, this also means that you have to do more work and clean up more mess with JSX than with plain HTML. But hey, that’s the price of creativity!