My adventure with Elm

Yan Cui
Yan CuiSpeaker at Self
My adventure with ELM
SCORE 42
by Yan Cui
agenda
Hi, my name is Yan Cui.
My adventure with Elm
I’m not an expert on Elm.
My adventure with Elm
Function Reactive
Programming?
Value over Time
Time
Value
Time
Value
Signal
Move Up
Move Down
private var arrowKeyUp:Bool;!
private var arrowKeyDown:Bool;!
!
private var platform1:Platform;!
private var platform2:Platform;!
private var ball:Ball;
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;!
! }!
}
function keyUp(event:KeyboardEvent):Void {!
! if (event.keyCode == 38) {!
! ! arrowKeyUp = false;!
! } else if (event.keyCode == 40) {!
! ! arrowKeyDown = false;!
! }!
}
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;!
! }!
}
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;!
! }!
}
source files
state changes
source files execution
source files execution
mental model
input state new state behaviour
{ x; y } { x; y-speed }
{ x; y } { x; y+speed }
timer { x; y } { x; y } draw platform
… … … …
transformation
let y = f(x)
Imperative Functional
x.f()
mutation
“one thing I’m discovering
is that transforming data is
easier to think about than
maintaining state.”
!
- Dave Thomas
transformations
simplify problem
decomposition
Move Up
Move Down
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
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
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
UP! ! ! { x=0, y=1 }!
DOWN! ! { x=0, y=-1 }!
LEFT!! ! { x=-1, y=0 }!
RIGHT! ! { x=1, y=0 }
Keyboard.arrows
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
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
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
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
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
Rx Dart Elm
Observable Stream Signal
= =
see also http://bit.ly/1HPM3ul
My adventure with Elm
My adventure with Elm
Idea See in Action
My adventure with Elm
My adventure with Elm
My adventure with Elm
see also http://bit.ly/1wV46XS
Elm Basics
add x y = x + y
add : Int -> Int -> Int
add x y = x + y
calcAngle start end =	

	

 let	

distH	

 = end.x - start.x	

	

	

 distV 	

= end.y - start.y	

	

 in atan2 distV distH
calcAngle start end =	

	

 let	

distH	

 = end.x - start.x	

	

	

 distV 	

= end.y - start.y	

	

 in atan2 distV distH
calcAngle start end =	

	

 let	

distH	

 = end.x - start.x	

	

	

 distV 	

= end.y - start.y	

	

 in atan2 distV distH
multiply x y	

= x * y	

triple = multiply 3
multiply x y	

= x * y	

triple = multiply 3
double list = List.map (x -> x * 2) list
double list = List.map ((*) 2) list
tuple1 = (2,“three”)	

tuple2 = (2,“three”, [4, 5])
tuple4 = (,) 2 “three”	

tuple5 = (,,) 2 “three” [4, 5]
x = { age=42, name=“foo” }
lightweight, labelled
data structure
x.age	

x.name
-- 42	

-- “foo”
x.age	

x.name
-- 42	

-- “foo”
.age x	

.name x
-- 42	

-- “foo”
-- clone and update	

y = { x | name <- "bar" }
type alias Character = 	

{ age : Int, name : String }
type alias Named a = { a | name : String }	

type alias Aged a = { a | age : Int }
lady : Named ( Aged { } )	

lady = { name=“foo”, age=42 }
getName : Named x -> String	

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

getName { name } = name	

!
getName lady	

	

 -- “foo”
type Status = Flying Pos Speed	

	

 	

 	

 	

 	

 	

 	

 | Exploding Radius	

	

 	

 	

 	

 	

 	

 	

 | Exploded
aka.	

“sums-and-products”	

data structures
type Status = Flying Pos Speed	

	

 	

 	

 	

 	

 	

 | Exploding Radius	

	

 	

 	

 	

 	

 	

 | Exploded
sums : 	

choice between variants of a type
products : 	

tuple of types
type Status = Flying Pos Speed	

	

 	

 	

 	

 	

 	

 | Exploding Radius	

	

 	

 	

 	

 	

 	

 | Exploded
drawCircle x y radius =	

	

 circle radius	

	

|> filled (rgb 150 170 150)	

	

 |> alpha 0.5	

	

 |> move (x, y)
drawCircle x y radius =	

	

 circle radius	

	

|> filled (rgb 150 170 150)	

	

 |> alpha 0.5	

	

 |> move (x, y)	

filled : Color -> Shape -> Form
drawCircle x y radius =	

	

 circle radius	

	

|> filled (rgb 150 170 150)	

	

 |> alpha 0.5	

	

 |> move (x, y)
drawCircle x y radius =	

	

 circle radius	

	

|> filled (rgb 150 170 150)	

	

 |> alpha 0.5	

	

 |> move (x, y)
