- ×
Ultra-fast implementation of reactivity for javascript
Filed under application tools › utilitiesUltra-fast implementation of reactivity for javascript.
Installation
The following command installs cellx as a npm package:
npm install cellx --save
Example
let user = { firstName: cellx('Matroskin'), lastName: cellx('Cat'), fullName: cellx(function() { return (user.firstName() + ' ' + user.lastName()).trim(); }) }; user.fullName.subscribe(function() { console.log('fullName: ' + user.fullName()); }); console.log(user.fullName()); // => 'Matroskin Cat' user.firstName('Sharik'); user.lastName('Dog'); // => 'fullName: Sharik Dog'
Despite the fact that the two dependencies of the cell
fullName
has been changed, event handler worked only once. Important feature of cellx is that it tries to get rid of unnecessary calls of the event handlers as well as of unnecessary calls of the dependent cells calculation formulas. In combination with some special optimizations, this leads to an ideal speed of calculation of the complex dependencies networks.Benchmark
One test, which is used for measuring the performance, generates grid with multiply "layers" each of which is composed of 4 cells. Cells are calculated from the previous layer of cells (except the first one, which contains initial values) by the formula A2=B1, B2=A1-C1, C2=B1+D1, D2=C1. After that start time is stored, values of all first layer cells are changed and time needed to update all last layer cells is measured. Test results (in milliseconds) for different number of layers (for Google Chrome 53.0.2785.116 (64-bit)):
Library ↓ \ Number of computed layers → 10 20 30 50 100 1000 5000 cellx <~1 <~1 <~1 <~1 <~1 4 20 VanillaJS (naive) <~1 15 1750 >300000 >300000 >300000 >300000 Knockout 10 750, increases in subsequent runs 67250, increases in subsequent runs >300000 >300000 >300000 >300000 $jin.atom 2 3 3 4 6 40 230 $mol_atom <~1 <~1 <~1 1 2 20 RangeError: Maximum call stack size exceeded Reactor.js <~1 <~1 2 3 5 50 230 Reactive.js <~1 <~1 2 3 5 140 RangeError: Maximum call stack size exceeded Kefir.js 25 2500 >300000 >300000 >300000 >300000 >300000 MobX <~1 <~1 <~1 2 3 40 RangeError: Maximum call stack size exceeded Test sources can be found in the folder perf. Density of connections in real applications is usually lower than in the present test, that is, if a certain delay in the test is visible in 100 calculated cells (25 layers), in a real application, this delay will either be visible in the greater number of cells, or cells formulas will include some complex calculations (e.g., computation of one array from other).
Usage
Cells can be stored in the variables:
let num = cellx(1); let plusOne = cellx(() => num() + 1); console.log(plusOne()); // => 2
or in the callable properties:
function User(name) { this.name = cellx(name); this.nameInitial = cellx(() => this.name().charAt(0).toUpperCase()); } let user = new User('Matroskin'); console.log(user.nameInitial()); // => 'M'
or in simple properties:
function User(name) { cellx.define(this, { name: name, nameInitial: function() { return this.name.charAt(0).toUpperCase(); } }); } let user = new User('Matroskin'); console.log(user.nameInitial); // => 'M'
Usage with ES.Next
Use npm module cellx-decorators.
Usage with React
Use npm module cellx-react.
More modules for cellx
Options
When you create a cell, you can pass some options:
get
Additional processing of value during reading:
// array that you can't mess up accidentally, the messed up thing will be a copy let arr = cellx([1, 2, 3], { get: arr => arr.slice() }); console.log(arr()[0]); // => 1 arr()[0] = 5; console.log(arr()[0]); // => 1
put
Used to create recordable calculated cells:
function User() { this.firstName = cellx(''); this.lastName = cellx(''); this.fullName = cellx( () => (this.firstName() + ' ' + this.lastName()).trim(), { put: name => { name = name.split(' '); this.firstName(name[0]); this.lastName(name[1]); } } ); } let user = new User(); user.fullName('Matroskin Cat'); console.log(user.firstName()); // => 'Matroskin' console.log(user.lastName()); // => 'Cat'
validate
Validates the value during recording and calculating.
Validation during recording into the cell:
let num = cellx(5, { validate: value => { if (typeof value != 'number') { throw new TypeError('Oops!'); } } }); try { num('I string'); } catch (err) { console.log(err.message); // => 'Oops!' } console.log(num()); // => 5
Validation during the calculation of the cell:
let value = cellx(5); let num = cellx(() => value(), { validate: value => { if (typeof value != 'number') { throw new TypeError('Oops!'); } } }); num.subscribe(err => { console.log(err.message); }); value('I string'); // => 'Oops!' console.log(value()); // => 'I string' console.log(num()); // => 5
Methods
onChange
Adds a change listener:
let num = cellx(5); num.onChange(evt => { console.log(evt); }); num(10); // => { prevValue: 5, value: 10 }
offChange
Removes previously added change listener.
onError
Adds a error listener:
let value = cellx(1); let num = cellx(() => value(), { validate: v => { if (v > 1) { throw new RangeError('Oops!'); } } }); num.onError(evt => { console.log(evt.error.message); }); value(2); // => 'Oops!'
offError
Removes previously added error listener.
subscribe
Subscribes to the events
change
anderror
. First argument comes into handler is an error object, second — an event.user.fullName.subscribe((err, evt) => { if (err) { // } else { // } });
unsubscribe
Unsubscribes from events
change
anderror
.Subscription to the properties created with help
cellx.define
Subscribe to changes in the properties created with help of
cellx.define
possible throughEventEmitter
:class User extends cellx.EventEmitter { constructor(name) { cellx.define(this, { name, nameInitial: function() { return this.name.charAt(0).toUpperCase(); } }); } } let user = new User('Matroskin'); user.on('change:nameInitial', evt => { console.log('nameInitial: ' + evt.value); }); console.log(user.nameInitial); // => 'M' user.name = 'Sharik'; // => 'nameInitial: S'
dispose
In many reactivity engines calculated cell (atom, observable-property) should be seen as a normal event handler for other cells, that is, for "killing" the cell it is not enough to simply remove all handlers from it and lose the link to it, it is also necessary to decouple it from its dependencies. Calculated cells in cellx constantly monitor the presence of handlers for themselves and all their descendants, and in cases of their (handlers) absence went to the passive updates mode, i.e. unsubscribe themselves from their dependencies and are evaluated immediately upon reading. Thus, to "kill" of the cell you just calculated remove from it all handlers added before and forget the link to it; you do not need to think about the other cells, from which it is calculated or which are calculated from it. After this, garbage collector will clean everything.
You can call the
dispose
, just in case:user.name.dispose();
This will remove all the handlers, not only from the cell itself, but also from all cells calculated from it, and in the absence of links all branch of dependencies will "die".
Dynamic actualisation of dependencies
Calculated cell formula can be written so that a set of dependencies may change over time. For example:
let user = { firstName: cellx(''), lastName: cellx(''), name: cellx(() => { return this.firstName() || this.lastName(); }) };
There, while
firstName
is still empty string, cellname
is signed forfirstName
andlastName
, and change in any of them will lead to the change in its value. If you assign to thefirstName
some not empty string, then during recalculation of valuename
it simply will not come to readinglastName
in the formula, i.e. the value of the cellname
from this moment will not depend onlastName
. In such cases, cells automatically unsubscribe from dependencies insignificant for them and are not recalculated when they change. In the future, if thefirstName
again become an empty string, the cellname
will re-subscribe to thelastName
.Synchronization of value with synchronous storage
let foo = cellx(() => localStorage.foo || 'foo', { put: function(cell, value) { localStorage.foo = value; cell.push(value); } }); let foobar = cellx(() => foo() + 'bar'); console.log(foobar()); // => 'foobar' console.log(localStorage.foo); // => undefined foo('FOO'); console.log(foobar()); // => 'FOObar' console.log(localStorage.foo); // => 'FOO'
Synchronization of value with asynchronous storage
let request = (() => { let value = 1; return { get: url => new Promise((resolve, reject) => { setTimeout(() => { resolve({ ok: true, value }); }, 1000); }), put: (url, params) => new Promise((resolve, reject) => { setTimeout(() => { value = params.value; resolve({ ok: true }); }, 1000); }) }; })(); let foo = cellx(function(cell, next = 0) { request.get('http://...').then((res) => { if (res.ok) { cell.push(res.value); } else { cell.fail(res.error); } }); return next; }, { put: (value, cell, next) => { request.put('http://...', { value: value }).then(res => { if (res.ok) { cell.push(value); } else { cell.fail(res.error); } }); } }); foo.subscribe(() => { console.log('New foo value: ' + foo()); foo(5); }); console.log(foo()); // => 0 foo('then', () => { console.log(foo()); }); // => 'New foo value: 1' // => 1 // => 'New foo value: 5'
List of references