In this talk I introduced Functional Reactive Programming and ELM and finished off with a live demo building a complete game of snake in Elm. Code for the demo can be found at : https://github.com/theburningmonk/elm-snake

1. My adventure with ELM
SCORE 42
by Yan Cui

2. agenda

3. Hi, my name is Yan Cui.

5. I’m not an expert on Elm.

7. Function Reactive
Programming?

8. Value over Time

9. Time
Value

10. Time
Value
Signal

11. Move Up
Move Down

12. private var arrowKeyUp:Bool;!
private var arrowKeyDown:Bool;!
!
private var platform1:Platform;!
private var platform2:Platform;!
private var ball:Ball;

13. function keyDown(event:KeyboardEvent):Void
{!
! if (currentGameState == Paused &&!
! ! event.keyCode == 32) {!
! ! setGameState(Playing);!
! } else if (event.keyCode == 38) {!
! ! arrowKeyUp = true;!
! } else if (event.keyCode == 40) {!
! ! arrowKeyDown = true;!
! }!
}

14. function keyUp(event:KeyboardEvent):Void {!
! if (event.keyCode == 38) {!
! ! arrowKeyUp = false;!
! } else if (event.keyCode == 40) {!
! ! arrowKeyDown = false;!
! }!
}

15. function everyFrame(event:Event):Void {!
! if(currentGameState == Playing){!
! ! if (arrowKeyUp) {!
! ! ! platform1.y -= platformSpeed;!
! ! }!
! ! if (arrowKeyDown) {!
! ! ! platform1.y += platformSpeed;!
! ! }!
! ! if (platform1.y < 5) platform1.y = 5;!
! ! if (platform1.y > 395) platform1.y = 395;!
! }!
}

16. function everyFrame(event:Event):Void {!
! if(currentGameState == Playing){!
! ! if (arrowKeyUp) {!
! ! ! platform1.y -= platformSpeed;!
! ! }!
! ! if (arrowKeyDown) {!
! ! ! platform1.y += platformSpeed;!
! ! }!
! ! if (platform1.y < 5) platform1.y = 5;!
! ! if (platform1.y > 395) platform1.y = 395;!
! }!
}

17. source files
state changes

18. source files execution

19. source files execution

20. mental model
input state new state behaviour
{ x; y } { x; y-speed }
{ x; y } { x; y+speed }
timer { x; y } { x; y } draw platform
… … … …

21. transformation
let y = f(x)
Imperative Functional
x.f()
mutation

22. “one thing I’m discovering
is that transforming data is
easier to think about than
maintaining state.”
!
- Dave Thomas

23. transformations
simplify problem
decomposition

24. Move Up
Move Down

25. type alias Platform = {x:Int, y:Int}!
defaultPlatform = {x=5, y=0}!
!
delta = Time.fps 20!
input = Signal.sampleOn delta Keyboard.arrows!
!
cap x = max 5 <| min x 395!
!
p1 : Signal Platform!
p1 = foldp ({x, y} s -> {s | y <- cap <| s.y + 5*y}) !
! defaultPlatform!
! input

26. type alias Platform = {x:Int, y:Int}!
defaultPlatform = {x=5, y=0}!
!
delta = Time.fps 20!
input = Signal.sampleOn delta Keyboard.arrows!
!
cap x = max 5 <| min x 395!
!
p1 : Signal Platform!
p1 = foldp ({x, y} s -> {s | y <- cap <| s.y + 5*y}) !
! defaultPlatform!
! input

27. type alias Platform = {x:Int, y:Int}!
defaultPlatform = {x=5, y=0}!
!
delta = Time.fps 20!
input = Signal.sampleOn delta Keyboard.arrows!
!
cap x = max 5 <| min x 395!
!
p1 : Signal Platform!
p1 = foldp ({x, y} s -> {s | y <- cap <| s.y + 5*y}) !
! defaultPlatform!
! input

28. UP! ! ! { x=0, y=1 }!
DOWN! ! { x=0, y=-1 }!
LEFT!! ! { x=-1, y=0 }!
RIGHT! ! { x=1, y=0 }
Keyboard.arrows

29. type alias Platform = {x:Int, y:Int}!
defaultPlatform = {x=5, y=0}!
!
delta = Time.fps 20!
input = Signal.sampleOn delta Keyboard.arrows!
!
cap x = max 5 <| min x 395!
!
p1 : Signal Platform!
p1 = foldp ({x, y} s -> {s | y <- cap <| s.y + 5*y}) !
! defaultPlatform!
! input

