Этот документ на русском

Ultra-fast implementation of reactivity for javascript.

Installation

The following command installs cellx as a npm package:

npm install cellx --save

Example

1let user = {
2    firstName: cellx('Matroskin'),
3    lastName: cellx('Cat'),
4
5    fullName: cellx(function() {
6        return (this.firstName() + ' ' + this.lastName()).trim();
7    })
8};
9
10user.fullName('subscribe', function() {
11    console.log('fullName: ' + this.fullName());
12});
13
14console.log(user.fullName());
15// => 'Matroskin Cat'
16
17user.firstName('Sharik');
18user.lastName('Dog');
19// => '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	25000
cellx	<~1	<~1	<~1	<~1	<~1	4	20	100
VanillaJS (naive)	<~1	15	1750	>300000	>300000	>300000	>300000	>300000
Knockout	10	750, increases in subsequent runs	67250, increases in subsequent runs	>300000	>300000	>300000	>300000	>300000
$jin.atom	2	3	3	4	6	40	230	1100
$mol_atom	<~1	<~1	<~1	1	2	20	RangeError: Maximum call stack size exceeded	RangeError: Maximum call stack size exceeded
Warp9	2	3	4	6	10	140	900, increases in subsequent runs	4200, increases in subsequent runs
Reactor.js	<~1	<~1	2	3	5	50	230	>300000
Reactive.js	<~1	<~1	2	3	5	140	RangeError: Maximum call stack size exceeded	RangeError: Maximum call stack size exceeded
Kefir.js	25	2500	>300000	>300000	>300000	>300000	>300000	>300000
MobX	<~1	<~1	<~1	2	3	40	RangeError: Maximum call stack size exceeded	RangeError: Maximum call stack size exceeded
Matreshka.js	11	1150	143000	>300000	>300000	>300000	>300000	>300000

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:

1let num = cellx(1);
2let plusOne = cellx(() => num() + 1);
3
4console.log(plusOne());
5// => 2

or in the callable properties:

1function User(name) {
2    this.name = cellx(name);
3    this.nameInitial = cellx(function() { return this.name().charAt(0).toUpperCase(); });
4}
5
6let user = new User('Matroskin');
7
8console.log(user.nameInitial());
9// => 'M'

including in the prototype:

1function User(name) {
2    this.name(name);
3}
4User.prototype.name = cellx();
5User.prototype.friends = cellx(() => []); // each instance of the user will get its own instance of the array
6
7let user1 = new User('Matroskin');
8let user2 = new User('Sharik');
9
10console.log(user1.friends() == user2.friends());
11// => false

or in simple properties:

1function User(name) {
2    cellx.define(this, {
3        name: name,
4        nameInitial: function() { return this.name.charAt(0).toUpperCase(); }
5    });
6}
7
8let user = new User('Matroskin');
9
10console.log(user.nameInitial);
11// => 'M'

Usage with ES.Next

Use npm module cellx-decorators.

Usage with React

Use npm module cellx-react.

More modules for cellx

• cellx-indexed-collections
• Rionite

Options

When you create a cell, you can pass some options:

get

Additional processing of value during reading:

1// array that you can't mess up accidentally, the messed up thing will be a copy
2let arr = cellx([1, 2, 3], {
3    get: arr => arr.slice()
4});
5
6console.log(arr()[0]);
7// => 1
8
9arr()[0] = 5;
10
11console.log(arr()[0]);
12// => 1

put

Used to create recordable calculated cells:

1function User() {
2    this.firstName = cellx('');
3    this.lastName = cellx('');
4
5    this.fullName = cellx(function() {
6        return (this.firstName() + ' ' + this.lastName()).trim();
7    }, {
8        put: function(name) {
9            name = name.split(' ');
10
11            this.firstName(name[0]);
12            this.lastName(name[1]);
13        }
14    });
15}
16
17let user = new User();
18
19user.fullName('Matroskin Cat');
20
21console.log(user.firstName());
22// => 'Matroskin'
23console.log(user.lastName());
24// => 'Cat'

validate

Validates the value during recording and calculating.

Validation during recording into the cell:

