Codemotion Roma 2015 - Reactive Extensions (Rx) has brought reactive programming to the mainstream in recent years with successful adoption in languages such as C#, Java and JavaScript. But have you ever wondered what Rx will look like as a language? Elm is a new programming language based on the idea of Functional Reactive Programming (FRP). Elm lets you create highly interactive web applications without all the messy callbacks tangling around shared states. In this talk Yan Cui will give a gentle introduction to Elm and FRP and finish off with a live demo building a web-based game from scratch.

1. Yan Cui
!
Talk title: My Adventure with Elm
!
theburningmonk@gmail.com - GameSys - @theburningmonk
ROME 27-28 march 2015

2. ROME 27-28 march 2015 – Yan Cui @theburningmonk
agenda

3. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Hi, my name isYan Cui.

4. ROME 27-28 march 2015 – Yan Cui @theburningmonk

5. ROME 27-28 march 2015 – Yan Cui @theburningmonk
I’m not an expert on Elm.

6. ROME 27-28 march 2015 – Yan Cui @theburningmonk

7. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Function Reactive
Programming?

8. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Value over Time

9. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Time
Value

10. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Time
Value
Signal

11. ROME 27-28 march 2015 – Yan Cui @theburningmonk

12. ROME 27-28 march 2015 – Yan Cui @theburningmonk

13. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Reactive is Dead,
long live composing side effects.
bit.ly/1sb5hCu

14. ROME 27-28 march 2015 – Yan Cui @theburningmonk
“One thing I’m discovering is
that transforming data is
easier to think about than
maintaining state.”
!
- Dave Thomas

15. ROME 27-28 march 2015 – Yan Cui @theburningmonk
let y = f(x)
Imperative Functional
x.f()

16. ROME 27-28 march 2015 – Yan Cui @theburningmonk
mutation
let y = f(x)
Imperative Functional
x.f()

17. ROME 27-28 march 2015 – Yan Cui @theburningmonk

18. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Move Up
Move Down

19. ROME 27-28 march 2015 – Yan Cui @theburningmonk
private var arrowKeyUp:Bool;
private var arrowKeyDown:Bool;
!
private var platform1:Platform;
private var platform2:Platform;
private var ball:Ball;

20. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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;
}
}

21. ROME 27-28 march 2015 – Yan Cui @theburningmonk
function keyUp(event:KeyboardEvent):Void {
if (event.keyCode == 38) {
arrowKeyUp = false;
} else if (event.keyCode == 40) {
arrowKeyDown = false;
}
}

22. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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;
}
}

23. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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;
}
}

24. ROME 27-28 march 2015 – Yan Cui @theburningmonk
source files
state changes

25. ROME 27-28 march 2015 – Yan Cui @theburningmonk
source files execution

26. ROME 27-28 march 2015 – Yan Cui @theburningmonk
source files execution

27. ROME 27-28 march 2015 – Yan Cui @theburningmonk
mental model
input state new state behaviour
{ x; y } { x; y-speed }
{ x; y } { x; y+speed }
timer { x; y } { x; y } draw platform
… … … …

28. ROME 27-28 march 2015 – Yan Cui @theburningmonk
transformation
let y = f(x)
Imperative Functional
x.f()

29. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Transformations
simplify problem
decomposition

30. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Move Up
Move Down

31. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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. ROME 27-28 march 2015 – Yan Cui @theburningmonk
UP
{ x=0, y=1 }
DOWN
{ x=0, y=-1 }
LEFT
{ x=-1, y=0 }
RIGHT
{ x=1, y=0 }

35. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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

36. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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

37. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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

38. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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

39. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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

40. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Rx Dart Elm
Observable Stream Signal
= =

41. ROME 27-28 march 2015 – Yan Cui @theburningmonk

42. ROME 27-28 march 2015 – Yan Cui @theburningmonk

43. ROME 27-28 march 2015 – Yan Cui @theburningmonk

44. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Idea See in Action

45. ROME 27-28 march 2015 – Yan Cui @theburningmonk

46. ROME 27-28 march 2015 – Yan Cui @theburningmonk

47. Yan Cui
!
Talk title: My Adventure with Elm
!
theburningmonk@gmail.com - GameSys - @theburningmonk
ROME 27-28 march 2015

48. ROME 27-28 march 2015 – Yan Cui @theburningmonk
http://bit.ly/1wV46XS

49. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Elm Basics

50. ROME 27-28 march 2015 – Yan Cui @theburningmonk
add x y = x + y

51. ROME 27-28 march 2015 – Yan Cui @theburningmonk
add : Int -> Int -> Int
add x y = x + y

52. ROME 27-28 march 2015 – Yan Cui @theburningmonk
calcAngle start end =
let
distH
= end.x - start.x
distV
= end.y - start.y
in atan2 distV distH

