How does Meteor's reactivity work behind the scenes?
So it's actually rather straight forward, at a basic level there are 2 types of functions involved:
Functions that create a reactive context (reactive function)
Functions that invalidate a reactive context (invalidating function)
Functions that can do both. (I lied there are 3)
When you call a reactive function
it creates a context
that meteor stores globally and to which the reactive function
subscribes an invalidation
callback. The function that you pass to a reactive function, or any functions that run from within it, can be an invalidating function
and can grab the current context
and store it locally. These functions can then at any time, like on a db update or simply a timer call, invalidate that context
. The original reactive function
would then receive that event and re-evaluate itself.
Here's a step by step using meteor functions (note that Tracker.autorun
used to be called Deps.autorun
):
Tracker.autorun(function(){
alert("Hello " + Session.get("name"));
});
Session.set("name", "Greg");
- autorun takes a function as its parameter
- before autorun runs this function, it creates a
context
- autorun attaches a callback to the
context
's invalidation event - This callback will re-run the function passed to autorun
- The function is then run in the
context
for the first time. - Meteor stores this
context
globally as the currently activecontext
- Inside the function is another function: Session.get()
- Session.get() is both a
reactive function
and aninvalidating function
- Session.get sets up it's own
context
and associates it internally with the key "name" - Session.get retrieves the current context (autorun's context) globally from meteor
- The invalidation callback that Session.get registers to it's own context, will simply invalidate it's enclosing context (in this case, autorun's context)
- So now we have 2 contexts, autorun's and session.get's
when these functions return, meteor cleans up the active context global variable
Session.set is another function capable of invalidating a
context
.- in this case we're invalidating all
context
s created by Session associated with the key "name" - All of those
contexts
, when invalidated, run their invalidation callbacks. - Those callbacks just invalidate their enclosing
context
s (That's the design of Session.get and not what a invalidation callback must do) - Those enclosing
contexts
now run their invalidation callbacks. - In the autorun case, that callback runs the function we originally passed to autorun and then sets up the
context
again.
The whole implementation is actually rather straight forward as well, you can see it here:
https://github.com/meteor/meteor/blob/master/packages/tracker/tracker.js
And a good example of how it works can be found here:
https://github.com/meteor/meteor/blob/master/packages/reactive-dict/reactive-dict.js
Reactive programming is not actually meteor or JS specific
you can read about it here: http://en.wikipedia.org/wiki/Reactive_programming