Skip to content

Commit 84cd3ca

Browse files
committed
Update tagline. Edit content.
1 parent 1f934f8 commit 84cd3ca

File tree

1 file changed

+26
-5
lines changed

1 file changed

+26
-5
lines changed

README.md

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# reactive-function
22

3-
A library for managing data flows and changing state.
3+
A library for managing reactive data flows.
44

55
[![NPM](https://nodei.co/npm/reactive-function.png)](https://npmjs.org/package/reactive-function)
66
[![NPM](https://nodei.co/npm-dl/reactive-function.png?months=3)](https://npmjs.org/package/reactive-function)
@@ -90,21 +90,40 @@ Construct a new reactive function. The *options* argument should have the follow
9090

9191
* *inputs* - The input properties. An array of **[ReactiveProperty](https://github.com/datavis-tech/reactive-property#constructor)** instances.
9292
* *output* (optional) - The output property. An instance of **[ReactiveProperty](https://github.com/datavis-tech/reactive-property#constructor)**.
93-
* *callback* - The reactive function callback. Arguments are values extracted from *inputs*. The return value will be assigned as the value of *output* during a **[digest](#digest)**.
93+
* *callback* - The reactive function callback. Arguments are values of *inputs*. The return value will be assigned to *output*.
9494

95-
This constructor sets up a reactive function such that *callback* be invoked when all properties in *inputs* are defined and whenever they change. The *callback* function will be invoked on the **[nextFrame](#next-frame)** after inputs change.
95+
This constructor sets up a reactive function such that *callback* be invoked
96+
97+
* when all input properties are defined,
98+
* after any input properties change,
99+
* during a **[digest](#digest)**.
100+
101+
An input property is considered "defined" if it has any value other than `undefined`. The special value `null` is considered to be defined.
102+
103+
An input property is considered "changed" when
104+
105+
* the reactive function is initially set up, and
106+
* whenever its value is set.
107+
108+
Input properties for one reactive function may also be outputs of another.
96109

97110
<a name="destroy" href="#destroy">#</a> <i>reactiveFunction</i>.<b>destroy</b>()
98111

99112
Cleans up resources allocated to this reactive function and removes listeners from inputs.
100113

101114
<a name="digest" href="#digest">#</a> ReactiveFunction.<b>digest</b>()
102115

103-
Propagates changes from input properties through the data flow graph defined by all reactive properties using [topological sorting](https://en.wikipedia.org/wiki/Topological_sorting).
116+
Propagates changes from input properties through the data flow graph defined by all reactive properties using [topological sorting](https://en.wikipedia.org/wiki/Topological_sorting). An edge in the data flow graph corresponds to a case where the output of one reactive function is used as an input to another.
117+
118+
Whenever any input properties for any reactive function change, **[digest](#digest)** is debounced (scheduled for invocation) on the **[nextFrame](#next-frame)**. Because it is debounced, multiple synchronous changes to input properties collapse into a single digest invocation.
119+
120+
Digests are debounced to the next animation frame rather than the next tick because browsers will render the page at most every animation frame (approximately 60 frames per second). This means that if DOM manipulations are triggered by reactive functions, and input properties are changed more frequently than 60 times per second (e.g. mouse or keyboard events), the DOM manipulations will only occur at most 60 times per second, not more than that.
104121

105122
<a name="next-frame" href="#next-frame">#</a> ReactiveFunction.<b>nextFrame</b>(<i>callback</i>)
106123

107-
Schedules the given function to execute on the next animation frame or next tick. This is a simple polyfill for `[requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)` that falls back to `[setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout)`. The main reason for having this is for use in the [tests](https://github.com/datavis-tech/reactive-function/blob/master/test.js), which run in a Node.js environment where `requestAnimationFrame` is not available. Automatic digests are debounced against this function.
124+
Schedules the given function to execute on the next animation frame or next tick.
125+
126+
This is a simple polyfill for `[requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)` that falls back to `[setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout)`. The main reason for having this is for use in the [tests](https://github.com/datavis-tech/reactive-function/blob/master/test.js), which run in a Node.js environment where `requestAnimationFrame` is not available. Automatic digests are debounced against this function.
108127

109128
## Related Work
110129

@@ -114,6 +133,8 @@ Schedules the given function to execute on the next animation frame or next tick
114133
* [AngularJS Digest](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest)
115134
* [ZJONSSON/clues](https://github.com/ZJONSSON/clues)
116135
* [Model.js](https://github.com/curran/model)
136+
* [RxJS - when](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/when.md)
137+
* [Bacon - When](https://github.com/baconjs/bacon.js/tree/master#bacon-when)
117138

118139
<p align="center">
119140
<a href="https://datavis.tech/">

0 commit comments

Comments
 (0)