my adventure with elm - yan cui - codemotion roma 2015
TRANSCRIPT
![Page 1: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/1.jpg)
Yan Cui !Talk title: My Adventure with Elm [email protected] - GameSys - @theburningmonk
ROME 27-28 march 2015
![Page 2: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/2.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
agenda
![Page 3: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/3.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Hi, my name is Yan Cui.
![Page 4: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/4.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 5: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/5.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
I’m not an expert on Elm.
![Page 6: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/6.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 7: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/7.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Function Reactive Programming?
![Page 8: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/8.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Value over Time
![Page 9: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/9.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Time
Value
![Page 10: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/10.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Time
ValueSignal
![Page 11: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/11.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 12: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/12.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 13: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/13.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Reactive is Dead, long live composing side effects.
bit.ly/1sb5hCu
![Page 14: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/14.jpg)
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
![Page 15: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/15.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
let y = f(x)
Imperative Functional
x.f()
![Page 16: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/16.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
mutation
let y = f(x)
Imperative Functional
x.f()
![Page 17: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/17.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 18: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/18.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Move Up
Move Down
![Page 19: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/19.jpg)
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;
![Page 20: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/20.jpg)
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; } }
![Page 21: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/21.jpg)
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; } }
![Page 22: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/22.jpg)
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; } }
![Page 23: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/23.jpg)
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; } }
![Page 24: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/24.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
source files
state changes
![Page 25: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/25.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
source files execution
![Page 26: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/26.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
source files execution
![Page 27: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/27.jpg)
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
… … … …
![Page 28: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/28.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
transformation
let y = f(x)
Imperative Functional
x.f()
![Page 29: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/29.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Transformations simplify problem decomposition
![Page 30: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/30.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Move Up
Move Down
![Page 31: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/31.jpg)
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
![Page 32: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/32.jpg)
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
![Page 33: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/33.jpg)
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
![Page 34: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/34.jpg)
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 }
![Page 35: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/35.jpg)
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
![Page 36: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/36.jpg)
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
![Page 37: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/37.jpg)
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
![Page 38: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/38.jpg)
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
![Page 39: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/39.jpg)
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
![Page 40: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/40.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Rx Dart ElmObservable Stream Signal
= =
![Page 41: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/41.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 42: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/42.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 43: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/43.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 44: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/44.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Idea See in Action
![Page 45: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/45.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 46: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/46.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 47: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/47.jpg)
Yan Cui !Talk title: My Adventure with Elm [email protected] - GameSys - @theburningmonk
ROME 27-28 march 2015
![Page 48: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/48.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
http://bit.ly/1wV46XS
![Page 49: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/49.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Elm Basics
![Page 50: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/50.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
add x y = x + y
![Page 51: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/51.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
add : Int -> Int -> Intadd x y = x + y
![Page 52: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/52.jpg)
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
![Page 53: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/53.jpg)
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
![Page 54: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/54.jpg)
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
![Page 55: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/55.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
multiply x y = x * y triple = multiply 3
![Page 56: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/56.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
multiply x y = x * y triple = multiply 3
![Page 57: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/57.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
f a b c d = … f : Int -> (Int -> (Int -> (Int -> Int)))
![Page 58: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/58.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
double list = List.map (\x -> x * 2) list
![Page 59: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/59.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
double list = List.map ((*) 2) list
![Page 60: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/60.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
tuple1 = (2, “three”) tuple2 = (2, “three”, [4, 5])
![Page 61: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/61.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
tuple4 = (,) 2 “three” tuple5 = (,,) 2 “three” [4, 5]
![Page 62: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/62.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
x = { age=42, name=“foo” }
![Page 63: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/63.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
lightweight, labelled data structure
![Page 64: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/64.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
x.age x.name
-- 42 -- “foo”
![Page 65: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/65.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
x.age x.name
-- 42 -- “foo”
.age x
.name x-- 42 -- “foo”
![Page 66: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/66.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
-- clone and update y = { x | name <- "bar" }
![Page 67: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/67.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
type alias Character = { age : Int, name : String }
![Page 68: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/68.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
type alias Named a = { a | name : String } type alias Aged a = { a | age : Int }
![Page 69: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/69.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
lady : Named ( Aged { } ) lady = { name=“foo”, age=42 }
![Page 70: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/70.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
getName : Named x -> String getName { name } = name
![Page 71: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/71.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
getName : Named x -> String getName { name } = name !
getName lady -- “foo”
![Page 72: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/72.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
type Status = Flying Pos Speed | Exploding Radius | Exploded
![Page 73: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/73.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
aka. “sums-and-products”
data structures
![Page 74: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/74.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
type Status = Flying Pos Speed | Exploding Radius | Exploded
sums : choice between variants of a type
![Page 75: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/75.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
products : tuple of types
type Status = Flying Pos Speed | Exploding Radius | Exploded
![Page 76: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/76.jpg)
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)
![Page 77: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/77.jpg)
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
![Page 78: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/78.jpg)
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)
![Page 79: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/79.jpg)
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)
![Page 80: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/80.jpg)
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)
![Page 81: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/81.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 82: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/82.jpg)
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
![Page 83: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/83.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle : Int -> Int -> Float -> Form
![Page 84: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/84.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = circle >> filled (rgb 150 170 150) >> alpha 0.5 >> move (x, y)
![Page 85: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/85.jpg)
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
![Page 86: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/86.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Shape) >> filled (rgb 150 170 150) >> alpha 0.5 >> move (x, y)
![Page 87: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/87.jpg)
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
![Page 88: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/88.jpg)
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
![Page 89: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/89.jpg)
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
![Page 90: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/90.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
![Page 91: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/91.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
![Page 92: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/92.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
![Page 93: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/93.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
![Page 94: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/94.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Form) >> alpha 0.5 >> move (x, y)
![Page 95: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/95.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Form) >> (Form -> Form) >> move (x, y)
![Page 96: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/96.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Form) >> (Form -> Form) >> move (x, y)
![Page 97: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/97.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Form) >> move (x, y)
![Page 98: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/98.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Form) >> (Form -> Form)
![Page 99: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/99.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Form) >> (Form -> Form)
![Page 100: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/100.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle x y = (Float -> Form)
![Page 101: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/101.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
drawCircle : Int -> Int -> (Float -> Form)
![Page 102: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/102.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
greet name = case name of "Yan" -> “hi, theburningmonk" _ -> “hi, “ ++ name
![Page 103: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/103.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
greet name = case name of "Yan" -> “hi, theburningmonk" _ -> “hi, “ ++ name
![Page 104: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/104.jpg)
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
![Page 105: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/105.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Mouse.position Mouse.clicks
Mouse.isDown …
![Page 106: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/106.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Window.dimension Window.width Window.height
![Page 107: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/107.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Time.every Time.fps
Time.timestamp Time.delay
…
![Page 108: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/108.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Mouse.position : Signal (Int, Int)
![Page 109: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/109.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Mouse.position : Signal (Int, Int)
![Page 110: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/110.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Mouse.position : Signal (Int, Int)
(10, 23) (3, 16) (8, 10) (12, 5) (18, 3)
![Page 111: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/111.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Keyboard.lastPressed : Signal Int
![Page 112: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/112.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Keyboard.lastPressed : Signal Int
H E L L O space
![Page 113: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/113.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Keyboard.lastPressed : Signal Int
H E L L O space
72 69 76 76 79 32
![Page 114: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/114.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
map : (a -> b) -> Signal a -> Signal b
![Page 115: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/115.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
<~
![Page 116: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/116.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Signal of num of pixels in window
![Page 117: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/117.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
(\(w, h) -> w*h) <~ Window.dimensions
![Page 118: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/118.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
(\(w, h) -> w*h) <~ Window.dimensions
Signal (Int, Int)(Int, Int) -> Int
![Page 119: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/119.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
(\(w, h) -> w*h) <~ Window.dimensions
Signal (Int, Int)(Int, Int) -> Int
Signal Int
![Page 120: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/120.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
(10, 10) (15, 10) (18, 12)
100 150 216
(\(w, h) -> w*h) <~ Window.dimensions
![Page 121: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/121.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
map2 : (a -> b -> c) -> Signal a -> Signal b -> Signal c
![Page 122: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/122.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
~
![Page 123: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/123.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
(,) <~ Window.width ~ Window.height
Signal Int
a -> b -> (a, b)
Signal Int
![Page 124: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/124.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
(,) <~ Window.width ~ Window.height
Signal Int
Int -> Int -> (Int, Int)
Signal Int
![Page 125: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/125.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
map3 : (a -> b -> c -> d) -> Signal a -> Signal b -> Signal c -> Signal d
![Page 126: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/126.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
(,,) <~ signalA ~ signalB ~ signalC
![Page 127: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/127.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
map4 : … map5 : … map6 : … map7 : … map8 : …
![Page 128: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/128.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b) -> b -> Signal a -> Signal b
![Page 129: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/129.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b) -> b -> Signal a -> Signal b
![Page 130: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/130.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b) -> b -> Signal a -> Signal b
![Page 131: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/131.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b) -> b -> Signal a -> Signal b
![Page 132: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/132.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b) -> b -> Signal a -> Signal b
![Page 133: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/133.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp : (a -> b -> b) -> b -> Signal a -> Signal b
![Page 134: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/134.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp (\_ n -> n + 1) 0 Mouse.clicks
![Page 135: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/135.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp (\_ n -> n + 1) 0 Mouse.clicks
![Page 136: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/136.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
foldp (\_ n -> n + 1) 0 Mouse.clicks
![Page 137: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/137.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
1 3 42 5
foldp (\_ n -> n + 1) 0 Mouse.clicks
![Page 138: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/138.jpg)
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 }
![Page 139: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/139.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
merge : Signal a -> Signal a -> Signal a mergeMany : List (Signal a) -> Signal a …
![Page 140: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/140.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Js Interop, WebGL
HTML layout, dependency management,
etc.
![Page 141: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/141.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 142: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/142.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
8 segments
![Page 143: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/143.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction
![Page 144: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/144.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
change
change
no changenot allowed
direction
![Page 145: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/145.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction
![Page 146: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/146.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction
![Page 147: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/147.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction
![Page 148: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/148.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction
![Page 149: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/149.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction
cherry
![Page 150: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/150.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction
YUM YUM YUM!
![Page 151: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/151.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
direction
+1 segment
![Page 152: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/152.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 153: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/153.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 154: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/154.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 155: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/155.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 156: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/156.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 157: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/157.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 158: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/158.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Demo
![Page 159: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/159.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 160: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/160.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 161: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/161.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 162: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/162.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 163: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/163.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 164: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/164.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 165: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/165.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 166: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/166.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 167: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/167.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 168: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/168.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 169: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/169.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 170: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/170.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 171: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/171.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 172: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/172.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 173: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/173.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 174: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/174.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 175: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/175.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
github.com/theburningmonk/elm-snake
github.com/theburningmonk/elm-missile-command
Missile Command
Snake
![Page 176: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/176.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
elm-lang.org/try
debug.elm-lang.org/try
![Page 177: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/177.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
the����������� ������������������ not����������� ������������������ so����������� ������������������ great����������� ������������������ things
![Page 178: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/178.jpg)
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
![Page 179: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/179.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
breaking changes
![Page 180: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/180.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 181: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/181.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 182: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/182.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 183: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/183.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 184: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/184.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 185: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/185.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 186: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/186.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
![Page 187: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/187.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
@theburningmonk
github.com/theburningmonk
theburningmonk.com
![Page 188: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/188.jpg)
![Page 189: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/189.jpg)
http://hire.jobvite.com/m?3OHq4hwL
F#
C#
AWSErlang
Docker
micro-services
elasticsearch
redisGoogle
AppEngine
Google BigQuery
PostSharpNeo4j
Python DevOps
PagerDuty
NewRelic
![Page 190: My adventure with Elm - Yan Cui - Codemotion Roma 2015](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a5f5571a28ab3a7a8b460d/html5/thumbnails/190.jpg)
ROME 27-28 march 2015 – Yan Cui @theburningmonk
Leave your feedback on Joind.in! https://joind.in/14145 !!