Deep dive into where Promises and Observables originate and why the Array.prototype.map function is called map. After understanding what functors and monads are we see the differences between Promises and Observables. Reactive Programming / Functional Programming

1. NO MORE PROMISES. LET'S RXJS
REACTIVE EXTENSIONS FOR JAVASCRIPT

2. A B O U T M E
{
"name": "Ilia Idakiev",
"experience": [
“Google Developer Expert (GDE)“,
"Developer & Co-founder @ HILLGRAND",
"Lecturer in 'Advanced JS' @ Sofia University",
"Contractor / Consultant",
"Public / Private Courses”
],
"involvedIn": [
"Angular Sofia", "SofiaJS / BeerJS",
]
}
!

3. FUNCTIONAL
PROGRAMMING

4. REACTIVE EXTENSIONS FOR JAVASCRIPT
FUNCTIONAL PROGRAMMING
▸ Functional programming is a programming paradigm
that treats computation as the evaluation of mathematical
functions and avoids changing-state and mutable data. It is
a declarative programming paradigm, which means
programming is done with expressions or declarations
instead of statements.

5. REACTIVE EXTENSIONS FOR JAVASCRIPT
IMPERATIVE VS DECLARATIVE PROGRAMMING
function getAdmins(users) {
const admins = [];
for (let i = 0; i < users.length; i++) {
const currentUser = users[i];
if (!currentUser.isAdmin) { continue; }
admins.push(currentUser);
}
return admins;
}
Imperative programming focuses on describing how a
program operates.
function getAdmins(users) {
return users.filter(
currentUser => currentUser.isAdmin
);
}
Declarative programming focuses on expressing the logic
of a computation without describing its control flow.

6. REACTIVE EXTENSIONS FOR JAVASCRIPT
FUNCTIONAL CONCEPTS
▸ Pure Functions
▸ Return the same value given the same arguments.
▸ Its evaluation has no side effects.
▸ Composition - pure functions can be composed.
▸ Immutability - don’t mutate state.
▸ Higher-order functions (Functions as first-class citizens)
▸ takes one or more functions as arguments.
▸ returns a function as its result.
▸ Currying and Partial Application - translating the evaluation of a function that takes multiple arguments into evaluating a
sequence of functions.
▸ Lazy evaluation - evaluate when needed.
and / or

7. REACTIVE EXTENSIONS FOR JAVASCRIPT
REFERENTIAL TRANSPARENCY
▸ An expression is called referentially transparent if it can be replaced with its
corresponding value without changing the program's behaviour. This requires
that the expression is pure, that is to say the expression value must be the same
for the same inputs and its evaluation must have no side effects.

8. REACTIVE EXTENSIONS FOR JAVASCRIPT
FUNCTIONAL PROGRAMMING ADVANTAGES
▸ Clean Code - Easy to test, debug and reason about (no side effects).
▸ Modularity - Breaking large problems into small parts.
▸ Reusability - Pure functions can be reused and composed.
▸ Efficiency - Lazy Evaluation (evaluate when needed)

9. ASYNCHRONY

10. REACTIVE EXTENSIONS FOR JAVASCRIPT
ASYNCHRONOUS JAVASCRIPT
▸ Continuation Passing Style (CPS)
▸ CPS with named callbacks (to reduce callback hell)
▸ Futures and Promises / async - await
▸ Async data streams - RxJS

11. FUTURES AND PROMISES

12. REACTIVE EXTENSIONS FOR JAVASCRIPT
▸ Futures and promises originated in functional programming and related
paradigms (such as logic programming) to decouple a value (a future) from
how it was computed (a promise), allowing the computation to be done
more flexibly, notably by parallelizing it.
WHERE DO PROMISES COME FROM?

13. REACTIVE EXTENSIONS FOR JAVASCRIPT
▸ A Promise is a proxy for a value not necessarily known when the promise is
created.
▸ It allows you to associate handlers with an asynchronous action's eventual
success value or failure reason.
▸ This lets asynchronous methods return values like synchronous methods:
instead of immediately returning the final value, the asynchronous method
returns a promise to supply the value at some point in the future.
PROMISES

14. REACTIVE EXTENSIONS FOR JAVASCRIPT
▸ Pending - initial state, neither fulfilled nor rejected.
▸ Fulfilled - the operation completed successfully.
▸ Rejected - the operation failed.
PROMISE STATES (STATE MACHINE)