30. type alias Platform = {x:Int, y:Int}!
defaultPlatform = {x=5, y=0}!
!
delta = Time.fps 20!
input = Signal.sampleOn delta Keyboard.arrows!
!
cap x = max 5 <| min x 395!
!
p1 : Signal Platform!
p1 = foldp ({x, y} s -> {s | y <- cap <| s.y + 5*y}) !
! defaultPlatform!
! input

31. type alias Platform = {x:Int, y:Int}!
defaultPlatform = {x=5, y=0}!
!
delta = Time.fps 20!
input = Signal.sampleOn delta Keyboard.arrows!
!
cap x = max 5 <| min x 395!
!
p1 : Signal Platform!
p1 = foldp ({x, y} s -> {s | y <- cap <| s.y + 5*y}) !
! defaultPlatform!
! input

32. type alias Platform = {x:Int, y:Int}!
defaultPlatform = {x=5, y=0}!
!
delta = Time.fps 20!
input = Signal.sampleOn delta Keyboard.arrows!
!
cap x = max 5 <| min x 395!
!
p1 : Signal Platform!
p1 = foldp ({x, y} s -> {s | y <- cap <| s.y + 5*y}) !
! defaultPlatform!
! input

33. type alias Platform = {x:Int, y:Int}!
defaultPlatform = {x=5, y=0}!
!
delta = Time.fps 20!
input = Signal.sampleOn delta Keyboard.arrows!
!
cap x = max 5 <| min x 395!
!
p1 : Signal Platform!
p1 = foldp ({x, y} s -> {s | y <- cap <| s.y + 5*y}) !
! defaultPlatform!
! input

34. Rx Dart Elm
Observable Stream Signal
= =

35. see also http://bit.ly/1HPM3ul

38. Idea See in Action

42. see also http://bit.ly/1wV46XS

43. Elm Basics

44. add x y = x + y

45. add : Int -> Int -> Int
add x y = x + y

46. calcAngle start end =
let
distH
= end.x - start.x
distV
= end.y - start.y
in atan2 distV distH

47. calcAngle start end =
let
distH
= end.x - start.x
distV
= end.y - start.y
in atan2 distV distH

48. calcAngle start end =
let
distH
= end.x - start.x
distV
= end.y - start.y
in atan2 distV distH

49. multiply x y
= x * y
triple = multiply 3

50. multiply x y
= x * y
triple = multiply 3

51. double list = List.map (x -> x * 2) list

52. double list = List.map ((*) 2) list

53. tuple1 = (2,“three”)
tuple2 = (2,“three”, [4, 5])

54. tuple4 = (,) 2 “three”
tuple5 = (,,) 2 “three” [4, 5]

55. x = { age=42, name=“foo” }

56. lightweight, labelled
data structure

57. x.age
x.name
-- 42
-- “foo”

58. x.age
x.name
-- 42
-- “foo”
.age x
.name x
-- 42
-- “foo”

59. -- clone and update
y = { x | name <- "bar" }

60. type alias Character =
{ age : Int, name : String }

61. type alias Named a = { a | name : String }
type alias Aged a = { a | age : Int }

62. lady : Named ( Aged { } )
lady = { name=“foo”, age=42 }

63. getName : Named x -> String
getName { name } = name

64. getName : Named x -> String
getName { name } = name
!
getName lady
-- “foo”

65. type Status = Flying Pos Speed
| Exploding Radius
| Exploded

66. aka.
“sums-and-products”
data structures

67. type Status = Flying Pos Speed
| Exploding Radius
| Exploded
sums :
choice between variants of a type

68. products :
tuple of types
type Status = Flying Pos Speed
| Exploding Radius
| Exploded

69. drawCircle x y radius =
circle radius
|> filled (rgb 150 170 150)
|> alpha 0.5
|> move (x, y)

70. drawCircle x y radius =
circle radius
|> filled (rgb 150 170 150)
|> alpha 0.5
|> move (x, y)
filled : Color -> Shape -> Form

71. drawCircle x y radius =
circle radius
|> filled (rgb 150 170 150)
|> alpha 0.5
|> move (x, y)

72. drawCircle x y radius =
circle radius
|> filled (rgb 150 170 150)
|> alpha 0.5
|> move (x, y)

73. “…a clean design is one that
supports visual thinking so
people can meet their
informational needs with a
minimum of conscious effort.”
!
- Daniel Higginbotham
(www.visualmess.com)