“…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)
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())));!
}
how we read CODE
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
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
“…a clean design is one that
supports visual thinking so
people can meet their
informational needs with a
minimum of conscious effort.”
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
drawCircle : Int -> Int -> Float -> Form
drawCircle x y =	

	

 circle 	

	

>> filled (rgb 150 170 150)	

	

>> alpha 0.5	

	

>> move (x, y)
drawCircle x y =	

	

 circle 	

	

>> filled (rgb 150 170 150)	

	

>> alpha 0.5	

	

>> move (x, y)
circle : Float -> Shape
drawCircle x y =	

	

 (Float -> Shape) 	

	

>> filled (rgb 150 170 150)	

	

>> alpha 0.5	

	

>> move (x, y)
drawCircle x y =	

	

 (Float -> Shape) 	

	

>> filled (rgb 150 170 150)	

	

>> alpha 0.5	

	

>> move (x, y)
Shape -> Form
drawCircle x y =	

	

 (Float -> Shape) 	

	

>> (Shape -> Form)	

	

>> alpha 0.5	

	

>> move (x, y)
drawCircle x y =	

	

 (Float -> Shape) 	

	

>> (Shape -> Form) 	

	

>> alpha 0.5	

	

>> move (x, y)
drawCircle x y =	

	

 (Float -> Shape) 	

	

>> (Shape -> Form) 	

	

>> alpha 0.5	

	

>> move (x, y)
drawCircle x y =	

	

 (Float -> Shape) 	

	

>> (Shape -> Form) 	

	

>> alpha 0.5	

	

>> move (x, y)
drawCircle x y =	

	

 (Float -> Form)	

	

>> alpha 0.5	

	

>> move (x, y)
drawCircle x y =	

	

 (Float -> Form)	

	

>> (Form -> Form)	

	

>> move (x, y)
drawCircle x y =	

	

 (Float -> Form)	

	

>> (Form -> Form)	

	

>> move (x, y)
drawCircle x y =	

	

 (Float -> Form)	

	

>> move (x, y)
drawCircle x y =	

	

 (Float -> Form)	

	

>> (Form -> Form)
drawCircle x y =	

	

 (Float -> Form)	

	

>> (Form -> Form)
drawCircle x y =	

	

 (Float -> Form)
drawCircle : Int -> Int -> (Float -> Form)
greet name =	

case name of 	

"Yan" 	

-> “hi, theburningmonk"	

_ 	

	

 -> “hi,“ ++ name
greet name =	

case name of 	

"Yan" 	

-> “hi, theburningmonk"	

_ 	

	

 -> “hi,“ ++ name
fizzbuzz n =	

if | n % 15 == 0	

-> "fizz buzz"	

| n % 3 	

== 0	

-> "fizz"	

| n % 5 	

== 0	

-> "buzz"	

| otherwise 	

-> show n
Mouse.position	

Mouse.clicks	

Mouse.isDown	

…
Window.dimension	

Window.width	

Window.height
Time.every	

Time.fps	

Time.timestamp	

Time.delay	

…
Mouse.position : Signal (Int, Int)
Mouse.position : Signal (Int, Int)
Mouse.position : Signal (Int, Int)
(10, 23) (3, 16) (8, 10) (12, 5) (18, 3)
Keyboard.lastPressed : Signal Int
Keyboard.lastPressed : Signal Int
H E L L O space
Keyboard.lastPressed : Signal Int
H E L L O space
72 69 76 76 79 32
map : (a -> b) -> Signal a -> Signal b
<~
Signal of num of pixels in window
((w, h) -> w*h) <~ Window.dimensions
((w, h) -> w*h) <~ Window.dimensions
Signal (Int, Int)(Int, Int) -> Int
((w, h) -> w*h) <~ Window.dimensions
Signal (Int, Int)(Int, Int) -> Int
Signal Int
(10, 10) (15, 10) (18, 12)
100 150 216
((w, h) -> w*h) <~ Window.dimensions
map2 : (a -> b -> c) 	

	

 	

 	

 	

 -> Signal a 	

	

 	

 	

 	

 -> Signal b 	

	

 	

 	

 	

 -> Signal c
~
(,) <~ Window.width ~ Window.height
Signal Int
a -> b -> (a, b)
Signal Int
(,) <~ Window.width ~ Window.height
Signal Int
Int -> Int -> (Int, Int)
Signal Int
map3 : (a -> b -> c -> d) 	

	

 	

 	

 	

 -> Signal a 	

	

 	

 	

 	

 -> Signal b 	

	

 	

 	

 	

 -> Signal c	

	

 	

 	

 	

 -> Signal d
(,,) <~ signalA ~ signalB ~ signalC
map4 : …	

map5 : …	

map6 : …	

map7 : …	

