elm slides kho tài liệu bách khoa

pluralize singular plural quantity = if quantity == 1 then singular else plural... pluralize singular plural quantity =... pluralize singular plural quantity =... pluralize singular p

welcome to elm!

please follow these instructions to get set up:

@rtfeldman

1 Rendering a Page

compiles to

functions

arguments

no parentheses

required

expression

JS: quantity === 1 ? singular : plural

call pluralize passing 3 arguments

call text passing 1 argument

import the Html module

why bother?

comments about comments

this is a comment

{- this is a

block comment -}

Virtual DOM

<ul class="highway"> <li>danger</li> <li>zone</li>

</ul>

<ul class="highway">

<li>danger</li>

<li>zone</li>

<ul class="highway">

<li>danger</li>

<li>zone</li>

<ul class="highway">

<li>danger</li>

<li>zone</li>

Exercise: resolve the TODOs in part1/Main.elm

<ul class="highway">

<li>danger</li>

<li>zone</li>

</ul>

ul [ class "highway" ] [ li [] [ text "danger" ] , li [] [ text "zone" ] ]

2 Basic Data Structures

strings

"foo" ++ "bar" == "foobar"

"foo" ++ "bar" == "foobar"

"foo" + "bar" === "foobar" // JS

toString 5 == "5"

let-expressions

pluralize singular plural quantity =

if quantity == 1 then

singular

else

plural

pluralize singular plural quantity =

pluralize singular plural quantity =

pluralize singular plural quantity =

pluralize singular plural quantity =

let quantityStr = toString quantity

prefix = quantityStr ++ " "

in

if quantity == 1 then

else prefix ++ plural

let-expression

pluralize singular plural quantity =

pluralize singular plural quantity =

Records, Tuples, and Lists

record =

{ name = "thing", x = 1, y = 3 }

[ 1, 2, 3 ]

[ [ "foo", "bar" ], [ "baz" ] ]

[ 1, 2, 3 ] [ [ "foo", "bar" ], [ "baz" ] ]

[ "foo", 66 ]

what does this rule get us?

Records Tuples Lists

Records Tuples Lists

fixed

length

fixed length

variable length

Records Tuples Lists

mixed

contents

mixed contents

uniform contents

fixed

length

fixed length

variable length

Exercise: resolve the TODOs in part2/Main.elm

negate (5 + 9) == -14 toString 99 ++ " balloons"

== "99 balloons"

3 Adding Interaction

booleans

TrueFalse

x == y

False

x == y

not (x == y)

partial application

function pluralizeLeaves(quantity) {

return pluralize("leaf", "leaves", quantity);}

function pluralizeLeaf(plural, quantity) {

return pluralize("leaf", plural, quantity);}

pluralizeLeaf plural quantity =

pluralize "leaf" plural quantity

pluralizeLeaf =

pluralize "leaf"

List.filter

isKeepable num = num >= 2

List.filter isKeepable [ 1, 2, 3 ]

== [ 2, 3 ]

Elm: (\foo -> foo + 1)

JS: (function(foo) { return foo + 1 })

List.filter (\num -> num >= 2) [ 1, 2, 3 ]

== [ 2, 3 ]

isKeepable num = num >= 2

List.filter isKeepable [ 1, 2, 3 ]

== [ 2, 3 ]

List.map

double num = num * 2

double num =

num * 2

List.map double [ 1, 2, 3 ]

double num =

num * 2

List.map double [ 1, 2, 3 ]

== [ 2, 4, 6 ]

List.map negate [ 1, 2, -3 ]

List.map (pluralize "leaf" "leaves") [ 1, 2, 3 ]

== [ "1 leaf", "2 leaves", "3 leaves" ]

The Elm Architecture

model view update

view model =

div [ class "content" ] []

Html

Elm Runtime

Html h1 [] [ text "ElmHub" ]

Elm Runtime

Model

Html h1 [] [ text "ElmHub" ]

Elm Runtime

maxResults and Show More

potential feature:

{ operation = "SHOW_MORE", data = 10

}

{ operation = "SHOW_MORE"

, data = 10

}

update msg model =

if msg.operation == "SHOW_MORE" then

{ maxResults = model.maxResults + msg.data } else

model

