Functional composition can help to build flexible and readable APIs. It is a concept that can be translated into a variety of programming languages and domains. This talks explores functional composition through the lens of a JavaScript Frontend Developer. Composing all the things like JS Primitives, React Components or SVG Graphics. Working towards the wonderful world of a fully composable application.

1. Compose all the things
Thomas Sojka

9. @rollacaster
Thomas Sojka
Software Engineer
Munich

10. @rollacaster
CAN YOU
COMPOSE?
Thomas Sojka
Software Engineer
Munich

11. 1. Compose some things

12. 1. Compose some things
2. Compose all the things

13. 1. Compose some things
2. Compose all the things
3. Learn fundamentals of composition

14. 1. Compose some things
Unix Commands

15. cat grep o sort| |

16. sample.txt
Composition
Loop
Inheritance
Design Patterns
Facade
Decorator
Control Flow
sample.txt
cat grep o sort| |
Composition
Loop
Inheritance
Design Patterns
Facade
Decorator
Control Flow

17. Composition
Loop
Inheritance
Design Patterns
Facade
Decorator
Control Flow
cat grep o sort| |
sample.txt
Composition
Loop
Inheritance
Design Patterns
Facade
Decorator
Control Flow

18. Composition
Loop
Decorator
Control Flow
Composition
Loop
Decorator
Control Flow
cat grep o sort| |
sample.txt
Composition
Loop
Inheritance
Design Patterns
Facade
Decorator
Control Flow
Composition
Inheritance
Design Patterns
Facade
Decorator
Control Flow
Loop

19. Composition
Loop
Decorator
Control Flow
cat grep o sort| |
Composition
Loop
Decorator
Control Flow
Composition
Inheritance
Design Patterns
Facade
Decorator
Control Flow
sample.txt
Composition
Loop
Inheritance
Design Patterns
Facade
Decorator
Control Flow
Loop

20. Unix Commands
String Manipulation
1. Compose some things

21. const {
compose, !// Unix |
} = require('ramda')

22. const {
compose, !// Unix |
trim, toUpper, replace !// String Manipulation
} = require('ramda')

23. const = compose(toUpper, trim, replace('a', 'b'))upperCaseTrimmerReplacer
const {
compose, !// Unix |
trim, toUpper, replace !// String Manipulation
} = require('ramda')
const = compose(toUpper, trim)upperCaseTrimmer
const = compose(toUpper, replace('a', 'b'))upperCaseReplacer
const = compose(trim, replace('a', 'b'))trimmerReplacer

