"Can unfamiliar pattern from world of statically typed functional languages improve JavaScript world? For sure YES! The elastic nature of JavaScript can handle great ideas from many alien worlds. With a little help of modern tools like ​monet.js​ and ​TypeScript​ we can achieve awesomely descriptive aesthetics of our code and drop some imperative bloat." On 19 march 2016 Kuba Strojewski from Evojam gave a speech about monads on meet.js summit JavaScript Conference. Here's his slide deck.

1. Awesomely descriptive JavaScript
with Monads

2. Theory

3. Monad laws
return a >>= f ≡ f a
m >>= return ≡ m
(m >>= f) >>= g ≡ m >>= (x -> f x >>= g)

4. Monad laws

5. Practical theory

7. V E G E T A B L E
A
L
U
E

10. P => M<S>
f

11. =>
unit
P => M<P>

12. ( , ) =>
bind
( M<P> , P => M<S> ) => M<S>

13. ( M<P> , P => M<S> ) => M<S>M<P> P => M<S> M<S>
extract
value
bind
function
m(x)
x
x => m(y) m(y)
bind

14. Monad laws (JavaScript)
bind( unit(v) , f ) ≡ f(v)
bind( monad , unit ) ≡ monad
bind( bind( monad , f ) , g ) ≡
bind( monad, v => bind( f(v) , g ) )

15. monet.js

16. UNIT
Identity(x)
Maybe.Some(x)
Maybe.None()
Either.Left(e)
Either.Right(x)
List(x, Nil)
monad.bind(f)
monad.flatMap(f)
monad.chain(f)
BIND

17. Monad laws (monet.js / Identity)
Identity(v).flatMap(f) ≡ f(v)
id.flatMap(Identity) ≡ id
id.flatMap(f).flatMap( g ) ≡
id.flatMap(v => f(v).flatMap(g))

18. Practice: Identity

19. UNIT
Identity(x)
Maybe.Some(x)
Maybe.None()
Either.Left(e)
Either.Right(x)
List(x, Nil)
monad.bind(f)
monad.flatMap(f)
monad.chain(f)
BIND

20. var pepperInABowl = getBowlOf('pepper', 'red');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

22. const mixInABowl = getBowlOf('pepper')
.flatMap(slice)
.faltMap(silcedPepper => getBowlOf('tomato')
.flatMap(slice)
.faltMap(mixedTomato =>
mix(silcedPepper , mixedTomato)));

24. But HOW ?

25. interface Bowl<V> {
get(): V;
}
getBowlOf<V>(name: string): Bowl<V>;
slice<S>(vegetable: Vege): Bowl<S>;
mix<M>(...ingredients): Bowl<M>;

26. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

27. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

28. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

29. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

30. monet.js
Identity( … )

31. type Op<A, B> = (val:A) => Bowl<B>;
interface Bowl<V> {
get(): V;
flatMap<S>(f: Op<V, S>): Bowl<S>;
}

32. goo.gl/dh9DrZ

33. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

34. const slicedPepperInABowl =
getBowlOf('pepper').flatMap(slice);

35. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

36. const slicedPepperInABowl =
getBowlOf('pepper').flatMap(slice);
const slicedTomatoInABowl =
getBowlOf('tomato').flatMap(slice);

37. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

38. const slicedPepperInABowl =
getBowlOf('pepper').flatMap(slice);
const mixInABowl = getBowlOf('pepper')
.flatMap(slice)
.faltMap(silcedPepper =>
mix(silcedPepper , slicedPepperInABowl.get()));

39. const slicedPepperInABowl =
getBowlOf('pepper').flatMap(slice);
const mixInABowl = getBowlOf('pepper')
.flatMap(slice)
.flatMap(silcedPepper => slicedPepperInABowl
.flatMap(mixedTomato =>
mix(silcedPepper , mixedTomato)));

40. const mixInABowl = getBowlOf('pepper')
.flatMap(slice)
.faltMap(silcedPepper => getBowlOf('tomato')
.flatMap(slice)
.flatMap(mixedTomato =>
mix(silcedPepper , mixedTomato)));

41. var pepperInABowl = getBowlOf('pepper', 'red');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

42. Practice: Maybe

43. UNIT
Identity(x)
Maybe.Some(x)
Maybe.None()
Either.Left(e)
Either.Right(x)
List(x, Nil)
monad.bind(f)
monad.flatMap(f)
monad.chain(f)
BIND

