1. Everything is
composable

2. Hello!I am Victor Igor
You can find me at @victorvoid

3. 1.
Programming paradigms
A “new” perspective on modeling the flow of your software.

4. “
In practice, each paradigm comes with its
own way of thinking and there are
problems for which it is the best approach.

5. Programming paradigms
◍ Functional programming
◍ Object-oriented programming
◍ Logic programming
◍ Symbolic programming

6. Composability
The essence of software development is composition.

7. Composability
const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')

8. Composability
const doin_Thangs = str =>
_.chain(str)
.words()
.groupBy(s => s.length)
.orderBy(x => x.length)
.take(2)
.flatten()
.value()

9. Composability
const reactiveUpInHere = el =>
fromEvent(el, 'keyup')
.map(e => e.target.value)
.filter(text => text.length > 2)
.throttle(500)
.distinctUntilChanged()

10. Composability
(->> (range 1000000000000000000)
(filter even?)
(map inc)
(take 5)
(partition 2 1))
;;=> ((1 3) (3 5) (5 7) (7 9))

11. Composability
player
.unitWithinRange(2)
.where(UnitIs.Enemy)
.where(UnitIs.Tank)
.DoDamage(5)

12. Composability
const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')

13. Composability
const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')
‘Victor and Igor’

14. Composability
const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')
‘victor and igor’

15. Composability
const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')
[‘victor’,‘and’,‘igor’]

16. Composability
const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')
[‘victor’,‘and’,‘igor’]

17. Composability
const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')
[‘igor’,‘and’,‘victor’]

18. Composability
const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')
[‘igor’,‘victor’]

19. Composability
const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')
‘igorvictor’

20. Composability
const doThing = str => {
const lower = str.toLowerCase()
const words = lower.split(' ')
words.reverse()
for(let i in words) {
words[i] = words[i].trim()
}
let keepers = []
for(let i in words) {
if(words[i].length > 3) {
keepers.push(words[i])
}
}
return keepers.join('')
}

21. Composability
const doThing = str => {
const lower = str.toLowerCase()
const words = lower.split(' ')
words.reverse()
for(let i in words) {
words[i] = words[i].trim()
}
let keepers = []
for(let i in words) {
if(words[i].length > 3) {
keepers.push(words[i])
}
}
return keepers.join('')
}

22. Composability
const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')

23. Composability

24. Composability
“The major contributor to this complexity
in many systems is the handling of state
and the burden that this adds when trying
to analyse and reason about the system.”
Ben Moseley & Peter Marks
Out of the Pit 2006

25. Control flow
Composability

26. Composability
Code volume

27. Composability

28. Composability

29. Composability

30. Composability
const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')

33. Programming !== Math
Programming !== Math

34. Programming !== Math
try {
return f(x)
} catch(e) {
console.error(e)
}

35. Programming !== Math
if {
return f()
} else(e) {
return y
}

36. Programming !== Math
let stuff = [1, 2, 3]
stuff = [1, 2]

37. Programming !== Math
let stuff.splice(0, 2)
stuff.pop()

38. Programming !== Math
for(let thing in things) {
if(thing.amount > 100) keepers.push(thing.name)
}
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
while (i < 10) {
text += "The number is " + i;
i++;
}

39. Assignment
Callbacks
Loops
Side Effects
Branching
Errors

40. Programming !== Math
Programming !== Math

41. Programming != Math
Programming !== Math

42. f.g
Programming !== Math

43. f.g = x => f(g(x))
Programming !== Math

44. str.toUpperCase().trim()
Programming !== Math
trim(toUpperCase(str))

45. Category theory

46. Category Theory
What’s category theory?

47. What’s category theory?
Category Theory
Categories represent abstraction of other mathematical concepts.

48. The paradigm shift provoked by Einstein's
theory of relativity has brought the
realization that there is no single
perspective to see the world.

49. Category
Category Theory
objects

50. Category
Category Theory
objects
Arrows or morphisms

51. Category
Category Theory
objects
Arrows or morphisms
Domain
dom(f) f

52. Category
Category Theory
objects
Arrows or morphisms
Domain/codomain
dom(f) f
cod(f)

53. Category
Category Theory
objects
Arrows or morphisms
Domain/codomain
dom(f)
g
cod(f)

54. Category
Category Theory
objects
Arrows or morphisms
Domain/codomain
f
Composition
h

55. Category
Category Theory
objects
Arrows or morphisms
Domain/codomain
f
Composition
h
h . f

56. Category
Category Theory
objects
Arrows or morphisms
Domain/codomain
Composition
Identity

57. World Wide Web
Category Theory

58. World Wide Web
Category Theory
objects = webpages
Arrows = hyperlinks

59. World Wide Web
Category Theory
objects = webpages
Arrows = hyperlinks
Composition = Links don’t compose
Identity

60. World Wide Web
Category Theory
objects = nodes
Arrows = edges
Composition = Edges don’t compose
Identity
Graphs

61. Category Theory
objects = sets (or types)
Arrows = functions
Composition = function composition
Identity = identity function
Programming

62. Functors
Category Theory

63. Category Theory
Functors map between categories
Functors

64. Category Theory
A B
Category Category
Functor
F

65. Category Theory
Composition Law
F(g ∘ f) = F(g) ∘ F(f)
Identity Law
F(idA) = idF(A)
Functors laws

66. Category Theory
“Hey, I know what can be mapped
over. An array can be mapped
over — you can map a function over an
array!”

67. Category Theory
Identity
const f = [1,2,3]
f.map(x => x) //[1,2,3]

68. Category Theory
Composition
[1,2,3].map(x => f(g(x)))
=
[1,2,3].map(g).map(f)

