I decided to write this article to talk about some things I learned about Svelte after trying it for the first time.
If you don’t know what Svelte...
For further actions, you may consider blocking this person and/or reporting abuse
I believe this conference talk from the creator of Svelte himself will answer your questions.
Unlike the frameworks that use virtual DOMs, Svelte compiles your code into the actual bare-bones JavaScript API for manipulating the DOM. It literally compiles to the raw
document.getElementByIdinstead of a bunch of abstractions that ultimately take a toll on performance.Svelte is pretty much compiled down to setting element.innerText = “new value” directly, instead of doing it through a VDOM. In the Svelte REPL, check out the compiled output - it’s pretty readable! - and look for the code that looks like your own update code (e.g. if you write “name = whatever” somewhere, that’ll be in the output somewhere, along with the actual DOM update code)
Thanks for this comment Dave! A few hours ago I saw the video that @somedood shared above in the comments and in that video Rich Harris shows exactly what you are saying (the output in the REPL).
The output is super clean and easy to read compared to the code generated by frameworks like Angular.
I feel like Stencil JS or Solid JS do these things too, but without such a different syntax
To be honest, I didn't have time yet to take a look at those frameworks.
I think the great difference between stencil and svelte is that is Svelte is not Web Component-based.
Is that an advantage or disadvantage that it's not component based?
From my point of view, it's an advantage. @Rich Harris made an amazing post here on DEV talking about why he is not using web components.
Why I don't use web components
Rich Harris ・ Jun 20 ・ 7 min read
There's an important distinction between developing in web components and compiling to web components, like Stencil does.
I love that you can use promises with HTMLx markup. Looks like it would make it so much more readable and maintainable! Hopefully, someone will add a JSX extension at some point b/c JSX makes blocks of code and markup stand out more.
Yep! promises with HTML is SUPER easy to read!
About the JSX extension... you're right, that would be awesome! But we are in the early days of this framework so I think we'll have to be patient 😄
BTW, I'm currently using this extension for VSCode that works really great! Provides syntax highlighting and rich intellisense for Svelte components
Hi Ankush! Those are really great (and difficult) questions 😄
Before writing this article, I found this one really useful to understand the key differences between Svelte and other frameworks.
I hope this can be helpful for you too. Let me know if you have any additional questions.
Disclaimer: I'm a total Svelte noob, so I'm doing my best to understand this kind of key benefits too :D
I think your first example is incorrect:
<UserInfo {...user}>I don't know Svelte so I'm guessing, but shouldn't it be like this?
<User {...user}>?Hi Roger! Actually that line is ok, but thanks to your comment, I found other issue.
My import was:
instead of
Because I was using it like so:
Hmm I think you just flipped my example. It's the same error. Regardless I'm glad to have helped and I'm glad I understood it. Both things I was dubious about when I commented.
Muy bueno el post!
Gracias!