74. Whilst talking with an ex-colleague, a question came up on how to implement the Stable Marriage
problem using a message passing approach. Naturally, I wanted to answer that question with
Erlang!!
!
Let’s first dissect the problem and decide what processes we need and how they need to interact
with one another.!
!
The stable marriage problem is commonly stated as:!
Given n men and n women, where each person has ranked all members of the opposite sex with a
unique number between 1 and n in order of preference, marry the men and women together such
that there are no two people of opposite sex who would both rather have each other than their
current partners. If there are no such people, all the marriages are “stable”. (It is assumed that the
participants are binary gendered and that marriages are not same-sex).!
From the problem description, we can see that we need:!
* a module for man!
* a module for woman!
* a module for orchestrating the experiment!
In terms of interaction between the different modules, I imagined something along the lines of…
2.top-to-bottom
1.left-to-right
how we read ENGLISH

75. public void DoSomething(int x, int y)!
{!
Foo(y,!
Bar(x,!
Zoo(Monkey())));!
}
how we read CODE

76. public void DoSomething(int x, int y)!
{!
Foo(y,!
Bar(x,!
Zoo(Monkey())));!
}
2.bottom-to-top
1.right-to-left
how we read CODE

77. Whilst talking with an ex-colleague, a question came up on how to
implement the Stable Marriage problem using a message passing approach.
Naturally, I wanted to answer that question with Erlang!!
!
Let’s first dissect the problem and decide what processes we need and how
they need to interact with one another.!
!
The stable marriage problem is commonly stated as:!
Given n men and n women, where each person has ranked all members of
the opposite sex with a unique number between 1 and n in order of
preference, marry the men and women together such that there are no two
people of opposite sex who would both rather have each other than their
current partners. If there are no such people, all the marriages are “stable”.
(It is assumed that the participants are binary gendered and that marriages
are not same-sex).!
From the problem description, we can see that we need:!
* a module for man!
* a module for woman!
* a module for orchestrating the experiment!
In terms of interaction between the different modules, I imagined something
along the lines of…
2.top-to-bottom
1.left-to-right
how we read ENGLISH
public void DoSomething(int x, int y)!
{!
Foo(y,!
Bar(x,!
Zoo(Monkey())));!
}
2.top-to-bottom 1.right-to-left
how we read CODE

78. “…a clean design is one that
supports visual thinking so
people can meet their
informational needs with a
minimum of conscious effort.”

79. drawCircle x y radius =
radius |> circle
|> filled (rgb 150 170 150)
|> alpha 0.5
|> move (x, y)
2.top-to-bottom
1. left-to-right

80. drawCircle : Int -> Int -> Float -> Form

81. drawCircle x y =
circle
>> filled (rgb 150 170 150)
>> alpha 0.5
>> move (x, y)

82. drawCircle x y =
circle
>> filled (rgb 150 170 150)
>> alpha 0.5
>> move (x, y)
circle : Float -> Shape

83. drawCircle x y =
(Float -> Shape)
>> filled (rgb 150 170 150)
>> alpha 0.5
>> move (x, y)

84. drawCircle x y =
(Float -> Shape)
>> filled (rgb 150 170 150)
>> alpha 0.5
>> move (x, y)
Shape -> Form

85. drawCircle x y =
(Float -> Shape)
>> (Shape -> Form)
>> alpha 0.5
>> move (x, y)

86. drawCircle x y =
(Float -> Shape)
>> (Shape -> Form)
>> alpha 0.5
>> move (x, y)

87. drawCircle x y =
(Float -> Shape)
>> (Shape -> Form)
>> alpha 0.5
>> move (x, y)

88. drawCircle x y =
(Float -> Shape)
>> (Shape -> Form)
>> alpha 0.5
>> move (x, y)

89. drawCircle x y =
(Float -> Form)
>> alpha 0.5
>> move (x, y)

90. drawCircle x y =
(Float -> Form)
>> (Form -> Form)
>> move (x, y)

91. drawCircle x y =
(Float -> Form)
>> (Form -> Form)
>> move (x, y)

92. drawCircle x y =
(Float -> Form)
>> move (x, y)

93. drawCircle x y =
(Float -> Form)
>> (Form -> Form)

94. drawCircle x y =
(Float -> Form)
>> (Form -> Form)

95. drawCircle x y =
(Float -> Form)

96. drawCircle : Int -> Int -> (Float -> Form)

97. greet name =
case name of
"Yan"
-> “hi, theburningmonk"
_
-> “hi,“ ++ name

98. greet name =
case name of
"Yan"
-> “hi, theburningmonk"
_
-> “hi,“ ++ name

99. fizzbuzz n =
if | n % 15 == 0
-> "fizz buzz"
| n % 3
== 0
-> "fizz"
| n % 5
== 0
-> "buzz"
| otherwise
-> show n

100. Mouse.position
Mouse.clicks
Mouse.isDown
…

101. Window.dimension
Window.width
Window.height

102. Time.every
Time.fps
Time.timestamp
Time.delay
…

103. Mouse.position : Signal (Int, Int)

104. Mouse.position : Signal (Int, Int)

105. Mouse.position : Signal (Int, Int)
(10, 23) (3, 16) (8, 10) (12, 5) (18, 3)

106. Keyboard.lastPressed : Signal Int

107. Keyboard.lastPressed : Signal Int
H E L L O space

108. Keyboard.lastPressed : Signal Int
H E L L O space
72 69 76 76 79 32

109. map : (a -> b) -> Signal a -> Signal b

110. <~

111. Signal of num of pixels in window

112. ((w, h) -> w*h) <~ Window.dimensions

113. ((w, h) -> w*h) <~ Window.dimensions
Signal (Int, Int)(Int, Int) -> Int

114. ((w, h) -> w*h) <~ Window.dimensions
Signal (Int, Int)(Int, Int) -> Int
Signal Int

115. (10, 10) (15, 10) (18, 12)
100 150 216
((w, h) -> w*h) <~ Window.dimensions

116. map2 : (a -> b -> c)
-> Signal a
-> Signal b
-> Signal c

117. ~

118. (,) <~ Window.width ~ Window.height
Signal Int
a -> b -> (a, b)
Signal Int

119. (,) <~ Window.width ~ Window.height
Signal Int
Int -> Int -> (Int, Int)
Signal Int

120. map3 : (a -> b -> c -> d)
-> Signal a
-> Signal b
-> Signal c
-> Signal d

121. (,,) <~ signalA ~ signalB ~ signalC

122. map4 : …
map5 : …
map6 : …
map7 : …
map8 : …

123. foldp : (a -> b -> b)
-> b
-> Signal a
-> Signal b

124. foldp : (a -> b -> b)
-> b
-> Signal a
-> Signal b

125. foldp (_ n -> n + 1) 0 Mouse.clicks

126. foldp (_ n -> n + 1) 0 Mouse.clicks

127. foldp (_ n -> n + 1) 0 Mouse.clicks

128. 1 3 42 5
foldp (_ n -> n + 1) 0 Mouse.clicks

129. UP
{ x=0, y=1 }
DOWN
{ x=0, y=-1 }
LEFT
{ x=-1, y=0 }
RIGHT
{ x=1, y=0 }

130. merge
: Signal a -> Signal a -> Signal a
mergeMany : List (Signal a) -> Signal a
…

131. Js Interop,
WebGL
HTML layout,
dependency management,
etc.

133. 8 segments

134. direction

135. change
change
no changenot allowed
direction

136. direction

137. direction

138. direction

139. direction

140. direction
cherry

141. direction
YUMYUMYUM!

142. direction
+1 segment

149. Demo

166. github.com/theburningmonk/elm-snake
github.com/theburningmonk/elm-missile-
command
Missile Command
Snake

167. elm-lang.org/try
debug.elm-lang.org/try

168. the

169. not

170. so

171. great

172. things

173. Type error between lines 63 and 85:
case gameState of
NotStarted - if | userInput == Space -
Started (defaultSnake,Nothing)
| True - gameState
Started ({segments,direction},cherry) - let arrow = case userInput
of
Arrow arrow - arrow
_ - {x = 0, y = 0}
newDirection = getNewDirection
arrow direction
newHead = getNewSegment
(List.head segments) newDirection
newTail = List.take
((List.length segments) - 1)
segments
(w,h) = windowDims
isGameOver = (List.any
(t - t == newHead)
newTail) ||
(((fst newHead)
((toFloat w) / 2)) ||
(((snd newHead)
((toFloat h) / 2)) ||
(((fst newHead)
((toFloat (-w)) / 2)) ||
((snd newHead)
((toFloat (-h)) / 2)))))
in if | isGameOver - NotStarted
| True -
Started
({segments = newHead :: newTail,
direction = newDirection},
cherry)
!
Expected Type: {}
Actual Type: Snake.Input
cryptic error
messages

174. breaking changes

182. @theburningmonk
github.com/theburningmonk
theburningmonk.com