Native Reactivity is a technique that has been used by several UI frameworks ( Meteor being perhaps the most visible ) that allows for transparent propagation of changes to the UI.
This technique does not require explicitly defining dependencies between pieces of your code, funcions and the UI. Changes propagate automatically.
( Take a look at
Let's say we want to have an HTML Paragraph showing the current time.
This value will be set once ( when the script is run ) but won't change when the actual time changes, right?
If we had a way of listening to changes on the result of the getTime() function, we could use this mechanism to periodically update our UI.
on_change getTime$'p'text t
We could easily create this on_change function by constantly polling getTime() for changes.
TODO: ugly code with setTimeouts
However, if we relied upon this strategy for a large application we would end up with lots of setTintervals everywhere.
reactiviy.js provides a better way, where functions themselves can notify when their value changes.
reactivity.js has a subscribe function that works just like the
on_change function above
reactivity.subscribe( function_to_watch, callback )
func(error, result) ( this is the Node.js standard way of defining callbacks )
reactivitysubscribe getTime$'p'text res
This will work as long as whoever created
getTime was kind enough to let us know "when" the value
of the function changes.
var notifier = reactivitynotifier // request a notifiersetTimeout notifier 1000 // call it in 1000MSreturn getTime
In a very basic sense, Reactivity hast two parts:
- Publish ( use reactivity.notifier() )
- Consumer ( use reactivity.subscribe() )
We say that a function is reactive if it can notify us when its value has changed. ( somebody was kind enough to create a reactivity.notifier() under the covers )
OK. You're probably thinking: "Why go through all this if I could probably write somehing like that myself". Well, there are several things that reactivity.io gives you that would be really hard to implement yourself:
- 100% transparent transitivity ( aka dependency tracking, dataflow, etc )
- Iteroperation with other reactive libraries
Reactivity is transitive. This means that any function consuming a reactive function becomes reactive itself. For example:
return "The current time is :" + getTimereactivitysubscribe getTimeWithMessage$'p'text res
return "The current time is :" + getTimereturn getTimeWithMessagetoUpperCasereactivitysubscribe getTimeWithMessageUC$'p'text res
npm install reactivity
var reactivity = require'reactivity'
Include the following JS file ( you can find it in /build/... )
In the browser, the global reactivity object is attached to the root scope ( window )
var reactivity = windowreactivity
If the object is already present then the library won't mess things up. It will proxy calls to the pre-existing implementation.
The official API documentation is the TypeScript Definition file. ( TODO: someone please generate docs from the d.ts file )
In order to combine reactive libraries developed by different people at different times we need a standard implementation.
Because of the way reactivity events are propagated you need to share some assumptions. If everyone uses this library as a foundation and those assumptions are met then you can combine reactive functions from different libraries transparently.
Because an expression may depend on several reactive functions, the Invalidation event you catch at the top of the stack may come from any of them. The value of any specific function is not important. What's important is the result of evaluating the complete expression.
Like all good ideas and patterns in software they have been discovered and rediscovered over and over again. Using a global object to allow producers talk to consumers up on the stack is common when invalidating database caches for example.
Lately it has popped up in several frameworks ( like Meteor.js ). However, the pattern is usually tightly coupled with the host program/framework. reactivity.js decouples it and allows us to create interoperable reactive libraries.