As a fan of Sveltes approach to reactivity I wanted to expand a bit on your analysis of Sveltes reactivity after looking through and debugging the compiler output of the Svelte v4.1.1 tutorial "Reactivity / Assignments". TLDR: Sveltes reactivity seems to be fine-grained and only updates the necessary DOM elements (and doesn't rerun most of the component at any point, only the reactivity handlers). When the Svelte compiler detects an assignment it replaces it with a call to $$invalidate(dirty, new_value); which will first check if the value has actually changed (i.e. the assignment wasn't for the same value) and if it did change it will set the appropriate bit inside the component-wide dirty field. This dirty field is a flag value where each bit indicates a change for a certain reactive value of the component. Then Svelte calls the component wide update() function (the "p" function from the blog post) which handles changes to the dirty field and therefore updates to any reactive values. If the reactive value is used directly in the DOM the associated text node is simply updated with the new value. If on the other hand the value is used in an expression like { likes < 15 ? "a few" : "a lot" } or { like + " 👍" }, these values are diffed with the updated likes value and the DOM will only change if the value has changed (e.g. when likes goes from 8 to 9 we don't need to change the former example. Additionally a change to a reactive value would also recalculate any dependent value like $: text = `You have ${likes} likes` and if a reactive value is used as a prop the new value will simply be used in an $$invalidate() call inside the nested component. Edit: the difference between this approach to reactivitiy and something like signals seems to be the unit of reactivity: in Sveltes case updates to reactive values are handled at the component level whereas signals handle the updates themselves. Disclaimer: I have never used a signal based framework like SolidJS or Qwick.

Ryan Carniato has a really good explanation of signals and how Solid's reactivity works on Frontend Masters. Imho, the really neat part of Solid is that it just uses the callstack to model the reactive graph. Basically, a signal is like an observable, i.e. a scope with a list of subscribers that exposes expose a getter and a setter function. However, unlike observables which only "push" their values to their subscribers, signals have a hybrid push/pull behavior. You create transformed values from signals by wrapping the getter function in layers of other functions (what Ryan calls "computed values"). Then, when you go use the computed value (an "effect", e.g. rendering a DOM update), you keep unwrapping the layers and pushing them onto the callstack until you reach one or more signals at the bottom, and, once that happens, you start popping things off the callstack again, i.e. when a change is triggered, you keep "digging" until you find the signal(s) that caused it and then "climb" back up again. So we have a key feature: a) signals are always at the bottom of the reactive hierarchy. This wouldn't be all that special on its own, but there's another key feature: b) you only ever subscribe to signals. The cool part about having these two feature combined is that they solve the diamond problem: only the things at the very bottom of the reactive hierarchy trigger updates, and we have a way of digging through the layers of computation to get to them (callstack), so whatever signal changes we can be sure it will only trigger one update in all of its dependencies! (to give the full picture, it would be also good to explain how effects and computed values work, but this is already long enough, if you're interested go watch Ryan's videos instead!)

Misko is the man. I love angular, and I love qwik. Great vid!

One of the most interesting videos on the subject. Thank you!

Hi! Just to clarify a bit about the Angular part. Angular does not rely on Observables at all to detect if it should update components templates but rather on zone.js, a third party library that, in short, tells when to run change detection. Change detection will check if the components properties are different that their previous state and update the views that use them accordingly. Note that Angular has introduced Signals 3 month ago and soon zone.js will be entirely removed. So in a few month Angular CD (change detection) will behave completely differently than it used to and will be comparable to how SolidJS works. But anyway, thanks for the video and the hard work you put on it :)

ill probably forever stick with Vue. Sveltekit is my second favorite out of them. Ive actually never really liked React nor Angular

Probably your best video I've seen to date. Thank you.

I look forward to reading any material about Qwik!

Great video great article. Reactivity can quickly become a complicated subject. So most just point to metrics and buzz words. Rather than even try to explain whats going on.

This isn't reactivity. This is one _type_ of reactivity: Synchronization. Asynchronous reactivity (functional reactive programming) is equally important.

Looking forward on how solid handles reactivity. since its not much explained in this video

Good video. 👍 informative. Personally, as someone that prefers to just use the platform, I feel the concept is of trivial value. Seems like over engineered getters and setters.

vdom was then a killer feature for Reactjs,,, i guess now it's the one killing it

I get that reacts thing is kinda messy, but its not the endgame either. You could just restructure that code differently. And avoid unwanted component from re rendering. Granted it requires quite some time and trial and error to reach that stage and things like svelte allow you to get performant website much easier

This is exactly what I want, this is not pointless at all but IMHO the AVD and viewer retention will be not as good. Awesome video anyways But things are changing very fast svelte 5 will be a complete rewrite of the compiler so it will be much closer to solid soon. Angular also has signals now they're gonna remove zone js so it will also be closer and react uhmmm... React forgot should make it faster IG IDK. I don't know whats happening with vue but evan is a genius so he might be cooking something up exciting times

Have you tested out legend state? It enables more fine grained reactivity in React, Jack Herrington recently released a video about it :)

you know what they say abpout the internet , say something wrong and you'll get detailed corrections , sometimes . it was nsane the way you ranked svelte reactivity on top of solidjs , bt ryan carniatto has live streams every Friday which I've found to be the most reliable source of detailed information about what these js frameworks are doing

lol, i thought you where fireship haha. Then i heard your voice and was like wtf? but ii liked the vid!!

Pretty sure vue components don't rerun on change. Can you provide an example? Great Video all things considered.

what about with svelte 5 and runes?

Great explanation. These are some amazing pieces of software. And they are too complex. The web front-end is already a mess, those frameworks and metaframewoeks, with their 10s of surrounding tools to add type-checking, linting, formatting, and all the concepts they bring like SSR, CSR, SSG, server node API vs Browser JS API, don’t do enough to fix the mess. So I will still avoid them on my projects for the sake of simplicity. Server-side gendering with some JS for reactivity gets most projects very far.

Misko called you out😅

Angular/RxJs is solving a *much* harder problem: async reactivity. Simpler problems, like sync reactivity, can have simpler solutions. We can argue about the *need* for async reactivity, but if you actually have that problem, you're unlikely to find a more elegant solution than explicitly reified reactivity constrcuts ala RxJs.

You what I always say? Fuck magic, gimme code I can read and modify

Comment

Huh angular is for gigachads

With all due respect, who cares svelte, does it more intuitively easily that’s why Timmy’s belt is the number one framework by far I don’t care if under the hood one From Work, does it more efficiently

May I ask, where your awesome accent comes from? Love your videos! Greetings from Bulgaria :)