1let num = cellx(5, {
2    validate: value => {
3        if (typeof value != 'number') {
4            throw new TypeError('Oops!');
5        }
6    }
7});
8
9try {
10    num('I string');
11} catch (err) {
12    console.log(err.message);
13    // => 'Oops!'
14}
15
16console.log(num());
17// => 5

Validation during the calculation of the cell:

1let value = cellx(5);
2
3let num = cellx(() => value(), {
4    validate: value => {
5        if (typeof value != 'number') {
6            throw new TypeError('Oops!');
7        }
8    }
9});
10
11num('subscribe', err => {
12    console.log(err.message);
13});
14
15value('I string');
16// => 'Oops!'
17
18console.log(value());
19// => 'I string'
20
21console.log(num());
22// => 5

Methods

Calling the cell method is somewhat unusual — the cell itself is called, the first argument passes the method name, rest ones — the arguments. In this case, there must be at least one argument, or call of the cell will be counted as its recording. If the method has no arguments, you need to transfer an additional undefined with a call or to shorten it just 0 (see dispose).

addChangeListener

Adds a change listener:

1let num = cellx(5);
2
3num('addChangeListener', evt => {
4    console.log(evt);
5});
6
7num(10);
8// => { prevValue: 5, value: 10 }

removeChangeListener

Removes previously added change listener.

addErrorListener

Adds a error listener:

1let value = cellx(1);
2
3let num = cellx(() => value(), {
4    validate: v => {
5        if (v > 1) {
6            throw new TypeError('Oops!');
7        }
8    }
9});
10
11num('addErrorListener', evt => {
12    console.log(evt.error.message);
13});
14
15value(2);
16// => 'Oops!'

removeErrorListener

Removes previously added error listener.

subscribe

Subscribes to the events change and error. First argument comes into handler is an error object, second — an event.

1user.fullName('subscribe', (err, evt) => {
2    if (err) {
3        //
4    } else {
5        //
6    }
7});

unsubscribe

Unsubscribes from events change and error.

Subscription to the properties created with help cellx.define

Subscribe to changes in the properties created with help of cellx.define possible through EventEmitter:

1class User extends cellx.EventEmitter {
2    constructor(name) {
3        cellx.define(this, {
4            name,
5            nameInitial: function() { return this.name.charAt(0).toUpperCase(); }
6        });
7    }
8}
9
10let user = new User('Matroskin');
11
12user.on('change:nameInitial', evt => {
13    console.log('nameInitial: ' + evt.value);
14});
15
16console.log(user.nameInitial);
17// => 'M'
18
19user.name = 'Sharik';
20// => 'nameInitial: S'

dispose or how to kill the cell

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:

1user.name('dispose', 0);

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".

Collapse and discarding of events

To minimize redraw of UI cellx may "collapse" several events into one. Link to the previous event is stored in evt.prevEvent:

1let num = cellx(5);
2
3num('addChangeListener', evt => {
4    console.log(evt);
5});
6
7num(10);
8num(15);
9num(20);
10// => {
11//     prevEvent: {
12//         prevEvent: {
13//             prevEvent: null
14//             prevValue: 5,
15//             value: 10
16//         }
17//         prevValue: 10,
18//         value: 15
19//     }
20//     prevValue: 15,
21//     value: 20
22// }

In cases when the cell comes to the initial value before generation of event, it does not generate it at all:

1let num = cellx(5);
2
3num('addChangeListener', evt => {
4    console.log(evt);
5});
6
7num(10);
8num(15);
9num(5); // return the original value
10// but there's nothing here

Upon changing the number of the calculated cell dependencies, it is evaluated only once and creates only one event:

1let inited = false;
2let num1 = cellx(5);
3let num2 = cellx(10);
4let sum = cellx(() => {
5    if (inited) {
6        console.log('sum.formula');
7    }
8
9    return num1() + num2();
10});
11
12sum('addChangeListener', evt => {
13    console.log(evt);
14});
15
16inited = true;
17
18num1(10);
19num2(15);
20// => 'sum.formula'
21// => {
22//     prevEvent: null
23//     prevValue: 15,
24//     value: 25
25// }

Dynamic actualisation of dependencies

Calculated cell formula can be written so that a set of dependencies may change over time. For example:

1let user = {
2    firstName: cellx(''),
3    lastName: cellx(''),
4
5    name: cellx(function() {
6        return this.firstName() || this.lastName();
7    })
8};