24. const {
compose, !// Unix |
trim, toUpper, replace !// String Manipulation
} = require('ramda')
upperCaseTrimmer
upperCaseReplacer
trimmerReplacer
upperCaseTrimmerReplacer
‘ a ‘
‘ a ‘
‘ a ‘
‘ a ‘
)
)
)
)
(
(
(
(

25. const {
compose, !// Unix |
trim, toUpper, replace !// String Manipulation
} = require('ramda')
‘ a ‘
‘ a ‘
‘ a ‘
‘ a ‘
)
)
)
)
upperCaseTrimmer
upperCaseReplacer
trimmerReplacer
upperCaseTrimmerReplacer(
(
(
(

26. const {
compose, !// Unix |
trim, toUpper, replace !// String Manipulation
} = require('ramda')
‘ B ‘
‘b’
‘B’
‘A’
)
)
)
)
upperCaseTrimmer
upperCaseReplacer
trimmerReplacer
upperCaseTrimmerReplacer(
(
(
(
‘ a ‘
‘ a ‘
‘ a ‘
‘ a ‘

27. ComponentsUnix Commands
String Manipulation
1. Compose some things

28. by Kent C. Dodds
Primitives to build simple, flexible,
WAI-ARIA compliant React
autocomplete/dropdown/select/
combobox components
Downshift

29. by Kent C. Dodds
Primitives to build simple, flexible,
WAI-ARIA compliant React
autocomplete/dropdown/select/
combobox components
Downshift

30. React components for efficiently
rendering large lists and tabular data
react-virtualizedby Brian Vaughnby Kent C. Dodds
Primitives to build simple, flexible,
WAI-ARIA compliant React
autocomplete/dropdown/select/
combobox components
Downshift

31. React components for efficiently
rendering large lists and tabular data
react-virtualizedby Brian Vaughnby Kent C. Dodds
Primitives to build simple, flexible,
WAI-ARIA compliant React
autocomplete/dropdown/select/
combobox components
Downshift

32. React components for efficiently
rendering large lists and tabular data
react-virtualizedby Brian Vaughnby Kent C. Dodds
Primitives to build simple, flexible,
WAI-ARIA compliant React
autocomplete/dropdown/select/
combobox components
Downshift

33. React components for efficiently
rendering large lists and tabular data
react-virtualizedby Brian Vaughnby Kent C. Dodds
Primitives to build simple, flexible,
WAI-ARIA compliant React
autocomplete/dropdown/select/
combobox components
Downshift

34. Downshift
react-virtualized

35. <Downshift
inputValue={inputValue}
onStateChange={this.handleStateChange}
itemCount={items.length}>
{({ getInputProps, getItemProps, isOpen}) !=> (
<div>
<input {!!...getInputProps()} !/>
{isOpen ? (
<ReactVirtualized.List
rowRenderer={({ index }) !=> (
items[index].name}!/>
) : null}
!</div>
)}
!</Downshift>
Downshift
react-virtualized

36. <Downshift
inputValue={inputValue}
onStateChange={this.handleStateChange}
itemCount={items.length}>
{({ getInputProps, getItemProps, isOpen}) !=> (
<div>
<input {!!...getInputProps()} !/>
{isOpen ? (
<ReactVirtualized.List
rowRenderer={({ index }) !=> (
items[index].name}!/>
) : null}
!</div>
)}
!</Downshift>
Downshift
react-virtualized

37. Application Developers can choose and
replace features

38. Library Maintainers can focus on one
key feature
Application Developers can choose and
replace features

39. Components CSSUnix Commands
String Manipulation
1. Compose some things

47. by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

48. by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

49. <a class="bg-blue white br1 f6
ph3 pv2 link dim“
href=“#">
Button Text
!</a>
by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

50. <a class="bg-blue white br1 f6
ph3 pv2 link dim“
href=“#">
Button Text
!</a>
by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

51. <a class="bg-blue white br1 f6
ph3 pv2 link dim“
href=“#">
Button Text
!</a>
by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

52. <a class="bg-blue white br1 f6
ph3 pv2 link dim“
href=“#">
Button Text
!</a>
by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

53. <a class="bg-blue white br1 f6
ph3 pv2 link dim“
href=“#">
Button Text
!</a>
by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

54. <a class="bg-blue white br1 f6
ph3 pv2 link dim“
href=“#">
Button Text
!</a>
by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

55. <a class="bg-blue white br1 f6
ph3 pv2 link dim“
href=“#">
Button Text
!</a>
by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

56. <a class="bg-blue white br1 f6
ph3 pv2 link dim“
href=“#">
Button Text
!</a>
by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

57. <a class="bg-blue white br1 f6
ph3 pv2 link dim“
href=“#">
Button Text
!</a>
by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

58. <a class="bg-blue white br1 f6
ph3 pv2 link dim“
href=“#">
Button Text
!</a>
by Adam Morse
Create fast loading, highly readable,
and 100% responsive interfaces with
as little CSS as possible.
TACHYONS

59. CSS never grow

60. CSS never grow
Easy to be consistent

61. Components CSS
Graphics
Unix Commands
String Manipulation
1. Compose some things

63. Build shapes

64. Build shapes

65. Build shapes

66. Rotate vertical ellipse
Build shapes

67. Build shapes
Rotate vertical ellipse

68. Rotate vertical ellipse
Rotate all ellipses
Build shapes

69. Build shapes
Rotate vertical ellipse
Rotate all ellipses

70. DEMO

71. Components CSS
Graphics
Unix Commands
String Manipulation
1. Compose some things

72. Components CSS
Graphics
Unix Commands
String Manipulation
2. Compose all the things
1. Compose some things

73. Unix Commands Components CSS
GraphicsString Manipulation

74. Unix Commands Components CSS
GraphicsString Manipulation
Function

75. Function
Unix Commands Components CSS
GraphicsString Manipulation

76. Function
Unix Commands Components CSS
GraphicsString Manipulation

77. Function
Unix Commands Components CSS
Graphics
const MyDiv = ({children}) !=>
<div>{children}!</div>
String Manipulation

78. Function
Unix Commands Components CSS
GraphicsString Manipulation
const MyDiv = ({children}) !=>
<div>{children}!</div>
const addClass = (el, cl) !=>
el.classList.add(cl)

79. Function
Unix Commands Components CSS
GraphicsString Manipulation
const MyDiv = ({children}) !=>
<div>{children}!</div>
const addClass = (el, cl) !=>
el.classList.add(cl)

80. Function
Unix Commands Components CSS
Graphics
const MyDiv = ({children}) !=>
<div>{children}!</div>
const allTheThings = c(genHtml, VList(blueRow), toArray, cat)
String Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)

81. Function
Unix Commands Components CSS
Graphics
const allTheThings = c(genHtml, VList(blueRow), toArray, cat)
String Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

82. Function
Unix Commands Components CSS
Graphics
const allTheThings = c(genHtml, VList(blueRow), toArray, cat)
String Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

83. Function
Unix Commands Components CSS
Graphics
const allTheThings = c(genHtml, VList(blueRow), toArray, cat)
String Manipulation
const MyDiv = ({children}) !=>
<div>{children}!</div>
const addClass = (el, cl) !=>
el.classList.add(cl)

84. Function
Unix Commands Components CSS
Graphics
const allTheThings = c(genHtml, VList(blueRow), toArray, cat)
String Manipulation
const MyDiv = ({children}) !=>
<div>{children}!</div>
const addClass = (el, cl) !=>
el.classList.add(cl)

85. Function
Unix Commands Components CSS
Graphics
const allTheThings = c(genHtml, VList(blueRow), toArray, cat)
String Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

86. Function
const allTheThings = c(genHtml, VList(blueRow), toArray, cat)
allTheThings('sample.txt')
Unix Commands Components CSS
GraphicsString Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

88. Function
Unix Commands Components CSS
GraphicsString Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

89. Function
Unix Commands Components CSS
GraphicsString Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

90. Function
Unix Commands Components CSS
GraphicsString Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

91. Function
Unix Commands Components CSS
GraphicsString Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

92. Function
Unix Commands Components CSS
GraphicsString Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

93. Function
Unix Commands Components CSS
GraphicsString Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

94. Function
Unix Commands Components CSS
GraphicsString Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

95. Unix Commands Components CSS
Graphics
Function
…
String Manipulation
const addClass = (el, cl) !=>
el.classList.add(cl)
const MyDiv = ({children}) !=>
<div>{children}!</div>

96. 3. Learn fundamentals of composition
2. Compose all the things
1. Compose some things

97. 2. Compose all the things
Pure Functions
1. Compose some things
3. Learn fundamentals of composition

98. Pure Functions
return the same output for the same input and
are free of side effects

99. Pure Functions

100. Pure Functions
function draw() {
rect(110, 0, 100, 100)
coloredRect(100, 100)
}

101. Pure Functions
function draw() {
rect(110, 0, 100, 100)
coloredRect(100, 100)
}
const coloredRect = (width, height) !=> {
fill(‘#b4881d')
rect(0, 0, width, height)
}

102. Pure Functions
function draw() {
rect(110, 0, 100, 100)
coloredRect(100, 100)
}
const coloredRect = (width, height) !=> {
fill(‘#b4881d')
rect(0, 0, width, height)
}

103. Pure Functions
function draw() {
rect(110, 0, 100, 100)
coloredRect(100, 100)
}
const coloredRect = (width, height) !=> {
fill(‘#b4881d')
rect(0, 0, width, height)
}

104. 2. Compose all the things
Pure Functions Immutability
1. Compose some things
3. Learn fundamentals of composition

105. Immutability
Does not change any existing data but creates
new data for each change

106. Immutability
const rotate = rotation !=> element !=> ({
!!...element,
rotation: element.rotation ?
element.rotation + rotation : rotation
})) Immutable

107. Immutability
const rotate = rotation !=> element !=> {
element.rotation = element.rotation ?
element.rotation + rotation :
rotation
return element }
const rotate = rotation !=> element !=> ({
!!...element,
rotation: element.rotation ?
element.rotation + rotation : rotation
})) Immutable
Mutable

108. Immutability
const rotate = rotation !=> element !=> {
element.rotation = element.rotation ?
element.rotation + rotation :
rotation
return element }
const rotate = rotation !=> element !=> ({
!!...element,
rotation: element.rotation ?
element.rotation + rotation : rotation
}))
Mutable
Immutable

109. • Mostly Adequate Guide to Functional Programming -
Professor Frisby (https://drboolean.gitbooks.io/
mostly-adequate-guide)
• Functional programming design patterns - Scott
Wlaschin (https://www.youtube.com/watch?
v=E8I19uA-wGY)
• Power of composition - Scott Wlaschin (https://
vimeo.com/254635723)
• Functional Programming Fundamentals - Dr. Erik
Meijer (https://channel9.msdn.com/Series/C9-
Lectures-Erik-Meijer-Functional-Programming-
Fundamentals/Lecture-Series-Erik-Meijer-Functional-
Programming-Fundamentals-Chapter-1)
Want to learn more?
• Oh composable world - Brian Lonsdorf (https://
www.youtube.com/watch?v=SfWR3dKnFIo)
• Let's make a monad - Drew Tipson (https://
medium.com/@dtipson/hey-let-s-make-a-monad-
e276802fdb0c#.qw77medgs)
• Building a Better Promise - Drew Tipson (https://
medium.com/@dtipson/building-a-better-
promise-3dd366f80c16)
https://tiny.cc/
compose-all-the-
things

110. Emacs
JavaScript
Functional Programming
Clojure
Elm
Generative Art
React
@rollacaster
Thomas Sojka
Software Engineer
Munich
https://tiny.cc/compose-all-the-things