GoKawiilWe have been using Signals in production for years via several modern front-end frameworks like Solid, Vue, and others, but few of us are able to explain how they work internally. I wanted to dig into it, especially diving deep into the push-pull based algorithm, the core mechanism behind their reactivity. The subject is fascinating.
The state of the world
Imagine an application as a world where we describe the set of rules that govern it. Once a rule is defined, our program will no longer be able to change it.
For example, we decide that in our world, any y value must be equal to 2 * x . We define this rule, and from then on, whenever x changes, y will automatically adjust. We can define as many rules as we want. They can even depend on each other by deciding that z must be equal to y + 1 , and so on.
Now we press the play button, our program starts, the world is running, and the rules we have defined are now in effect over time. (think of it as our runtime).
x 10 y = x * 2 20 z = y + 1 21
And then, we just have to observe. We can modify x and see how y and z automatically adjust to comply with the rules we have established. It's like a spreadsheet where dependent cells automatically update when their sources change. In other words, derived values are reactive to changes in their dependencies.
These derived values behave like pure functions: no side effects, no mutable state. In the next example, time is a source that changes continuously while rotation is derived from it. The square simply reflects the result of this transformation that is declared once.
time = 0.00 derived value rotation = f ( time )
This "reactive world" didn't come out of nowhere. The idea emerged in the 1970s and was formalized as Reactive Programming, a paradigm that describes systems where changes in data sources automatically propagate through a graph of dependent computations, which is exactly what Signals do.
... continue reading