There, while firstName is still empty string, cell name is signed for firstName and lastName, and change in any of them will lead to the change in its value. If you assign to the firstName some not empty string, then during recalculation of value name it simply will not come to reading lastName in the formula, i.e. the value of the cell name from this moment will not depend on lastName. In such cases, cells automatically unsubscribe from dependencies insignificant for them and are not recalculated when they change. In the future, if the firstName again become an empty string, the cell name will re-subscribe to the lastName.

Synchronization of value with synchronous storage

1let foo = cellx(() => localStorage.foo || 'foo', {
2	put: function(value) {
3		localStorage.foo = value;
4		this.push(value);
5	}
6});
7
8let foobar = cellx(() => foo() + 'bar');
9
10console.log(foobar()); // => 'foobar'
11console.log(localStorage.foo); // => undefined
12foo('FOO');
13console.log(foobar()); // => 'FOObar'
14console.log(localStorage.foo); // => 'FOO'

Synchronization of value with asynchronous storage

1let request = (() => {
2	let value = 1;
3
4	return {
5		get: url => new Promise((resolve, reject) => {
6            setTimeout(() => {
7                resolve({
8                    ok: true,
9                    value
10                });
11            }, 1000);
12        }),
13
14		put: (url, params) => new Promise((resolve, reject) => {
15            setTimeout(() => {
16                value = params.value;
17
18                resolve({
19                    ok: true
20                });
21            }, 1000);
22        })
23	};
24})();
25
26let foo = cellx(function(cell, next = 0) {
27	request.get('http://...').then((res) => {
28		if (res.ok) {
29			cell.push(res.value);
30		} else {
31			cell.fail(res.error);
32		}
33	});
34
35	return next;
36}, {
37	put: (value, cell, next) => {
38		request.put('http://...', { value: value }).then(res => {
39			if (res.ok) {
40				cell.push(value);
41			} else {
42				cell.fail(res.error);
43			}
44		});
45	}
46});
47
48foo('subscribe', () => {
49	console.log('New foo value: ' + foo());
50	foo(5);
51});
52
53console.log(foo());
54// => 0
55
56foo('then', () => {
57    console.log(foo());
58});
59// => 'New foo value: 1'
60// => 1
61// => 'New foo value: 5'

Collections

If you record to the cell an instance of class which inherits of cellx.EventEmitter, then the cell will subscribe to its change event and will claim it as own:

1let value = cellx(new cellx.EventEmitter());
2
3value('subscribe', (err, evt) => {
4    console.log(evt.target instanceof cellx.EventEmitter);
5});
6
7value().emit('change');
8// => true

Due to this, you can create your collections, upon updating those collections you will update the cell containing them and dependent cells will be recalculated. Two such collections already is added to the cellx:

cellx.ObservableMap

The short syntax to create:

1let map = cellx.map({
2    key1: 1,
3    key2: 2,
4    key3: 3
5});

cellx.ObservableMap repeats Map from ECMAScript 2015, except for the following differences:

• inherits of cellx.EventEmitter and generates an event change when changing their records;
• has a method contains, which let you know whether or not the value is contained in the map, without going over all of its values;
• has a method clone, which creates a copy of map;
• data on initialization can be not only an array but also in the form of an object (in this case, only strings will be counted as keys, and the key difference between object and Map is in the fact that the keys in the Map can be of any type) or another map.

cellx.ObservableList

Short creation syntax:

1let list = cellx.list([1, 2, 3]);

Like cellx.ObservableMap, list generates an event change upon any change of its records.

During initialization the list may take option comparator, which will implement the assortment of its values:

1let list = cellx.list([
2    { x: 5 },
3    { x: 1 },
4    { x: 10 }
5], {
6    comparator: (a, b) => {
7        if (a.x < b.x) { return -1; }
8        if (a.x > b.x) { return 1; }
9        return 0;
10    }
11});
12
13console.log(list.toArray());
14// => [{ x: 1 }, { x: 5 }, { x: 10 }]
15
16list.addRange([{ x: 100 }, { x: -100 }, { x: 7 }]);
17
18console.log(list.toArray());
19// => [{ x: -100 }, { x: 1 }, { x: 5 }, { x: 7 }, { x: 10 }, { x: 100 }]

