RxJS hints

RxJS hints

This is my notes for RxJS:

1- synchronous vs Asynchronous programming - definition
2- RxJS Terminology.
3- Type of Observable.
4- RxJS Operator
5- Pipeable Operator.
6- Reference.
Synchronous Programming: it's straightforward in each line of code is executed after previous. it's like a calculator, you want to sum 2 number. Enter first number then operator (+) then the second one then equal to get result. 1 +1 = 2 this Synchronous programming.
Asynchronous programming: it's dramatically increase code complexity. the execution of code may be later according to some factor. it's like excel program, if you wanna sum 2 number using 3 cells, cell a1 for first number, cell a2 for the second, and summation for cell a3. you just enter numbers in a1,a2 the result at once appear in a3, there is no need for any button to execute this operation.

excel is a good example for Asynchronous programming we didn't know how summation operation done but we mean with result.

This takes us to 2 styles imperative vs declarative

in previous example of calculator and excel program, we dictate when to invoke a function to calculate the sum it's imperative, while in excel we don't know how operation done declarative. Declarative paradim: a style of building the structure and elements of computer programs—that expresses the logic of a computation without describing its control flow.

let a1= 5;
let a2=6;
let a3 = a1 + a2; // a3 =6;
a1 =10; // a3 =6, but should 10+6 =16
a2=20; // a3 =6, but should 10+20 =30

while we change values of a1, a2 the c3 doesn't react to change. while in excel sheet, where you but formula =sum(a1, a2) the sum a3 changes automatically. This is a Reactive style which a declarative programming paradigm concerned with data streams and the propagation of change. Reactive style is about creating responsive, event driven applications, where an observable event stream is pushed to subscriber.

RXJS: -

####=> There're main players
    = **Observable**: Data Stream Pushes data over time.
    = **Observer**: Consumer of Observable stream.
    = **Subscriber**: Connects observer with Observable.

####=> Observable Type:
    = Cold Observable:
                    - create data producer for each subscriber
                             (Netflix, watch any time movie)
                    - When some code invoke a subscriber, it start producing data.
    = Hot Observable: 
                            - create data producer first, and each subscriber gets the data from    one producer, starting from the moment for subscription 
                                    (Cinema Show, watch movie on time)
                            - produce data over if no subscribe are interested in data

=> Main roles of observable:
    1- emit next element to the observable.
    2- throw an error on the observer.
    3- inform the observer that stream is over.

=> Observer, main role: provide 3 callbacks
    1- function to handle next element emitted by observable.
    2- function to handle errors thrown by observable.
    3- function to handle end of streams.

=> Observable communicate with provided observer by invoking the following function on the observer object:- 
         - Next(), push the next element the observer.
         - error(), push error message to observer.
         - complete (), send a signal to observer about stream ended