15. REACTIVE EXTENSIONS FOR JAVASCRIPT
PROMISE EXAMPLE
const promise = new Promise(function (resolve, reject) {
setTimeout(function () {
const randomNumber = Math.floor(Math.random() * Math.floor(10));
if (randomNumber % 2 === 0) {
resolve('Success');
return;
}
reject('Error');
}, 300);
});
promise.then(console.log).catch(console.error);
Controlling the machine state

16. REACTIVE EXTENSIONS FOR JAVASCRIPT
PROMISE EXAMPLE (2)
Promise.resolve(10).then(x => x + 10).then(console.log);

17. WAIT A MINUTE
THIS LOOKS VERY SIMILAR TO…

18. REACTIVE EXTENSIONS FOR JAVASCRIPT
JS ARRAYS
[10].map(x => x + 1).forEach(console.log);

19. WHY IS IT CALLED MAP?

20. CATEGORY THEORY

21. REACTIVE EXTENSIONS FOR JAVASCRIPT
▸ Mathematical Abstractions - Helps us getting rid of details so we can look at
things a different way.
CATEGORY THEORY

22. REACTIVE EXTENSIONS FOR JAVASCRIPT
CATEGORIES
▸ A category consists of a collection of objects (just
abstractions) and morphisms (functions).
(X, Y, Z - objects)
▸ The morphisms must obey the following laws:
▸ They must me composable.
▸ Compositions must me associative.
▸ For each object a, there is an identity morphism.

23. REACTIVE EXTENSIONS FOR JAVASCRIPT
CATEGORY THEORY IN JAVASCRIPT
add(1, 1) // > 2 - persists type
add(1, 0) // > 1 - identity function
add(1, 2) === add(2, 1) // > 3 - commutative
add(add(1, 2), 3) === add(1, add(2, 3)); // > 6 - associative and composable
multiply(2, add(3, 4)) === add(multiply(2, 3), multiply(2, 4)) // > 14 - distributive

24. REACTIVE EXTENSIONS FOR JAVASCRIPT
FUNCTORS
▸ A structure-preserving mapping between categories.
▸ Let A and B be categories. A functor F from A to B is a mapping that:
▸ associates to each object a in A an object F(a) in B.
▸ associates to each morphism f in A a morphism F(f) in B such that the
following two conditions hold:
▸ F(ID(x)) = ID(F(X))
▸ F(g o f) = F(f) o F(g) for all morphisms f: x -> y, g: y -> z in A.

25. REACTIVE EXTENSIONS FOR JAVASCRIPT
CATEGORY THEORY OBJECTS IN JAVASCRIPT
const containerPrototype = {
map: function (fn) {
return Container(fn(this.value));
}
}
function Container(value) {
return Object.create(containerPrototype, { value: { value } });
}
console.log(Container(10).map(x => x + 100)); // > Container { value: 110 }

26. REACTIVE EXTENSIONS FOR JAVASCRIPT
CATEGORY THEORY OBJECTS IN JAVASCRIPT
Container(10).map(x => x + 100).map(x => '' + x); // > Container { value: '110' }

27. REACTIVE EXTENSIONS FOR JAVASCRIPT
CATEGORY THEORY OBJECTS IN JAVASCRIPT
[10].map(x => x + 100).map(x => '' + x);

28. REACTIVE EXTENSIONS FOR JAVASCRIPT
CATEGORY THEORY OBJECTS IN JAVASCRIPT
[10].map(x => x + 100).map(x => '' + x);
It’s a functor!

29. ARE PROMISES FUNCTORS?

30. REACTIVE EXTENSIONS FOR JAVASCRIPT
PROMISE EXAMPLE (3)
Promise.resolve(10).then(x => x + 100).then(x => '' + x); // > Promise { value: '110' }

31. REACTIVE EXTENSIONS FOR JAVASCRIPT
PROMISE EXAMPLE (4)
Promise.resolve(10).then(x => Promise.resolve(x + 100)).then(x => '' + x);
// > Promise { value: '110' }

32. REACTIVE EXTENSIONS FOR JAVASCRIPT
PROMISE EXAMPLE (4)
Promise.resolve(10).then(x => Promise.resolve(x + 100)).then(x => '' + x);
// > Promise { value: '110' }
It’s flattening the structure! It’s not a functor!

33. REACTIVE EXTENSIONS FOR JAVASCRIPT
MONADS
▸ An extended functor.
▸ It can be used as container to wrap values.
▸ It can flatten the structure.

34. WHY DO WE NEED MONADS
AND FUNCTORS?