45. let spiceMix;
const salt = getSpice('salt');
let coriander = getSpice('coriander');
if (coriander) {
coriander = crush(coriander);
}
if (coriander && salt && isPowdered(salt)) {
spiceMix = mixSpice(salt , coriander);
}
spiceMix = vegeta;

46. let spiceMix;
const salt = getSpice('salt');
let coriander = getSpice('coriander');
if (coriander) {
coriander = crush(coriander);
}
if (coriander && salt && isPowdered(salt)) {
spiceMix = mixSpice(salt , coriander);
}
spiceMix = vegeta;

47. const spiceMix = getSpice('salt').filter(isPowdered)
.flatMap(salt =>
getSpice('coriander').map(crush)
.flatMap(coriander =>
mixSpice(salt , coriadner)))
.orJust(vegeta);

48. But HOW ?

49. getSpice<V>(name: string): Maybe<V>;
crush(spice: S): S;
isPowdered(spice: S): boolean;

51. getSpice<V>(name: string): Maybe<V>;
crush(spice: S): S;
isPowdered(spice: S): boolean;

53. getSpice<V>(name: string): Maybe<V>;
crush(spice: S): S;
isPowdered(spice: S): boolean;

54. monet.js
Maybe

55. interface Maybe<T> {
flatMap<V>(fn: (val: T) => Maybe<V>): Maybe<V>;
map<V>(fn: (val: T) => V): Maybe<V>;
filter(fn: (val: T) => boolean): Maybe<T>;
orJust(val: T): T;
}

56. const silkySalt = getSpice('salt').filter(isPowdered);
const crushedCoriander = getSpice('coriander').map(crush);
const spiceMixMaybe = silkySalt.flatMap(salt =>
crushedCoriander.flatMap(coriander =>
mixSpice( salt , coriadner )));
const spiceMix = spiceMixMaybe.orJust(vegeta);

57. const crushedCoriander = getSpice('coriander').map(crush);
const spiceMixMaybe =
getSpice('salt').filter(isPowdered).flatMap(salt =>
crushedCoriander.flatMap(coriander =>
mixSpice( salt , coriadner )));
const spiceMix = spiceMixMaybe.orJust(vegeta);

58. const spiceMixMaybe =
getSpice('salt').filter(isPowdered).flatMap(salt =>
getSpice('coriander').map(crush).flatMap(coriander =>
mixSpice( salt , coriadner )));
const spiceMix = spiceMixMaybe.orJust(vegeta);

59. const spiceMixMaybe = getSpice('salt').filter(isPowdered)
.flatMap(salt =>
getSpice('coriander').map(crush)
.flatMap(coriander =>
mixSpice( salt , coriadner )));
const spiceMix = spiceMixMaybe.orJust(vegeta);

60. const spiceMix = getSpice('salt').filter(isPowdered)
.flatMap(salt =>
getSpice('coriander').map(crush)
.flatMap(coriander =>
mixSpice( salt , coriadner )));
.orJust(vegeta)

61. const spiceMix = getSpice('salt')
.filter(isPowdered)
.flatMap(salt =>
getSpice('coriander')
.map(crush)
.flatMap(coriander =>
mixSpice(salt , coriadner)))
.orJust(vegeta);

62. null

63. getSpice<V>(name: string): Maybe<V> {
let spice = locker.get(name);
if (spice != null) {
return Some(spice);
}
return None();
}

64. getSpice<V>(name: string): Maybe<V> {
const spice = locker.get(name);
if (spice != null) {
return Some(spice);
}
return None();
}

65. getSpice<V>(name: string): Maybe<V> {
const spice = locker.get(name);
if (spice != null) {
return … ?
}
return None();
}

66. monet.js
Some( … )

67. getSpice<V>(name: string): Maybe<V> {
const spice = locker.get(name);
if (spice != null) {
return Some(spice);
}
return None();
}

68. monet.js
None()

69. getSpice<V>(name: string): Maybe<V> {
const spice = locker.get(name);
if (spice != null) {
return Some(spice);
}
return None();
}

70. monet.js
.fromNull()

71. getSpice<V>(name: string): Maybe<V> {
return Maybe.fromNull(
locker.get(name)
);
}

73. goo.gl/cvGVeo

74. const saladBowl = mixInABowl
.flatMap(mixedVegetables =>
mix(mixedVegetables, spiceMix));

75. e a t i t

76. Monads
Identity
Maybe
Either
Validation
List
NEL
Reader
Free
IO
?

77. Monads
Identity
Maybe
Either
Validation
List
NEL
Reader
Free
IO
Promise

78. T H X

79. Jakub . Strojewski @gmail.com
u l f r y k