??? ?????(RP)? ??? ????? ???? ? ?????. ???? ???? ???? ???? ??? ?? ????? ?????. ??? ?? ?? ??? ???? ??? ? JavaScript? ??? ??? ???? ????. ?? ??, ?? ??, ?? ??, JavaScript ??? ?? ? ??? ? ?? ?? ???? ??? ?????? ???????.

???? ?????? ??

???? ?????? ??? ??? ???? ????. ???? ??? ?????? ???? ??? ???? ??? ??? ???. ???? ?????? ?? ??? ??? ??? ? ?? ?? ????? ?????. ????? ???? ???? ???? ??? ??? ??? ?? ??????.

JavaScript?? ??? ?????? ??? ??? ?? ???? ?? ?? ?????. ???, API ?? ? ??? ?? ??? ????? ?????? ???? ???? ????? ????? ??? ? ?? ??? ????.

???? ?? ??

???: ???? ?????? ??
???? ??? ??? ?? ??? ???? ??? ???? ?????. ???? JavaScript? ?? ?? ????.

• ??? ???: ??? ???? ??
• API ??: ??? ????? ??
• ?? ??: ?? UI ?? ??

???? ??????? ???? ???? ???? ??? ?????.

import { fromEvent } from 'rxjs';

const button = document.getElementById('clickMe');
const clickStream = fromEvent(button, 'click');

clickStream.subscribe(() => console.log('Button clicked!'));

??? clickStream? ??? ??? ??? ????? ???? ????? ???? ??? ? ????.

Observable: RP? ????
Observable? ??? ??? ?? ??? ???? ??? ??????. Observable? ???? ???? ??? ? ?? "??"? ? ????. Observable? Promise? Callback? ???? ????? ? ?? ???? ??? ????? ???? ???.

const observable = new Observable(observer => {
    observer.next('First value');
    observer.next('Second value');
    observer.complete();
});
observable.subscribe({
    next: value => console.log(value),
    complete: () => console.log('Stream completed!')
});

?????: ?????
map, filter ? mergeMap? ?? ???? ???? ?? ?? ???? ?????. ?? ??? ?????? ???? ?? ?? ?????.

?:

import { interval } from 'rxjs';
import { map } from 'rxjs/operators';

const stream = interval(1000).pipe(
    map(num => `Tick ${num}`)
);

stream.subscribe(console.log);

??? ?? ??? ?? ?? ???? ? ? ???? ????? ?????.

????: ??? ??? ?? ??
????? ??? ???? ??? ???? ???? ?? ??? ??? ?????. ?? ??? ???? ?? ?????? ??? ??????.

??? ?????? ?? ??? ??

RP? ?? JavaScript ??? ???? ??? ??? ????.

??? ?????? ?? ??

1.??? ??? ??
??? ?????? ?? ???, ??? ???? ? ?? ??? ?? ??? ???????? ?????. ?? ?? WebSocket ???? RP? ???? ??? ??? ????? ?????.

import { fromEvent } from 'rxjs';

const button = document.getElementById('clickMe');
const clickStream = fromEvent(button, 'click');

clickStream.subscribe(() => console.log('Button clicked!'));

2.?? ??
?? ?? ???? ???? ???? ??? ??? ??? ?? ?? ???? ??? ?? ? ????.

const observable = new Observable(observer => {
    observer.next('First value');
    observer.next('Second value');
    observer.complete();
});
observable.subscribe({
    next: value => console.log(value),
    complete: () => console.log('Stream completed!')
});

3.?? ????
debounceTime ? UniqueUntilChanged? ?? ???? ???? ???? ???? ?? ?? ???? ??? ? ????.

import { interval } from 'rxjs';
import { map } from 'rxjs/operators';

const stream = interval(1000).pipe(
    map(num => `Tick ${num}`)
);

stream.subscribe(console.log);

?? ? ?? ??

???? ?????? ??? ???? ???? ????? ???? ?? ?? ????.

• ?? ??: ???, Observable ? ???? ?? ??? ???? ??? ? ????.
• ??? ???: ???? ?? ??? ?? ?????? ? ??????.
• ????: RxJS? ?? ?????? ????? ?? ? ??? ????? ???? ????? ?? ?? ????.

RxJS ??? ??? ????? ??

RxJS? JavaScript ??? ???? ?? ?? ?????? ??? ??? ?????.

1. Cycle.js: ???? ??? ???? ??? ????????.
2. Bacon.js: ??? ??? ?????? ??????.
3. Most.js: ??? ??????? ?? ?? ????????.

??? ?????? ?? ??

???? ???, SPA(?? ??? ??????), ??? ???? ????? ???? ?????? ??? ?????. Angular? ?? ??????? ?? RxJS? ?? ???? ??? ?? ???????? ?? ? ? ????? ???? ????.

JavaScript? ??? ?????? ?? ?? ??

1.??? ????? ??
Observable? ???? ????? ??? ?????.

2.???? ????? ??
CombineLatest ? merge? ?? ???? ?? ???? ????? ???? ? ??? ???.

3.???? ??
??? ????? RP? ???? ?? ??? ???? ??? ???.

4.??? ??
jest-marbles? ?? ?????? Observable ???? ??????.

??

???? ?????? ??? ???? ???? ???? ????? ??? ??? ?????. ????? ??? ??? ?????, ? ??? ??, ? ?? ??? ? ??? ??? ????? ?? JavaScript ???? ??? ??? ?? ?????.

??? ????

RxJS ??
Cycle.js ?? ???
??? ??? API

---

? ????: https://shafayet.zya.me

---

??? ???????

? ??? JavaScript? ??? ??? ???????? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!