53. ROME 27-28 march 2015 – Yan Cui @theburningmonk
calcAngle start end =
let
distH
= end.x - start.x
distV
= end.y - start.y
in atan2 distV distH

54. ROME 27-28 march 2015 – Yan Cui @theburningmonk
calcAngle start end =
let
distH
= end.x - start.x
distV
= end.y - start.y
in atan2 distV distH

55. ROME 27-28 march 2015 – Yan Cui @theburningmonk
multiply x y
= x * y
triple = multiply 3

56. ROME 27-28 march 2015 – Yan Cui @theburningmonk
multiply x y
= x * y
triple = multiply 3

57. ROME 27-28 march 2015 – Yan Cui @theburningmonk
f a b c d = …
f :
Int ->
(Int ->
(Int ->
(Int -> Int)))

58. ROME 27-28 march 2015 – Yan Cui @theburningmonk
double list = List.map (x -> x * 2) list

59. ROME 27-28 march 2015 – Yan Cui @theburningmonk
double list = List.map ((*) 2) list

60. ROME 27-28 march 2015 – Yan Cui @theburningmonk
tuple1 = (2,“three”)
tuple2 = (2,“three”, [4, 5])

61. ROME 27-28 march 2015 – Yan Cui @theburningmonk
tuple4 = (,) 2 “three”
tuple5 = (,,) 2 “three” [4, 5]

62. ROME 27-28 march 2015 – Yan Cui @theburningmonk
x = { age=42, name=“foo” }

63. ROME 27-28 march 2015 – Yan Cui @theburningmonk
lightweight, labelled
data structure

64. ROME 27-28 march 2015 – Yan Cui @theburningmonk
x.age
x.name
-- 42
-- “foo”

65. ROME 27-28 march 2015 – Yan Cui @theburningmonk
x.age
x.name
-- 42
-- “foo”
.age x
.name x
-- 42
-- “foo”

66. ROME 27-28 march 2015 – Yan Cui @theburningmonk
-- clone and update
y = { x | name <- "bar" }

67. ROME 27-28 march 2015 – Yan Cui @theburningmonk
type alias Character =
{ age : Int, name : String }

68. ROME 27-28 march 2015 – Yan Cui @theburningmonk
type alias Named a = { a | name : String }
type alias Aged a = { a | age : Int }

69. ROME 27-28 march 2015 – Yan Cui @theburningmonk
lady : Named ( Aged { } )
lady = { name=“foo”, age=42 }

70. ROME 27-28 march 2015 – Yan Cui @theburningmonk
getName : Named x -> String
getName { name } = name

71. ROME 27-28 march 2015 – Yan Cui @theburningmonk
getName : Named x -> String
getName { name } = name
!
getName lady
-- “foo”

72. ROME 27-28 march 2015 – Yan Cui @theburningmonk
type Status = Flying Pos Speed
| Exploding Radius
| Exploded

73. ROME 27-28 march 2015 – Yan Cui @theburningmonk
aka.
“sums-and-products”
data structures

74. ROME 27-28 march 2015 – Yan Cui @theburningmonk
type Status = Flying Pos Speed
| Exploding Radius
| Exploded
sums :
choice between variants of a type

75. ROME 27-28 march 2015 – Yan Cui @theburningmonk
products :
tuple of types
type Status = Flying Pos Speed
| Exploding Radius
| Exploded

76. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y radius =
circle radius
|> filled (rgb 150 170 150)
|> alpha 0.5
|> move (x, y)

77. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y radius =
circle radius
|> filled (rgb 150 170 150)
|> alpha 0.5
|> move (x, y)
filled : Color -> Shape -> Form

78. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y radius =
circle radius
|> filled (rgb 150 170 150)
|> alpha 0.5
|> move (x, y)

79. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y radius =
circle radius
|> filled (rgb 150 170 150)
|> alpha 0.5
|> move (x, y)

80. ROME 27-28 march 2015 – Yan Cui @theburningmonk
“…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)

81. ROME 27-28 march 2015 – Yan Cui @theburningmonk

82. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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

83. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle : Int -> Int -> Float -> Form

84. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
circle
>> filled (rgb 150 170 150)
>> alpha 0.5
>> move (x, y)

85. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
circle
>> filled (rgb 150 170 150)
>> alpha 0.5
>> move (x, y)
circle : Float -> Shape

86. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Shape)
>> filled (rgb 150 170 150)
>> alpha 0.5
>> move (x, y)

87. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Shape)
>> filled (rgb 150 170 150)
>> alpha 0.5
>> move (x, y)
filled : Color -> Shape -> Form

88. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Shape)
>> filled (rgb 150 170 150)
>> alpha 0.5
>> move (x, y)
Curried!
filled : Color -> Shape -> Form

89. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Shape)
>> filled (rgb 150 170 150)
>> alpha 0.5
>> move (x, y)
Shape -> Form

90. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Shape)
>> (Shape -> Form)
>> alpha 0.5
>> move (x, y)

91. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Shape)
>> (Shape -> Form)
>> alpha 0.5
>> move (x, y)

92. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Shape)
>> (Shape -> Form)
>> alpha 0.5
>> move (x, y)

93. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Shape)
>> (Shape -> Form)
>> alpha 0.5
>> move (x, y)

94. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Form)
>> alpha 0.5
>> move (x, y)

95. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Form)
>> (Form -> Form)
>> move (x, y)

96. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Form)
>> (Form -> Form)
>> move (x, y)

97. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Form)
>> move (x, y)

98. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Form)
>> (Form -> Form)

99. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Form)
>> (Form -> Form)

100. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y =
(Float -> Form)

101. ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle : Int -> Int -> (Float -> Form)

102. ROME 27-28 march 2015 – Yan Cui @theburningmonk
greet name =
case name of
"Yan"
-> “hi, theburningmonk"
_
-> “hi,“ ++ name

103. ROME 27-28 march 2015 – Yan Cui @theburningmonk
greet name =
case name of
"Yan"
-> “hi, theburningmonk"
_
-> “hi,“ ++ name

104. ROME 27-28 march 2015 – Yan Cui @theburningmonk
fizzbuzz n =
if | n % 15 == 0
-> "fizz buzz"
| n % 3
== 0
-> "fizz"
| n % 5
== 0
-> "buzz"
| otherwise
-> show n

105. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Mouse.position
Mouse.clicks
Mouse.isDown
…

106. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Window.dimension
Window.width
Window.height

107. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Time.every
Time.fps
Time.timestamp
Time.delay
…

108. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Mouse.position : Signal (Int, Int)

109. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Mouse.position : Signal (Int, Int)

110. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Mouse.position : Signal (Int, Int)
(10, 23) (3, 16) (8, 10) (12, 5) (18, 3)

111. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Keyboard.lastPressed : Signal Int

112. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Keyboard.lastPressed : Signal Int
H E L L O space

113. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Keyboard.lastPressed : Signal Int
H E L L O space
72 69 76 76 79 32

114. ROME 27-28 march 2015 – Yan Cui @theburningmonk
map : (a -> b) -> Signal a -> Signal b

115. ROME 27-28 march 2015 – Yan Cui @theburningmonk
<~

116. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Signal of num of pixels in window

117. ROME 27-28 march 2015 – Yan Cui @theburningmonk
((w, h) -> w*h) <~ Window.dimensions

118. ROME 27-28 march 2015 – Yan Cui @theburningmonk
((w, h) -> w*h) <~ Window.dimensions
Signal (Int, Int)(Int, Int) -> Int

119. ROME 27-28 march 2015 – Yan Cui @theburningmonk
((w, h) -> w*h) <~ Window.dimensions
Signal (Int, Int)(Int, Int) -> Int
Signal Int

120. ROME 27-28 march 2015 – Yan Cui @theburningmonk
(10, 10) (15, 10) (18, 12)
100 150 216
((w, h) -> w*h) <~ Window.dimensions

121. ROME 27-28 march 2015 – Yan Cui @theburningmonk
map2 : (a -> b -> c)
-> Signal a
-> Signal b
-> Signal c

122. ROME 27-28 march 2015 – Yan Cui @theburningmonk
~

123. ROME 27-28 march 2015 – Yan Cui @theburningmonk
(,) <~ Window.width ~ Window.height
Signal Int
a -> b -> (a, b)
Signal Int

124. ROME 27-28 march 2015 – Yan Cui @theburningmonk
(,) <~ Window.width ~ Window.height
Signal Int
Int -> Int -> (Int, Int)
Signal Int

125. ROME 27-28 march 2015 – Yan Cui @theburningmonk
map3 : (a -> b -> c -> d)
-> Signal a
-> Signal b
-> Signal c
-> Signal d

126. ROME 27-28 march 2015 – Yan Cui @theburningmonk
(,,) <~ signalA ~ signalB ~ signalC

127. ROME 27-28 march 2015 – Yan Cui @theburningmonk
map4 : …
map5 : …
map6 : …
map7 : …
map8 : …

128. ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b)
-> b
-> Signal a
-> Signal b

129. ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b)
-> b
-> Signal a
-> Signal b

130. ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b)
-> b
-> Signal a
-> Signal b

131. ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b)
-> b
-> Signal a
-> Signal b

132. ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b)
-> b
-> Signal a
-> Signal b

133. ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b)
-> b
-> Signal a
-> Signal b

134. ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp (_ n -> n + 1) 0 Mouse.clicks

135. ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp (_ n -> n + 1) 0 Mouse.clicks

136. ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp (_ n -> n + 1) 0 Mouse.clicks

137. ROME 27-28 march 2015 – Yan Cui @theburningmonk
1 3 42 5
foldp (_ n -> n + 1) 0 Mouse.clicks

138. ROME 27-28 march 2015 – Yan Cui @theburningmonk
UP
{ x=0, y=1 }
DOWN
{ x=0, y=-1 }
LEFT
{ x=-1, y=0 }
RIGHT
{ x=1, y=0 }

139. ROME 27-28 march 2015 – Yan Cui @theburningmonk
merge
: Signal a -> Signal a -> Signal a
mergeMany : List (Signal a) -> Signal a
…

140. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Js Interop,
WebGL
HTML layout,
dependency management,
etc.

141. ROME 27-28 march 2015 – Yan Cui @theburningmonk

142. ROME 27-28 march 2015 – Yan Cui @theburningmonk
8 segments

143. ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction

144. ROME 27-28 march 2015 – Yan Cui @theburningmonk
change
change
no changenot allowed
direction

145. ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction

146. ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction

147. ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction

148. ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction

149. ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction
cherry

150. ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction
YUMYUMYUM!

151. ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction
+1 segment

152. ROME 27-28 march 2015 – Yan Cui @theburningmonk

153. ROME 27-28 march 2015 – Yan Cui @theburningmonk

154. ROME 27-28 march 2015 – Yan Cui @theburningmonk

155. ROME 27-28 march 2015 – Yan Cui @theburningmonk

156. ROME 27-28 march 2015 – Yan Cui @theburningmonk

157. ROME 27-28 march 2015 – Yan Cui @theburningmonk

158. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Demo

159. ROME 27-28 march 2015 – Yan Cui @theburningmonk

160. ROME 27-28 march 2015 – Yan Cui @theburningmonk

161. ROME 27-28 march 2015 – Yan Cui @theburningmonk

162. ROME 27-28 march 2015 – Yan Cui @theburningmonk

163. ROME 27-28 march 2015 – Yan Cui @theburningmonk

164. ROME 27-28 march 2015 – Yan Cui @theburningmonk

165. ROME 27-28 march 2015 – Yan Cui @theburningmonk

166. ROME 27-28 march 2015 – Yan Cui @theburningmonk

167. ROME 27-28 march 2015 – Yan Cui @theburningmonk

168. ROME 27-28 march 2015 – Yan Cui @theburningmonk

169. ROME 27-28 march 2015 – Yan Cui @theburningmonk

170. ROME 27-28 march 2015 – Yan Cui @theburningmonk

171. ROME 27-28 march 2015 – Yan Cui @theburningmonk

172. ROME 27-28 march 2015 – Yan Cui @theburningmonk

173. ROME 27-28 march 2015 – Yan Cui @theburningmonk

174. ROME 27-28 march 2015 – Yan Cui @theburningmonk

175. ROME 27-28 march 2015 – Yan Cui @theburningmonk
github.com/theburningmonk/elm-snake
github.com/theburningmonk/elm-missile-
command
Missile Command
Snake

176. ROME 27-28 march 2015 – Yan Cui @theburningmonk
elm-lang.org/try
debug.elm-lang.org/try

177. ROME 27-28 march 2015 – Yan Cui @theburningmonk
the

178. not

179. so

180. great

181. things

182. ROME 27-28 march 2015 – Yan Cui @theburningmonk
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

183. ROME 27-28 march 2015 – Yan Cui @theburningmonk
breaking changes

184. ROME 27-28 march 2015 – Yan Cui @theburningmonk

185. ROME 27-28 march 2015 – Yan Cui @theburningmonk

186. ROME 27-28 march 2015 – Yan Cui @theburningmonk

187. ROME 27-28 march 2015 – Yan Cui @theburningmonk

188. ROME 27-28 march 2015 – Yan Cui @theburningmonk

189. ROME 27-28 march 2015 – Yan Cui @theburningmonk

190. ROME 27-28 march 2015 – Yan Cui @theburningmonk

191. ROME 27-28 march 2015 – Yan Cui @theburningmonk
@theburningmonk
github.com/theburningmonk
theburningmonk.com

193. http://hire.jobvite.com/m?3OHq4hwL
F#
C#
AWS
Erlang
Docker
micro-services
elasticsearch
redis
Google
AppEngine
Google
BigQuery
PostSharpNeo4j
Python DevOps
PagerDuty
NewRelic

194. ROME 27-28 march 2015 – Yan Cui @theburningmonk
Leave your feedback on Joind.in!
https://joind.in/14145
!
!