SvelteJS: The next big UI framework
SvelteJS is the new UI framework on the block. Svelte is however very different in many aspects an...
For further actions, you may consider blocking this person and/or reporting abuse
Please explain why React and Vue are not “truly reactive”.
Thank you for the comment!
React and VueJs don’t make use of reactive programming. That is, they don’t track the data flow through the application.
Instead they treat the application as a black box and when a state changes, they rerender the whole component and all it’s children, instead of just the changed value.
Technically that doesn’t make it less “truly reactive” than Svelte, since reactivity doesn’t care about how the app itself or the rendering system works.
To me reactive programming is to track data and the data flow through the application and when a state variable changes, update the variables that depend on that changed variable.
React and Vue cannot track which places to update when a state variable changes and as a result updates the whole component where the state variable resides as well as all its children. Thereby, in my opinion, does not apply reactive programming principles.
Svelte on the other hand, can track data through the application and only update the variables that depend on the variable that's updated. Which in my opinion better applies to reactive programming.
Hope my explanation makes sense. If you want a more thorough explanation, then I recommend you to watch Rich Harris talk on rethinking reactivity (youtu.be/AdNJ3fydeao).
According to Wikipedia, “reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change.”. So basically if I say
a = b + c,awill change whenborcchange, and it doesn’t matter how it’s implemented.Yes, that is true. But the article you are referring to also state that
"in reactive programming, the value of a is automatically updated whenever the values of b or c change, without the program having to re-execute the statement a:=b+c to determine the presently assigned value of a."
In react or VueJS, when a value like a in your example changes, we have to rerun the same code and thereby re-execute the statement a = b + c. Making React or VueJS not reactive by that definition. In SvelteJS, the values are automatically updated as in the definition.
Not sure how Svelte would know what
ais without rerunning that code.In Svelte, we can reassign the value of a without redeclaring the inline function. Which we would have to do in React.
That is one of my points about Svelte being truly reactive.
Not sure what you mean by “redeclaring the inline function”.
I don't necessarily agree with the "virtual dom is a bottleneck" argument, Attachment is an expensive process for the browser and the whole purpose of the virtual DOM is to prevent unnecessary re-paints. I am also curious of how well does Svelte works with immutability as it seems to rely on change-detection as opposed to unidirectional data-flow. Lastly, the word framework has been thrown around but neither Vue or React are frameworks but libraries, and I think Svelte fits that description as well as there are no set ways of doing the data-layer like Angular.
Thanks for reading and thank you for the comments.
I didn't expand on why I think the virtual DOM is a bottleneck. The short answer is that it performs a lot of unnecessary DOM diffing in the process of deciding what to update, since when using the virtual DOM the framework/library don't have any trace of the data flow. A lot of code also runs more times than necessary. If you don't trust, check out the talk by one of the founders of SvelteJS (youtu.be/AdNJ3fydeao).
I think you could use immutability, but I haven't tried it. But looks like you could do something like this(svelte.dev/tutorial/svelte-options)
Svelte has a store feature for handling data if that's what you are referring to.
Thanks for the reply, I'll watch the talk!
Grateful that you wrote this as it means I don't have to look up elsewhere what Svelte is all about :) And your description was very easy to digest! I like that they have gone for the very vanilla JavaScript feeling, but I'm not a big fan of things like the
$:label - seems like a bit of hack... 😅Thank you for the nice comment 😊
The $: is valid JavaScript, however I get that it can feel a bit unusual at first. I think we can get used to it, since it gives so much value. You can for instance also use it for watching log messages,
$: console.log(value)
That will print every time value changes, which is very useful for debugging as well.
Thanks for reading!
But yes, you can use Svelte for progressive enhancement, juse like for Vue or React. You inject it just as you would with vue or React, you can even add svelte to a react or vue app if you would like.
I also like both Vue, React and Angular. However, I like the way Svelte is making us think about creating user interfaces.
Thanks for the article, it has really inspired me to try Svelte :]
But what about large applications? Are there any references?
Thank you for reading and for the nice comment 😊
For building larger applications, there is a project called Sapper. Sapper helps with code splitting, E2E testing and a lot of other nice features.
Companies like New York Times and goDaddy use Svelte. The have a list of companies on their site.