re: 5 things I love about Svelte VIEW POST

FULL DISCUSSION
 

Thanks for the post! I'm turning into a Svelte fanboy these days. :D I do have a few questions on your article:

Svelte shifts that work into a compile step that happens when you build your app.

Not sure I understand that. If I use a WebPack-like workflow, aren't the other frameworks also doing most of the work during compilation? 🤔

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

I keep seeing that, but what does it really mean? What sort of technique/algorithm is being used that is different from diffing?

 

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

 

LOL, okay! I didn't find the linked article helpful, though; it talks about why the virtual DOM approach isn't that great; it doesn't say what Svelte does, and there's no word on compilation. Fear not, I shall keep looking! 🧐😅

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 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.getElementById instead of a bunch of abstractions that ultimately take a toll on performance.

code of conduct - report abuse