update msg model =

if msg.operation == "SHOW_MORE" then

{ maxResults = model.maxResults + msg.data }

update msg model =

if msg.operation == "SHOW_MORE" then

{ maxResults = model.maxResults + msg.data } else

model

update msg model =

if msg.operation == "SHOW_MORE" then

{ model | maxResults = model.maxResults + msg.data }

else

model

Elm Runtime

view

onClick

{ operation = "SHOW_MORE", data = 10 }

onClick { operation = "SHOW_MORE", data = 10 }

[ onClick { operation = "SHOW_MORE", data = 10 } ] [ text "Show More" ]

DELETE_BY_ID

Elm Runtime

view

Exercise: resolve the TODOs in part3/Main.elm

Elm: (\foo -> foo + 1)

JS: (function(foo) { return foo + 1 })

{ animals | cats = animals.cats + 1 }

List.filter (\num -> num >= 2) [ 1, 2, 3 ]

== [ 2, 3 ]

4 Annotations

query is a string

query = "tutorial"

query : String

query = "tutorial"

stars : Int

stars = 123

searchResult : { name : String, stars : Int }

searchResult = { name = "blah", stars = 415 }

list : List String

list = [ "foo", "bar", "baz" ]

list : List Float

list = [ 1.1, 2.2, 3.3 ]

list : List Int

list = [ 1.1, 2.2, 3.3 ]

ERROR!

type alias SearchResult =

{ id : Int

, name : String

, stars : Int

}

type alias Model =

type alias Msg =

{ operation : String , data : Int

}

type alias Msg =

{ operation : String , data : Int

}

view : Model -> Html Msg

view model =

type alias Msg =

{ operation : String , data : Int

}

view : Model -> Html Msg

view model =

view : Model -> Html String

view model =

button [ onClick "RESET" ] [ text "Reset All" ]

view : Model -> Html Float

view model =

button [ onClick 12.34 ] [ text "Reset All" ]

view : Model -> Html Msg

view model =

button [ onClick { operation = "RESET", data = "all" } ] [ text "Reset All" ]

pluralize : String -> String -> Int -> String

elm-repl

Exercise: resolve the TODOs in part4/Main.elm

pluralize : String -> String -> Int -> String

5 Union Types

case-expressions

if msg.operation == "DELETE_BY_ID" then

else if msg.operation == "LOAD_RESULTS" then

else

union types

type Sorting =

Ascending | Descending | Randomized

type Sorting

= Ascending | Descending | Randomized

type Bool = True | False

type Sorting

String -> Sorting

type alias Msg =

{ operation : String , data : Int

}

}

}

{ operation = "SET_QUERY"

, data = "tutorial"

}

type Msg

= SetQuery String | DeleteById Int

type alias Msg =

{ operation : String , data : Int

}

function (String -> Sorting)

Exercise: resolve the TODOs in part5/Main.elm

6 Decoding JSON

in JavaScript

parseInt("42")

parseInt("42") == 42

parseInt("halibut")

parseInt("42") == 42 parseInt("halibut") == NaN

String.toInt

String.toInt "42"

String.toInt "42" == Ok 42

type Result =

Maybe

type Result =

type Maybe =

Nothing

List.head [ 5, 10, 15 ] == Just 5

type Maybe =

Nothing

List.head [ 5, 10, 15 ] == Just 5 List.head [] == Nothing

pipelines

List.filter (\num -> num < 5) [ 2, 4, 6, 8 ]

List.reverse (List.filter (\num -> num < 5) [ 2, 4, 6, 8 ])

decoders

decodeString float "123.45"

== Ok 123.45

decodeString float "123.45"

== Ok 123.45

decodeString float "blah"

decodeString float "123.45"

== Ok 123.45

decodeString float "blah"

== Err "blah is not a float!"

decodeString (list int) "[1, 2, 3]"

== Ok [ 1, 2, 3 ]

decodeString (list int) "[1, 2, 3]"

== Ok [ 1, 2, 3 ]

"[1, 2, 3]"

|> decodeString (list int)

== Ok [ 1, 2, 3 ]

decoding objects into records

makeGameState score playing =

{ score = score, playing = playing }

makeGameState score playing =

{ score = score, playing = playing }decoder =

