@aldinh777/reactive v0.35.5
Reactive
Another attempt to implement Reactive Programming with Javascript
Guide
Introduction
Reactivity is the ability of something to be reactive, and to be reactive means something can always react to something else. In case of Computer Science, it usually means the ability of something to react to any changes of data
There is many ways to implement this behaviour, ReactiveX like to call this behaviour as Observable
, and many other call it Signal
, but i always love to imagine it as State
a State
always have a value, and its value can and will changes overtime to be observed later throughout the changes. In another word, it just a value wrapper with the ability to be observable
Lets start simple, this is how you create a state, simple and straighforward
import { state } from '@aldinh777/reactive';
const x = state(0);
now the variable x
is a state with its current value is 0. to update its value, just call the variable as a function with an argument, and to get the current value, just call
it without an argument
import { state } from '@aldinh777/reactive';
const x = state(0);
console.log(x()); // 0
x(4); // set the current value to 4
console.log(x()); // 4
Data Binding
Imagine two variable, one depends on the other one
# Procedural Simulation
a = 5
b = a * 2 # the value of b will be 10
print(a) # 5
print(b) # 10
a = 6
print(a) # 6
print(b) # 10
In the classical world Procedural Programming, changing the value of a
won't affect the value of b
. But in Reactive Programming, any change of a
would directly affect the value of b
, this ability is usually called binding
. For the sake of clarity, lets just assume we have our own operator which is (<-
) to bind any states
# Reactive Simulation
a = 5
b <- a * 2 # the value of b will be whatever the value of a at the moment times 2
print(a) # 5
print(b) # 10
a = 6
print(a) # 6
print(b) # 12
This is how we acquire the same effect using this library
import { state } from '@aldinh777/reactive';
import { computed } from '@aldinh777/reactive/utils';
const a = state(5);
const b = computed((a) => a * 2);
console.log('current value = ', b());
// output: current value = 10
a(6);
console.log('current value = ', b());
// output: current value = 12
Observable
Let say we want to check if some data is greater than 10
# Procedural Simulation
a = 5
if (a > 10) {
print('A is CHANGED')
}
a = 11 # (nothing happened...)
a = 9 # (nothing happened...)
a = 15 # (nothing happened...)
In Procedural Programming, this will only check once. Changing the value of a
won't do the check anymore. in Reactive, there is a way to always check the value of a
whenever it changes. But to make it easier to understand, let assume we have a new keyword called when
# Reactive Simulation
a = 5
when (a > 10) {
print('A is currently GREATER THAN 10')
}
a = 11 # A is currently GREATER THAN 10
a = 9 # (nothing happened...)
a = 15 # A is currently GREATER THAN 10
Now, any changes to a
will trigger check and only run the command only when the current value is larger than 10
This is how we obtain the same effect using this library
import { state } from '@aldinh777/reactive';
const a = state(5);
a.onChange((val) => {
if (val > 10) {
console.log('A is currently GREATER THAN 10');
}
});
a(10); // A is currently GREATER THAN 10
a(9); // (nothing happened...)
a(15); // A is currently GREATER THAN 10
if there is multiple state to be observed, you can use the effect
import { state } from '@aldinh777/reactive';
import { effect } from '@aldinh777/reactive/utils';
const a = state(2);
const b = state(3);
effect(() => {
if (a() + b() > 10) {
console.log(`A and B combined which is ${a() + b()} is GREATER THAN 10`);
}
});
a(8); // A and B combined which is 11 is GREATER THAN 10
a(5); // (nothing happened...)
b(7); // A and B combined which is 12 is GREATER THAN 10
13 days ago
15 days ago
15 days ago
15 days ago
15 days ago
17 days ago
22 days ago
23 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
4 months ago
5 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago