DEV Community

Discussion on: SvelteJS: The next big UI framework

 
mstamstrom profile image
Marcus Stamström

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).

Thread Thread
 
tobiassn profile image
Tobias SN

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, a will change when b or c change, and it doesn’t matter how it’s implemented.

Thread Thread
 
mstamstrom profile image
Marcus Stamström • Edited

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.

Thread Thread
 
tobiassn profile image
Tobias SN

Not sure how Svelte would know what a is without rerunning that code.

Thread Thread
 
mstamstrom profile image
Marcus Stamström

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.

Thread Thread
 
tobiassn profile image
Tobias SN

Not sure what you mean by “redeclaring the inline function”.