If instead of comparator you pass the option sorted with the value true, it will use the standard comparator:

1let list = cellx.list([5, 1, 10], { sorted: true });
2
3console.log(list.toArray());
4// => [1, 5, 10]
5
6list.addRange([100, -100, 7]);
7
8console.log(list.toArray());
9// => [-100, 1, 5, 7, 10, 100]

Properties of cellx.ObservableList

length

Length of the list. Read-only.

comparator

Function for comparing values in the sorted list. Read-only.

sorted

Whether or not the list is sorted. Read-only.

Methods of cellx.ObservableList

Important difference between list and array is that the list can't contain so-called "holes" that is, when it will try to read or set the value of the index beyond the existing range of elements, an exception will be generated. Range extension (adding of items) occurs through methods add, addRange, insert and insertRange. In such case, in the last two methods passed index can not be longer than the length of the list.

Sorted list suggests that its values are always in sorted order. Methods set, setRange, insert and insertRange are contrary to this statement, they either will break the correct order of sorting or (for preservation of this order) will install/paste past the specified index, i.e. will not work properly. Therefore, when you call the sorted list, they always generate an exception. It is possible to add values to the sorted list through the methods add and addRange, or during initialization of the list.

contains

Type signature: (value) -> boolean;.

Checks if the value is in the list. In cases of a large amount of values in the list it may be significantly faster than list.indexOf(value) != -1.

indexOf

Type signature: (value, fromIndex?: int) -> int;.

lastIndexOf

Type signature: (value, fromIndex?: int) -> int;.

get

Type signature: (index: int) -> *;.

getRange

Type signature: (index: int, count?: uint) -> Array;.

If count is unspecified it makes copies till the end of the list.

set

Type signature: (index: int, value) -> cellx.ObservableList;.

setRange

Type signature: (index: int, values: Array) -> cellx.ObservableList;.

add

Type signature: (value, unique?: boolean) -> cellx.ObservableList;.

addRange

Type signature: (values: Array, unique?: boolean) -> cellx.ObservableList;.

insert

Type signature: (index: int, value) -> cellx.ObservableList;.

insertRange

Type signature: (index: int, values: Array) -> cellx.ObservableList;.

remove

Type signature: (value, fromIndex?: int) -> boolean;.

Removes the first occurrence of value in the list.

removeAll

Type signature: (value, fromIndex?: int) -> boolean;.

It removes all occurrences of value list.

removeEach

Type signature: (values: Array, fromIndex?: int) -> boolean;.

removeAt

Type signature: (index: int) -> *;.

removeRange

Type signature: (index: int, count?: uint) -> Array;.

If count is unspecified it will remove everything till the end of the list.

clear

Type signature: () -> cellx.ObservableList;.

join

Type signature: (separator?: string) -> string;.

forEach

Type signature: (cb: (item, index: uint, list: cellx.ObservableList), context?);.

map

Type signature: (cb: (item, index: uint, list: cellx.ObservableList) -> *, context?) -> Array;.

filter

Type signature: (cb: (item, index: uint, list: cellx.ObservableList) -> ?boolean, context?) -> Array;.

find

Type signature: (cb: (item, index: uint, list: cellx.ObservableList) -> ?boolean, context?) -> *;.

findIndex

Type signature: (cb: (item, index: uint, list: cellx.ObservableList) -> ?boolean, context?) -> int;.

every

Type signature: (cb: (item, index: uint, list: cellx.ObservableList) -> ?boolean, context?) -> boolean;.

some

Type signature: (cb: (item, index: uint, list: cellx.ObservableList) -> ?boolean, context?) -> boolean;.

reduce

Type signature: (cb: (accumulator, item, index: uint, list: cellx.ObservableList) -> *, initialValue?) -> *;.

reduceRight

Type signature: (cb: (accumulator, item, index: uint, list: cellx.ObservableList) -> *, initialValue?) -> *;.

clone

Type signature: () -> cellx.ObservableList;.

toArray

Type signature: () -> Array;.

toString

Type signature: () -> string;.

List of references

• Building a Reactive App Using Cellx and React
• Атом — минимальный кирпичик FRP приложения
• Knockout — Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern