RxJS, Reactive Programming, Programming Paradigm, Reactive Programming Paradigm,

1. Reactive Programming And RxJS
- Ravi Mone

2. Agenda
❏ What and Why Reactive Programming (The Reactive Way)
❏ Reactive Programming V/S Functional Programming
❏ What is RxJS (Reactive Extensions for JS)
❏ Why RxJS? What about Promises?
❏ Is it like a kinda lodash library ?
❏ What is Observables?
❏ Operators Agony
❏ Other Rx*'s
❏ Demo and Examples
❏ Resources and References
2

3. What and Why Reactive Programming
(The Reactive Way)
Let’s start by looking at a problem.
This program needs to retrieve data from different sources with the click of a button, and it has the
following requirements:
● It must unify data from two different locations that use different JSON structures.
● The final result should NOT contain any duplicates.
● To avoid requesting data too many times, the user should NOT be able to click the button more
than once per second.
3

4. Why Reactive Programming? Cont.
OK. NOW THINKING GOES IN Imperative WAY
1. write a function to call http calls (include a ajax library, for this) and return the response.
2. From the previous response apply some filters to remove duplications (again you may write a
function called `removeDuplicates`)
3. The other point I will leave it to you
which may include some interval, disable property on dom ... (again you may write a function called
`domChanges`)
4

5. Why Reactive Programming? Cont.
OK, NOW let's think in Reactive WAY:
Using RxJS, we would write something like this:
5
var button = document.getElementById('retrieveDataBtn');
var source1 = Rx.DOM.getJSON('/resource1').pluck('name');
var source2 = Rx.DOM.getJSON('/resource2').pluck('props',
'name');
function getResults(amount) {
return source1.merge(source2)
.pluck('names')
.flatMap(function(array) {
return Rx.Observable.from(array);
})
.distinct()
.take(amount);
}

6. Why Reactive Programming? Cont.
6
var clicks = Rx.Observable.fromEvent(button, 'click');
clicks.debounce(1000)
.flatMap(getResults(5))
.subscribe(
function(value) { console.log('Received value', value); },
function(err) { console.error(err); },
function() { console.log('All values retrieved!'); }
);

7. Why Reactive Programming? Cont.
Another Example :
Logs only the first 10 mouse clicks on the right side of the screen (quite a random goal).
we would write something like this:
(NOTE : YOU MESSED THE GLOBAL SCOPE)
7
var clicks = 0;
document.addEventListener('click', function registerClicks(e) {
if (clicks < 10) {
if (e.clientX > window.innerWidth / 2) {
console.log(e.clientX, e.clientY);
clicks += 1;
}
} else {
document.removeEventListener('click', registerClicks);
}
});

8. Why Reactive Programming? Cont.
Using RxJS, we would write something like this:
https://codepen.io/anon/pen/veqgQL
Another example:
DRAG & DROP, https://codepen.io/joshblack/pen/zGZZjX?editors=1010 explanation
8
Rx.Observable.fromEvent(document, 'click')
.filter(function(c) {
return c.clientX > window.innerWidth / 2;
})
.take(10)
.subscribe(function(c) {
console.log(c.clientX, c.clientY)
})

9. Reactive VS Functional Programming
In functional programming, you manipulate functions just as easily as you manipulate other data values
like integers and strings, we call this functions being a first class citizen. The concept behind functional
programming is that each time you call a function with the same parameters, it returns the same result. In
order to accomplish this, functional programming languages must not hold any kind of state. The
advantage of this is that it makes code easier to test, more predictable, and therefore, in theory, more
reliable.
Reactive Programming
Reactive programming is programming with asynchronous data streams. For example, your twitter feed
would be a data stream, your click events, user inputs, caches, data structures. You listen to that stream
and 'react' accordingly. So, reactive programming involves programming with time flow and
computational events
9

10. Reactive V/S Functional Programming Cont.
source :
https://www.quora.com/What-is-difference-between-Functional-Reactive-Programming-Functional-Pr
ogramming-and-Reactive-Programming
Understanding :
reactive programming is functional programming, but takes streaming to a higher level, you'll deal with a
bunch of events and every time something happens, you'll be notified and you'll have a stream, instead of
a concrete object every time.
for example:
Promise.resolve({a: true}) will give you an object {a: true}
while Observable.fromArray([1, 2, 3]).subscribe((e) => {console.log(e)}) will give you 1, 2, 3
10

11. Why RxJS? What about Promises?
RxJS is a library for reactive programming using observables, to make it easier to compose asynchronous
or callback-based code
Promises are good for solving asynchronous operations such as querying a service with an
XMLHttpRequest, where the expected behavior is one value and then completion. The Reactive
Extensions for JavaScript unifies both the world of Promises, callbacks as well as evented data such as
DOM Input, Web Workers, Web Sockets. Once we have unified these concepts, this enables rich
composition.
11

12. Why RxJS? What about Promises? Cont.
observable for Promises
You are probably comfortable with promises, then you can adapt to Observables easily
Observables are part of ES6 features, where it deals with async code likewise of promise, but has little
more powers than promises
12
promise.then(
successCallBackFn,
errorCallBackFn);
observable.subscribe(
nextCallBackFn,
errorCallBackFn,
completeCallBackFn
)

13. Is it like a kinda Lodash?
Of course RxJS is a library, same as lodash, but RxJS deals more with events, async calls like streams,
whereas lodash is more of functional programming where the data gets transformed in each function,
and RxJS is Reactive Programming (HAHA, you have much terminologies yet to come), which takes
streaming to a higher level, you'll deal with a bunch of events and every time something happens.
13

14. What is Observables?
In ReactiveX an observer subscribes to an Observable. Then that observer reacts to whatever item or
sequence of items the Observable emits. This pattern provides concurrent operations because it does
not need to block while waiting for the Observable to emit objects, but instead it creates a sentry(a
soldier stationed to keep guard or to control access to a place.) in the form of an observer that stands
ready to react appropriately at whatever future time the Observable does so.
14

15. Operators Agony
1. Use the operator guide at http://reactivex.io/rxjs
2. Remember you don't have to Rx everything
3. Take the operators you know to whatever point you can and do the rest imperatively
15

16. Other Rx*’s
16

17. EXAMPLES
https://codepen.io/anon/pen/RLzVge
https://codepen.io/joshblack/pen/zGZZjX?editors=1010
https://gist.github.com/ravi-tj/47e14fa262700d62d5bdbee4b6fcf18e
17

18. Resources and References
rxjs thinking reactively
RxJS Observables Crash Course
https://www.youtube.com/watch?v=Tux1nhBPl_w
https://www.quora.com/What-is-functional-programming
18

19. Questions ?

20. Thanks
- Happy Coding