35. REACTIVE EXTENSIONS FOR JAVASCRIPT
MAYBE FUNCTOR
const maybePrototype = {
map: function (fn) {
return this.value !== null ? Maybe(fn(this.value)) : Maybe(null);
}
}
function Maybe(value) {
return Object.create(maybePrototype, { value: { value } });
}
function matchFirst(string, regexp) {
return Maybe(string).map(string => string.match(regexp)).map(matches => matches[0]);
}
console.log(matchFirst(null, /test/)); // Maybe { value: null }
console.log(matchFirst('test', /rest/)); // Maybe { value: null }
console.log(matchFirst('test1test2', /testd/)); // Maybe { value: 'test1' }

36. REACTIVE EXTENSIONS FOR JAVASCRIPT
MAYBE FUNCTOR
const maybePrototype = {
map: function (fn) {
return this.value !== null ? Maybe(fn(this.value)) : Maybe(null);
}
}
function Maybe(value) {
return Object.create(maybePrototype, { value: { value } });
}
function matchFirst(string, regexp) {
return Maybe(string).map(string => string.match(regexp)).map(matches => matches[0]);
}
console.log(matchFirst(null, /test/)); // Maybe { value: null }
console.log(matchFirst('test', /rest/)); // Maybe { value: null }
console.log(matchFirst('test1test2', /testd/)); // Maybe { value: 'test1' }

37. REACTIVE EXTENSIONS FOR JAVASCRIPT
MAYBE FUNCTOR
const maybePrototype = {
map: function (fn) {
return this.value !== null ? Maybe(fn(this.value)) : Maybe(null);
}
}
function Maybe(value) {
return Object.create(maybePrototype, { value: { value } });
}
function matchFirst(string, regexp) {
return Maybe(string).map(string => string.match(regexp)).map(matches => matches[0]);
}
console.log(matchFirst(null, /test/)); // Maybe { value: null }
console.log(matchFirst('test', /rest/)); // Maybe { value: null }
console.log(matchFirst('test1test2', /testd/)); // Maybe { value: 'test1' }

38. REACTIVE EXTENSIONS FOR JAVASCRIPT
MAYBE FUNCTOR
const maybePrototype = {
map: function (fn) {
return this.value !== null ? Maybe(fn(this.value)) : Maybe(null);
}
}
function Maybe(value) {
return Object.create(maybePrototype, { value: { value } });
}
function matchFirst(string, regexp) {
return Maybe(string).map(string => string.match(regexp)).map(matches => matches[0]);
}
console.log(matchFirst(null, /test/)); // Maybe { value: null }
console.log(matchFirst('test', /rest/)); // Maybe { value: null }
console.log(matchFirst('test1test2', /testd/)); // Maybe { value: 'test1' }

39. REACTIVE EXTENSIONS FOR JAVASCRIPT
MAYBE FUNCTOR
const maybePrototype = {
map: function (fn) {
return this.value !== null ? Maybe(fn(this.value)) : Maybe(null);
}
}
function Maybe(value) {
return Object.create(maybePrototype, { value: { value } });
}
function matchFirst(string, regexp) {
return Maybe(string).map(string => string.match(regexp)).map(matches => matches[0]);
}
console.log(matchFirst(null, /test/)); // Maybe { value: null }
console.log(matchFirst('test', /rest/)); // Maybe { value: null }
console.log(matchFirst('test1test2', /testd/)); // Maybe { value: 'test1' }

40. REACTIVE EXTENSIONS FOR JAVASCRIPT
MAYBE FUNCTOR
const maybePrototype = {
map: function (fn) {
return this.value !== null ? Maybe(fn(this.value)) : Maybe(null);
}
}
function Maybe(value) {
return Object.create(maybePrototype, { value: { value } });
}
function matchFirst(string, regexp) {
return Maybe(string).map(string => string.match(regexp)).map(matches => matches[0]);
}
console.log(matchFirst(null, /test/)); // > Maybe { value: null }
console.log(matchFirst('test', /rest/)); // Maybe { value: null }
console.log(matchFirst('test1test2', /testd/)); // Maybe { value: 'test1' }