map8 : …
foldp : (a -> b -> b) 	

	

 	

 	

 	

 -> b 	

	

 	

 	

 	

 -> Signal a 	

	

 	

 	

 	

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

	

 	

 	

 	

 -> b
	

 	

 	

 	

 -> Signal a 	

	

 	

 	

 	

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

	

 	

 	

 { x=0, y=1 }	

DOWN	

 { x=0, y=-1 }	

LEFT	

	

 	

 { x=-1, y=0 }	

RIGHT	

	

 { x=1, y=0 }
merge	

 : Signal a -> Signal a -> Signal a	

mergeMany : List (Signal a) -> Signal a	

…
Js Interop,
WebGL
HTML layout,
dependency management,
etc.
My adventure with Elm
8 segments
direction
change
change
no changenot allowed
direction
direction
direction
direction
direction
direction
cherry
direction
YUMYUMYUM!
direction
+1 segment
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
Demo
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
github.com/theburningmonk/elm-snake
github.com/theburningmonk/elm-missile-
command
Missile Command
Snake
elm-lang.org/try
debug.elm-lang.org/try
the
 not
 so
 great
 things
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
breaking changes
My adventure with Elm
My adventure with Elm
My adventure with Elm
My adventure with Elm
1 of 178

More Related Content

Viewers also liked(20)

F# and Reactive Programming for iOSF# and Reactive Programming for iOS
F# and Reactive Programming for iOS
Brad Pillow1.7K views
F# in real world (LambdaCon15)F# in real world (LambdaCon15)
F# in real world (LambdaCon15)
Yan Cui2.9K views
Elixir and Phoenix for RubyistsElixir and Phoenix for Rubyists
Elixir and Phoenix for Rubyists
Brooklyn Zelenka1.3K views
Use the @types, LukeUse the @types, Luke
Use the @types, Luke
Brooklyn Zelenka2.3K views
Scaling micro services at giltScaling micro services at gilt
Scaling micro services at gilt
Adrian Trenaman15.1K views
Share point saturday baltimore welcomeShare point saturday baltimore welcome
Share point saturday baltimore welcome
Shadeed Eleazer802 views
Happy HalloweenHappy Halloween
Happy Halloween
Adriana Nastase990 views
HuellaecologicaHuellaecologica
Huellaecologica
docentecis445 views
Molly Smith Thompson HouseMolly Smith Thompson House
Molly Smith Thompson House
PreservationNC1.6K views
Unlocking the content dungeonUnlocking the content dungeon
Unlocking the content dungeon
Earnest3.5K views

Similar to My adventure with Elm(20)

Bulletproofing your foot for KotlinBulletproofing your foot for Kotlin
Bulletproofing your foot for Kotlin
Enrique Zamudio López306 views
PythonPython
Python
대갑 김476 views
Combinator parsingCombinator parsing
Combinator parsing
Swanand Pagnis141 views
HammurabiHammurabi
Hammurabi
Mario Fusco3.3K views
Por qué Crystal? Why Crystal Language?Por qué Crystal? Why Crystal Language?
Por qué Crystal? Why Crystal Language?
Crystal Language2.8K views
Music as dataMusic as data
Music as data
John Vlachoyiannis704 views
Class 3: if/elseClass 3: if/else
Class 3: if/else
Marc Gouw75 views
FpFp
Fp
Naveenkumar Muguda54 views
Perl 6 in ContextPerl 6 in Context
Perl 6 in Context
lichtkind1.2K views
Swift Study #7Swift Study #7
Swift Study #7
chanju Jeon1.7K views
The algebra of library designThe algebra of library design
The algebra of library design
Leonardo Borges600 views
Python slidePython slide
Python slide
Kiattisak Anoochitarom778 views
ScotRuby - Dark side of rubyScotRuby - Dark side of ruby
ScotRuby - Dark side of ruby
Gautam Rege1.3K views
Exhibition of AtrocityExhibition of Atrocity
Exhibition of Atrocity
Michael Pirnat1.5K views

Recently uploaded(20)

The Research Portal of Catalonia: Growing more (information) & more (services)The Research Portal of Catalonia: Growing more (information) & more (services)
The Research Portal of Catalonia: Growing more (information) & more (services)
CSUC - Consorci de Serveis Universitaris de Catalunya51 views
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web Developers
Maximiliano Firtman152 views
Green Leaf Consulting: Capabilities DeckGreen Leaf Consulting: Capabilities Deck
Green Leaf Consulting: Capabilities Deck
GreenLeafConsulting170 views
[2023] Putting the R! in R&D.pdf[2023] Putting the R! in R&D.pdf
[2023] Putting the R! in R&D.pdf
Eleanor McHugh34 views
Java Platform Approach 1.0 - Picnic MeetupJava Platform Approach 1.0 - Picnic Meetup
Java Platform Approach 1.0 - Picnic Meetup
Rick Ossendrijver23 views
CXL at OCPCXL at OCP
CXL at OCP
CXL Forum183 views

My adventure with Elm