revalue (Reactive Value)
A simple and intuitive way of doing incremental and reactive programming
In incremental or reactive programming, when a piece of data changes, only the outputs that depend on that piece of data will be recomputed and updated.
Standard libraries for reactive programming are powerful, but are more conceptually involved.
The idea behind
revalue is simple: we register some variables and functions that depend on other variables and/or functions.
// This creates a registry `logic`var logic =;
This example registers variables
cost, and a function
profit, which is automatically calculated as
cost. Then, we register a hidden function, which will output
profit whenever it changes.
Every function and variable has a value that we can get with
logicprofit; // Returns 50
Or, set with
What makes it powerful
When we change a variable or a function, then the functions that depend on it will get automatically recalculated. In the example above,
logicprofit; // Returns 50logicrevenue; // Setting the revenue to 350 instead of 150logicprofit; // Returns 250
This approach is similar to a spreadsheet-like functionality and can be especially useful for
- Specifying behaviour more declaratively
- Implementing reactive DOM and templating systems
- Working with changing app or component state
- Creating customization system for Custom Elements
How to (TL;DR)
You can see commented examples under /demo folder for extra practice. The following is just an overview of all available features.
Working with registries
We can create registry in 2 different ways:
Preferred way, through a function callvar r1 =;
Alternative way, through an object:var r2 =;
We can also add some variables to an existing registry by using the registry as the first argument:
Working with variables and functions:
Getting:r1x; // Returns 3 (because x = a + b = 1 + 2 = 3)
Setting:r1a;r1x; // Returns 222 (because x = a + b = 220 + 2 = 222)
Changing dependencies:r1x;r1x; // Returns 5 (because x = c + b = 3 + 2 = 5)
Changing function description:r1x;r1x; // Returns 6 (because x = c * b = 3 * 2 = 6)
A function can depend on the previous values of its dependencies as well:
r1x;r1b;r1x; // Returns 36 (because x = a * b + pre_a * pre_b = 3 * 10 + 3 * 2 = 36)
Functions from one registry can just as easily depend on functions / variables from the other registries:
;r2y; // Returns 18 (because y = x / 2 = 36 / 2 = 18)
We can easily register a function / variable outside of a registry:
The utility is tiny, just about 1.2K minified and gzipped (3K minified).
Add to your HTML page:
Include revalue as a NodeJS module:
var revalue = ;