41. REACTIVE EXTENSIONS FOR JAVASCRIPT
MAYBE FUNCTOR
const maybePrototype = {
map: function (fn) {
return this.value !== null ? Maybe(fn(this.value)) : Maybe(null);
}
}
function Maybe(value) {
return Object.create(maybePrototype, { value: { value } });
}
function matchFirst(string, regexp) {
return Maybe(string).map(string => string.match(regexp)).map(matches => matches[0]);
}
console.log(matchFirst(null, /test/)); // > Maybe { value: null }
console.log(matchFirst('test', /rest/)); // > Maybe { value: null }
console.log(matchFirst('test1test2', /testd/)); // Maybe { value: 'test1' }

42. REACTIVE EXTENSIONS FOR JAVASCRIPT
MAYBE FUNCTOR
const maybePrototype = {
map: function (fn) {
return this.value !== null ? Maybe(fn(this.value)) : Maybe(null);
}
}
function Maybe(value) {
return Object.create(maybePrototype, { value: { value } });
}
function matchFirst(string, regexp) {
return Maybe(string).map(string => string.match(regexp)).map(matches => matches[0]);
}
console.log(matchFirst(null, /test/)); // > Maybe { value: null }
console.log(matchFirst('test', /rest/)); // > Maybe { value: null }
console.log(matchFirst('test1test2', /testd/)); // > Maybe { value: 'test1' }

43. SO WHAT ABOUT RXJS?

44. WHAT IS RXJS?

45. MARBLE TESTING RXJS STREAMS
REACTIVE EXTENSIONS FOR JAVASCRIPT
▸ RxJS is a library for reactive programming using
Observables, to make it easier to compose
asynchronous or callback-based code.

46. REACTIVE EXTENSIONS FOR JAVASCRIPT
CREATING AN OBSERVABLE (THE OLD WAY)
import 'rxjs/add/observable/of';
import ‘rxjs/add/operator/map';
of(10).map(x => x + 100).map(x => '' + x).subscribe(console.log);

47. REACTIVE EXTENSIONS FOR JAVASCRIPT
CREATING AN OBSERVABLE
import { of } from ‘rxjs';
import { map } from ‘rxjs/operators';
of(10).pipe(map(x => x + 100), map(x => '' + x)).subscribe(console.log);

48. IT’S A MONAD!

49. WHAT ARE THE DIFFERENCES
RXJS AND PROMISES?

50. REACTIVE EXTENSIONS FOR JAVASCRIPT
CREATING AN OBSERVABLE STREAM (1)
import { from } from ‘rxjs';
import { map } from ‘rxjs/operators';
const stream$ = from([1, 2, 3, 4]).pipe(map(x => x + 1));
stream$.subscribe(console.log)
// > 2
// > 3
// > 4
// > 5

51. REACTIVE EXTENSIONS FOR JAVASCRIPT
CREATING AN OBSERVABLE STREAM (2)
import { interval } from ‘rxjs';
import { publish } from ‘rxjs/operators’;
const connectableTimer = interval(1000).pipe(publish());
connectableTimer.connect();
setTimeout(function () {
connectableTimer.subscribe(console.log);
// > 4
// > 5
// > 6
// > 7
// ...
}, 5000)

52. REACTIVE EXTENSIONS FOR JAVASCRIPT
HOT AND COLD OBSERVABLES
▸ Cold - An observable is “cold” if its underlying producer is created and
activated during subscription.
▸ Hot - An observable is “hot” if its underlying producer is either created or
activated outside of subscription.

53. 1. OBSERVABLES ARE
STREAMS OF DATA(One or more values)

54. WHAT ELSE?

55. REACTIVE EXTENSIONS FOR JAVASCRIPT
COMMON THINGS THAT WE NEED
▸ debouncing
▸ cancelation
▸ retrying
▸ throttling
▸ timeouts
▸ detect only if something changed

56. RXJS HAS THEM ALL

57. 2. BETTER FLOW CONTROL
(using the rxjs operators and rxjs observable factories/combiners)

58. 3. OBSERVABLES ARE CANCELLABLE
(using unsubscribe)

59. 4. OBSERVABLES ARE LAZY
(we have to explicitly state that we want the observable to start)

60. WHAT IS COMMON ABOUT
RXJS AND PROMISES?

61. MARBLE TESTING RXJS STREAMS
WHAT IS COMMON ABOUT RXJS AND PROMISES?
▸ They are both monads.
▸ Both monads are used to capture the effect of latency.

62. WHY ARE THEY REACTIVE?

63. DEMO

64. MARBLE TESTING RXJS STREAMS
CONNECT
GitHub > https://github.com/iliaidakiev (/slides/ - list of future and past events)
Twitter > @ilia_idakiev

65. THANK YOU!