I know nothing about Svelte, so two noob questions.
Svelte syntax looks like Vue (no revolution here). If I get it right, the main benefit of using Svelte is the bundle size. Compiler does some magic in the build step and less JS code is provided to a user. It means faster loading, parsing and execution. Are there any other benefits except bundle size?
"Cybernetically enhanced web apps". What does it mean? 🤔
I'm a noob too, and I've never used Vue, but my understanding is:
Yes it's very similar to Vue in syntax, but to be honest I never liked Vue's boilerplate and template syntax. Svelte uses a different template syntax that reminds me of Mustache. And in Svelte, you just use local variables instead of needing to use new Vue boilerplate to define your props and methods. Even if Svelte wasn't compiled, I would prefer it to Vue.
They have a blog post explaining this:
Svelte has many aspects — outstanding performance, small bundles, accessibility, built-in style encapsulation, declarative transitions, ease of use, the fact that it's a compiler, etc — that focusing on any one of them feels like an injustice to the others. 'Cybernetically enhanced' is designed to instead evoke Svelte's overarching philosophy that our tools should work as intelligent extensions of ourselves — hopefully with a retro, William Gibson-esque twist.
Thanks for the answer, it's much clearer now.
I guess I need to read William Gibson books or re-watch Johnny Mnemonic movie to feel the atmosphere of Svelte 😂
What really drew me to Svelte was the smaller code base. It takes less code to write the same app.
You can see in this article: freecodecamp.org/news/a-real-world...
And I made a video about it too: youtube.com/watch?v=rMBusx68ujY&t=4s
I love that too. Migrating from another framework mostly involves deleting code, and that feels great.
Are you using svelte 2? Svelte 3 got out last month and it doesn't looks like Vue anymore.
I tried the official tutorial and having full component definition (template, styles and logic) in one file reminded me Vue a lot.
In addition to what Jesse said, Svelte compiles to Vanilla JS and does not use the Shadow DOM. All the code is compiled and optimized to work directly on the actual (or 'light') DOM.
I also like the fact that you're using actual CSS in your Svelte components, and the compiler namespaces your CSS. You can also set it up to use various existing CSS frameworks (Tailwind, Bootstrap, Emotion, etc.) as well as PostCSS, PurgeCSS, etc.
Finally, using stores and events, communication and data-flow across components is very flexible and quite easy to use.
Thanks for the addition, my interest to Svelte grows up with every positive feedback.
I just didn't get the Shadow DOM sentence. Did you mean virtual DOM?
Sorry, yes, that's exactly what I meant. And you're welcome!
very stupid question but I had to ask, why wasnt working with the actual DOM done in Vue Angular or React? why only now with Svelte
Ultimately all the frameworks use the actual DOM, but React, Vue and (I think) Angular use what's called a "virtual DOM" to compare before vs after to see what needs to be changed on the page. Svelte doesn't need that, it compiles to just the DOM scripting needed without the overhead of a virtual DOM.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.