???

makeGameState score playing =

{ score = score, playing = playing }

decoder =

???

decodeString decoder

"""{"score": 5.5, "playing": true}"""

== Ok { score = 5.5, playing = True }

makeGameState score playing =

{ score = score, playing = playing }

decoder =

decode makeGameState

|> required "score" float

|> required "playing" bool

decodeString decoder

"""{"score": 5.5, "playing": true}"""

== Ok { score = 5.5, playing = True }

makeGameState score playing =

{ score = score, playing = playing }

decoder =

decode makeGameState

|> required "score" float

|> required "playing" bool

decodeString decoder

"""{"score": 5.5, "playing": true}"""

== Ok { score = 5.5, playing = True }

makeGameState score playing =

{ score = score, playing = playing }

decoder =

decode makeGameState

|> required "score" float

|> required "playing" bool

decodeString decoder

"""{"score": 5.5, "playing": true}"""

== Ok { score = 5.5, playing = True }

type alias GameState =

{ score : Float, playing : Bool }

makeGameState : Float -> Bool -> GameState

{ score = score, playing = playing }

type alias GameState =

{ score : Float, playing : Bool }

GameState : Float -> Bool -> GameState

makeGameState : Float -> Bool -> GameState

{ score = score, playing = playing }

type alias GameState =

{ score : Float, playing : Bool }

GameState : Float -> Bool -> GameState

makeGameState : Float -> Bool -> GameStatemakeGameState score playing =

{ score = score, playing = playing }

type alias GameState =

{ score : Float, playing : Bool }

decoder =

decode GameState

|> required "score" float

|> required "playing" bool

decodeString decoder

"""{"score": 5.5, "playing": true}"""

== Ok { score = 5.5, playing = True }

type alias GameState =

{ score : Float, playing : Bool }

decoder =

decode GameState

|> required "score" float

|> required "playing" bool

decodeString decoder

"""{"score": 5.5, "playing": true}"""

== Ok { score = 5.5, playing = True }

type alias GameState = { score : Float, playing : Bool }

decoder = decode GameState

|> required "score" float |> required "playing" boolExercise: resolve the TODOs in part6/Main.elm

7 Client-Server Communication

function guarantees

same arguments?

same return value

Math.random()

Math.random()

pickGreeting : List String -> String

pickGreeting : List String -> String

pickGreeting : List String -> Cmd Msg

pickGreeting : List String -> String

Elm Runtime

Html

Msg

Elm Runtimehow the Elm Runtime talks to update Html Msg

update : Msg -> Model -> Model

update : Msg -> Model -> ( Model, Cmd Msg )

pickGreeting : List String -> Cmd Msg

( model, pickGreeting greetings )

Model

another function guarantee

no side effects

no modifying external state

fire-and-forget HTTP POST

fire-and-forget HTTP POST

✓ same arguments, same result

fire-and-forget HTTP POST

✗ does not modify external state

✓ same arguments, same result

side effects

managed effects

Cmd

Http.getString

getString : String -> Cmd String

what if it looked like this?

getString : String -> Cmd String

what if it looked like this?

it always produces a string?

getString : String -> Task Http.Error String

result if it fails

getString : String -> Task Http.Error String

result if it succeeds

Task Cmd

Task Cmd

Task Cmd

(\err -> ShowError err)

(\json -> SetJson json)

(Http.getString "https://api.github.com?q=blah")

Task Cmd

translate failure into a Msg

translate success into a Msg

Http.getString "https://api.github.com?q=blah"

|> Task.perform ShowError SetJson

Task Cmd

translate failure into a Msg

translate success into a Msg

translate failure into a Msg

translate success into a Msg

success gives you a String

Http.getString url

success gives you a String

Http.getString url

success gives you a SearchResult

Http.get searchResultDecoder url

Exercise: resolve the TODOs in part7/Main.elm

cmd : Cmd Msg

cmd =

Http.getString "https://api.github.com?q=blah"

|> Task.perform ShowError SetJson

success gives you a SearchResult

Http.get searchResultDecoder url

day 1 wrap

Slack: elmlang.herokuapp.com

Helpful Resources

Weekly News: elmweekly.nl

Google Group: elm-discuss