69. Composability
const nextCharForNumberString = str => {
const trimmed = str.trim()
const number = parseInt(trimmed)
const nextNumber = number + 1
return String.fromCharCode(nextNumber)
}
nextCharForNumberString(' 70 ')
//'G'

70. Composability
const nextCharForNumberString = str =>
return [str.trim()]
.map(trimmed => new Number(trimmed))
.map(number => number + 1)
.map(n => String.fromCharCode(n))
nextCharForNumberString(' 70')
//['G']

71. Category Theory
Build your own Functor

72. Composability
const Box = x => ({
map: f => Box(f(x))
})

73. const Box = x => ({
map: f => Box(f(x))
})
const nextCharForNumberString = str =>
return Box(str.trim())
.map(trimmed => new Number(trimmed))
.map(number => number + 1)
.map(n => String.fromCharCode(n))
nextCharForNumberString(' 70') //Box('G')

74. const Box = x => ({
map: f => Box(f(x)),
fold: f => f(x)
})
const nextCharForNumberString = str =>
return Box(str.trim())
.map(trimmed => new Number(trimmed))
.map(number => number + 1)
.fold(n => String.fromCharCode(n))
nextCharForNumberString(' 70') //'G'

75. Assignment
Callbacks
Loops
Side Effects
Branching
Errors

76. Loops

77. filter
map
reduce

78. Assignment
Callbacks
Loops
Side Effects
Branching
Errors

79. Callbacks
Side effects

80. Promise(5).then(five => five + 2)
//Promise(7)
Promise(5).then(five => Promise(five + 2))
//Promise(7)
Promise(5).map(five => five + 2))
//Promise(7)

81. const doThing = () =>
fs.readFile('file.json', 'utf-8', (err, data) => {
if(err) throw err
const newdata = data.replace(/8/g, '6')
fs.writeFile('file2.json', newdata, (err, _) => {
if(err) throw err
console.log('success!')
}
}

82. const readFile = futurize(fs.readFile)
const writeFile = futurize(fs.writefile)
const doThing = () =>
readFile('file.json')
.map(data => data.replace('/8/g', '6')
.chain(replaced =>
writeFile('file2.json', replaced))

83. const readFile = futurize(fs.readFile)
const writeFile = futurize(fs.writefile)
const doThing = () =>
readFile('file.json')
.map(data => data.replace('/8/g', '6')
.chain(replaced =>
writeFile('file2.json', replaced))
doThing().fork(e => console.log(e),
r => console.log('success'))

84. const lib = username =>
getTweets(username)
.map(tweets => truncateTo130(tweets))
.chain(tweets => writeFile('tweets.json', tweets))
lib('@victorvoid')
.chain(f => saveToS3(f))
.fork(e => console.error(e),
r => console.log(r))

85. Assignment
Callbacks
Loops
Side Effects
Branching
Errors

86. Errors
Branching

87. Either
data Either a b = Left a | Right b

88. Left('no loaded').fold(() => 'uow, error!',
s => s.toUpperCase())
//'uow, error!'
Right('loaded').fold(() => 'uow, error!',
s => s.toUpperCase())
//'LOADED'

89. LeftOrRight('no loaded')
.fold(() => 'uow, error!',
s => s.toUpperCase())

90. Right(2)
.map(x => x + 4)
.map(x => x / 2)
.fold(() => 'uow, error!',
r => r + 1)
//4

91. Left('ignored')
.map(x => x + 4)
.map(x => x / 2)
.fold(() => 'uow, error!',
r => r + 1)
//'uow, error!'

92. const getConfig = () => {
try {
return fs.readFileSync('config.json')
} catch (e) {
return null
}
}
const getPort = () => {
const str = getConfig()
if(str) {
const parsed = JSON.parse(str)
return parsed.port
} else (e) {
return 3000
}
}

93. const getConfig = () =>
Either.try(fs.readFileSync)('config.json')
const getPort = () =>
getConfig()
.map(JSON.parse)
.fold(e => 3000, c => c.port)

94. const getThing = user => {
const address = user.address
if(address){
const zip = address.match(/(d{5})$/i)
if(zip){
const city = cityByZip(zip)
if(city){
return city
} else {
return 'cant find city'
}
}
}
return 'cant find city'
}

95. const getThing = user =>
fromNullable(user.address)
.chain(a => fromNullable(a.match(/(d{5})$/i)))
.chain(zip => fromNullable(cityByZip(zip)))
.fold(() => 'cant find city', city => city)

96. Assignment
Callbacks
Loops
Side Effects
Branching
Errors

98. React example
Component :: a -> JSX

99. a JSX bf g

100. a JSX bf g

101. a JSX
fb
g

102. const Comp = g => ({
fold: g,
contramap: f =>
Comp(x => g(f(x)))
})

103. const Comp = g => ({
fold: g,
contramap: f =>
Comp(x => g(f))
})
const heading = str =>
<h1>You are viewing {str}</h1>
const Title = Comp(heading).contramap(s => s.pageName)

104. const Comp = g => ({
fold: g,
contramap: f =>
Comp(x => g(f))
})
const heading = str =>
<h1>You are viewing {str}</h1>
const Title = Comp(heading).contramap(s => s.pageName)
Title.fold({ pageName: 'Home',
currUser: {id: '123', name: 'Victor'}})
//<h1>You are viewing Home</h1>

105. Learn a new language

106. Fantasy Land Specification

108. References
- Mostly-adequate-guide
- Professor-frisby-introduces-composable-functional-javascript
- Ramda-fantasy
- Functors, Applicatives, And Monads In Pictures
- Bartosz Milewski - Category Theory for programmers

109. Thanks!Any questions?
You can find me at @victorvoid & victorvoid.me