Andrew Schutt
Dialects
Dialects
Dialects
Frameworks
Dialects
Frameworks
Packaging
Dialects
Frameworks
Packaging
Utilities
Dialect
Framework
Packaging
Utilities
It's all Elm!
Elm
compiles to
https://guide.elm-lang.org/install.html
compiles to
> elm make Main.elm --output elm.js
Main.elm
elm.js
> add 3 5 -- 8
> add 3 5 -- 8
> add 3 5 -- 8
var numbers = [1, 2, 3, 4, 5];
function doubleNumbers (numbers) {
const doubled = [];
const l = numbers.length;
for (let i = 0; i < l; i++) {
doubled.push(numbers[i] * 2);
};
return doubled;
};
myList = [1, 2, 3, 4, 5]
double n = n * 2
doubleNumbers list =
List.map double list
doubleNumbers myList
By Ptelea - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=16572537
* https://elm-lang.org/blog/small-assets-without-the-headache
* https://elm-lang.org/blog/blazing-fast-html-round-two
> elm make --optimize
function fetchCatz() {
return fetch('http://www.funnycatpix.com/')
.then(r => r.json())
.then(photo => { /* handle photo */ });
}
function fetchCatz() {
return fetch('http://www.funnycatpix.com/')
.then(r => r.json())
.then(photo => { /* handle photo */ });
}
fetchCatz : Cmd Msg
fetchCatz =
Http.get
{ url = "http://www.funnycatpix.com/"
, expect = Http.expectJson LoadCatz photoDecoder }
score : Int
score = 0
greeting : String
greeting = "Hello!"
needCoffee : Bool
needCoffee = True
numbers : List
numbers = [1, 2, 3, 4]
By Melburnian - Own work, CC BY 2.5, https://commons.wikimedia.org/w/index.php?curid=1287428
isNegative n = n < 0
isNegative n = n < 0
isNegative 4
False
isNegative -8
True
isNegative (-2 * -11)
False
\n -> n < 0
(\n -> n < 0) 4
False
(\n -> n < 0) -8
True
(\n -> n < 0) (-2 * -11)
False
add x y z = x + y + z
add 1 2 3
((add 1) 2) 3
add1 = add 1
add2 = add1 2
add2 3 -- 6
format str = String.trim (String.repeat 4 (String.toUpper str))
format str =
str
|> String.toUpper
|> String.repeat 4
|> String.trim
-- doubles ints and adds two results
doSomething x y =
(x * 2) + (y * 2)
-- doubles ints and adds two results
doSomething x y =
(x * 2) + (y * 2)
-- doubles ints and adds two results
doSomething x y =
(x * 2.0) + (y * 2.0)
doSomething : Int -> Int -> Int
doSomething x y =
(x * 2.0) + (y * 2.0)
doSomething : Float -> Float -> Float
doSomething x y =
(x * 2.0) + (y * 2.0)
numbers = [1, 2, 3, 4]
strings = ["one", "two" "three", "four"]
numsAndStrs = [1, "two", 3, "four"]
numbers = [1, 2, 3, 4]
strings = ["one", "two" "three", "four"]
numsAndStrs = [1, "two", 3, "four"]
album =
{ title = "Rubber Soul"
, artist = "The Beatles"
, tracks = [1, 2, 3, 4, 5]
}
album.title
"Rubber Soul" : String
album.title = "Abbey Road"
{ album | title = "Abbey Road" }
{ title = "Abbey Road"
, artist = "The Beatles"
, tracks = [1, 2, 3, 4, 5]
}
album = { title = "Rubber Soul", ... }
abbeyRoad = { album | title = "Abbey Road" }
abbeyRoad
{ title = "Abbey Road", ... }
album
{ title = "Rubber Soul", ... }
(1)
(1, "two")
(1, "two", 3.0)
(1, "two", 3.0, Four)
type alias Pet =
{ name : String
, breed : String
, age : Int
}
dog = Pet "Bunsen" "Dog" 0
puppyBirthday : Pet -> Int
puppyBirthday pet =
pet.age + 1
{ dog | age = puppyBirthday dog }
{ age = 1, breed = "Dog", name = "Bunsen" }
type alias Pet =
{ name : String
, breed : String
, age : Int
}
dog = Pet "Bunsen" "Dog" 0
puppyBirthday : Pet -> Int
puppyBirthday pet =
pet.age + 1
{ dog | age = puppyBirthday dog }
{ age = 1, breed = "Dog", name = "Bunsen" }
type alias Pet =
{ name : String
, breed : String
, age : Int
}
dog = Pet "Bunsen" "Dog" 0
puppyBirthday : Pet -> Int
puppyBirthday pet =
pet.age + 1
{ dog | age = puppyBirthday dog }
{ age = 1, breed = "Dog", name = "Bunsen" }
type alias Pet =
{ name : String
, breed : String
, age : Int
}
dog = Pet "Bunsen" "Dog" 0
puppyBirthday : Pet -> Int
puppyBirthday pet =
pet.age + 1
{ dog | age = puppyBirthday dog }
{ age = 1, breed = "Dog", name = "Bunsen" }
type Breed = Dog | Cat | Parrot
type alias Pet =
{ name : String
, breed : String
, age : Int
}
type Breed = Dog | Cat | Parrot
type alias Pet =
{ name : String
, breed : Breed
, age : Int
}
dog = Pet "Bunsen" "Dog" 0
dog = Pet "Bunsen" Dog 0
dog = Pet "Bunsen" Dog 1
cat = Pet "Beaker" Cat 6
talk : Pet -> String
talk pet =
case pet of
Dog ->
"Bark! Bark!"
Cat ->
"Meow! Meow!"
dog = Pet "Bunsen" Dog 1
cat = Pet "Beaker" Cat 6
talk : Pet -> String
talk pet =
case pet of
Dog ->
"Bark! Bark!"
Cat ->
"Meow! Meow!"
dog = Pet "Bunsen" Dog 1
cat = Pet "Beaker" Cat 6
talk : Pet -> String
talk pet =
case pet of
Dog ->
"Bark! Bark!"
Cat ->
"Meow! Meow!"
talk : Pet -> String
talk pet =
case pet of
Dog ->
"Bark! Bark!"
Cat ->
"Meow! Meow!"
Parrot ->
"Squawk! Squawk!
type Maybe a
= Just a
| Nothing
type Maybe a
= Just a
| Nothing
Just 3.14 : Maybe Float
Just "hi" : Maybe String
Just True : Maybe Bool
Nothing : Maybe a
Packages -> elm install
Compiler -> elm make
REPL -> elm repl
Dev Server -> elm reactor
Framework -> Elm Architecture
Model
View
Model
View
Model
View
Model
Update
View
Model
Update
View
Model
Update
View
Model
Update
Elm Runtime
-- MODEL
type alias Model = { ... }
-- UPDATE
type Msg = Reset | ...
update : Msg -> Model -> Model
update msg model =
case msg of
Reset -> ...
...
-- VIEW
view : Model -> Html Msg
view model =
...
-- MODEL
type alias Model = { ... }
-- UPDATE
type Msg = Reset | ...
update : Msg -> Model -> Model
update msg model =
case msg of
Reset -> ...
...
-- VIEW
view : Model -> Html Msg
view model =
...
-- MODEL
type alias Model = { ... }
-- UPDATE
type Msg = Reset | ...
update : Msg -> Model -> Model
update msg model =
case msg of
Reset -> ...
...
-- VIEW
view : Model -> Html Msg
view model =
...
-- MODEL
type alias Model = { ... }
-- UPDATE
type Msg = Reset | ...
update : Msg -> Model -> Model
update msg model =
case msg of
Reset -> ...
...
-- VIEW
view : Model -> Html Msg
view model =
...
> elm make src/Main.elm
> elm make src/Main.elm --output=main.js
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script>
</head>
<body>
<div id="elm"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('elm')
});
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script>
</head>
<body>
<div id="elm"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('elm')
});
</script>
</body>
</html>
var app = Elm.Main.init({
node: document.getElementById('elm')
});
var app = Elm.Main.init({
node: document.getElementById('elm'),
flags: Date.now()
});
By Jim.henderson - Own work, CC0, https://commons.wikimedia.org/w/index.php?curid=15909555