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

"client/server" communicationElm sends data to JS JS sends data to Elm no direct function calls... Cmd Msgworks with update functions that accept Msg produces messages of type Msg... Cmd

Trang 1

@rtfeldman

Trang 2

8 JavaScript Interop

Trang 3

function guarantees

Trang 4

same arguments?

no side effects

Trang 5

Math.random()

Trang 6

localStorage.foo = "bar";

Trang 7

access huge JS ecosystem

Trang 8

while maintaining guarantees access huge JS ecosystem

Trang 9

"client/server" communication

Trang 10

Elm sends data to JS

JS sends data to Elm

Trang 11

"client/server" communication

Elm sends data to JS

JS sends data to Elm

no direct function calls

Trang 12

Cmd on the Elm side

callback on JS side

Trang 13

Cmd Msg

Trang 14

Cmd msg

Trang 15

type variables

Trang 16

List.reverse [ "foo", "bar", "baz" ] == [ "baz", "bar", "foo" ]

List.reverse [ 1.1, 2.2, 3.3 ]

== [ 3.3, 2.2, 1.1 ]

List.reverse [ True, False, False ] == [ False, False, True ]

Trang 17

reverse :

Trang 18

reverse : List ??? -> List ???

Trang 19

reverse : List val -> List val

Trang 20

type variable

Trang 21

reverse : List thing -> List thing

reverse : List a -> List a

Trang 22

elmHubHeader : Html Msg

elmHubHeader =

header []

[ h1 [] [ text "ElmHub" ]

, span [ class "tagline" ]

[ text "Like GitHub " ] ]

Trang 23

elmHubHeader : Html Msg

elmHubHeader =

header []

"this is compatible with Html that produces Msg"

Trang 24

elmHubHeader : Html msg

elmHubHeader =

header []

Trang 25

elmHubHeader : Html a

elmHubHeader =

header []

Trang 26

Cmd Msg

produces messages of type Msg

Trang 27

Cmd Msg

works with update functions that accept Msg

produces messages of type Msg

Trang 28

Cmd Msg

Cmd msg

works with any update function

Trang 29

Cmd Msg

Cmd msg

works with any update function

because it never produces any messages!

Trang 30

the port keyword

&

index.html

Trang 31

subscriptions

Trang 32

view update

Elm Runtime

Cmd Msg

Model

Trang 33

view update

Elm Runtime

Cmd Msg Model

subscriptions

Trang 34

view update

Elm Runtime

Cmd Msg Model

subscriptions Msg

Trang 35

view update

Trang 36

github.js

Trang 37

Exercise: resolve the TODOs in part8

decodeString responseDecoder json

decodeValue responseDecoder json

Trang 38

9 Testing

Trang 39

"version": "1.0.0",

"summary": "Like GitHub, but for Elm stuff.",

"repository": "https://github.com/rtfeldman/elm-workshop.git", "license": "BSD-3-Clause",

Trang 40

"version": "1.0.0",

Trang 41

"version": "1.0.0",

Trang 42

elm-package.json Main.elm

ElmHub.elm

Trang 43

"version": "1.0.0",

Trang 44

"version": "1.0.0",

Trang 45

"version": "1.0.0",

Trang 46

"NoRedInk/elm-decode-pipeline": "1.1.2 <= v < 2.0.0"

Trang 50

major minor patch

Trang 51

"NoRedInk/elm-decode-pipeline": "1.1.2 <= v < 2.0.0"

1.1.2 major minor patch

semantic versioning automatically enforced

Trang 52

elm-package.json Main.elm

ElmHub.elm

Trang 53

Tests.elm

Trang 54

"elm-lang/core": "4.0.1 <= v < 5.0.0",

"elm-lang/html": "1.0.0 <= v < 2.0.0",

"evancz/elm-http": "3.0.1 <= v < 4.0.0",

"rtfeldman/html-test-runner": "1.0.0 <= v < 2.0.0", "rtfeldman/node-test-runner": "2.0.0 <= v < 3.0.0"

}

tests/elm-package.json

tests

Trang 55

"elm-lang/core": "4.0.1 <= v < 5.0.0",

"elm-lang/html": "1.0.0 <= v < 2.0.0",

"evancz/elm-http": "3.0.1 <= v < 4.0.0",

}

tests main source

Trang 56

"elm-lang/core": "4.0.1 <= v < 5.0.0",

"elm-lang/html": "1.0.0 <= v < 2.0.0",

"evancz/elm-http": "3.0.1 <= v < 4.0.0",

}

Trang 57

"elm-lang/core": "4.0.1 <= v < 5.0.0",

"elm-lang/html": "1.0.0 <= v < 2.0.0",

"evancz/elm-http": "3.0.1 <= v < 4.0.0",

}

Trang 58

package.elm-lang.org

Trang 59

unit tests

Trang 60

"[ 1, 2, 3 ]"

|> decodeString (list int)

|> Expect.equal (Ok [ 1, 2, 3])

Trang 62

\throwawayArgument ->

"[ 1, 2, 3 ]"

Trang 63

() empty tuple, aka "Unit"

\throwawayArgument ->

"[ 1, 2, 3 ]"

Trang 64

\() ->

"[ 1, 2, 3 ]"

Trang 65

test "it successfully decodes" (

Trang 66

[ 2, 4, 6, 8 ]

|> List.filter (\num -> num < 5)

|> List.reverse

Trang 68

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

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

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

Trang 69

test "it successfully decodes" (

Trang 70

test "it successfully decodes" <|

\() ->

"[ 1, 2, 3 ]"

Trang 71

describe "decoder tests"

[ test "it successfully decodes" <|

Trang 72

describe "all my tests"

[ describe "decoder tests"

[ test "it successfully decodes" <|

\() ->

"[ 1, 2, 3 ]"

|> Expect.equal (Ok [ 1, 2, 3]) ]

]

Trang 73

test "Reversing twice does nothing" <| \() ->

[ 1, 2, 3 ]

|> List.reverse

|> Expect.equal [ 1, 2, 3 ]

Trang 74

fuzz int "Reversing twice does nothing" <|

Trang 75

fuzz (list int) "Reversing twice does nothing" <| \randomList ->

randomList

|> List.reverse

|> Expect.equal randomList

Trang 76

fuzz2 int float "Integers are bigger than floats" <| \randomInt randomFloat- >

randomInt

|> Expect.greaterThan randomFloat

Trang 77

fuzz2 int float "Integers are bigger than floats" <| \randomInt randomFloat->

randomInt

|> Expect.greaterThan randomFloat

Exercise: resolve the TODOs in part9

test "it decodes successfully" <|

\() ->

"[ 1, 2, 3 ]"

|> decodeString (list int) |> Expect.equal (Ok [ 1, 2, 3])

Trang 78

10 Delegation

Trang 79

Adding Search Options

Trang 80

searchIn userFilter minStars

Trang 81

type Msg = Search | SetQuery String | DeleteById Int

| SetMinStars Int | SetSearchIn String | SetUserFilter String

type alias Model =

{ query : String

, results : List SearchResult

, errorMessage : Maybe String

, minStars : Int

, searchIn : String

, userFilter : String

}

Trang 82

| SetMinStars String

| SetSearchIn String | SetUserFilter String

type alias Model =

{ query : String

Trang 83

type alias Model =

{ query : String

Trang 84

type alias Model =

{ query : String

Trang 85

type alias Model =

{ query : String

Trang 86

type alias Model =

{ query : String

Trang 87

type alias Model =

{ query : String

Trang 88

type alias Model =

{ query : String

Trang 89

type alias Model =

{ query : String

Trang 90

type OptionsMsg = SetMinStars String | SetSearchIn String | SetUserFilter String

type alias Model =

{ query : String

Trang 91

type Msg = Search | SetQuery String | DeleteById Int | Options OptionsMsg

type alias Model =

{ query : String

Trang 92

type alias Model =

{ query : String

Trang 93

type alias Model =

{ query : String

Trang 94

type alias SearchOptions =

Trang 95

type alias SearchOptions =

viewOptions : SearchOptions -> Html OptionsMsg

input [] [ value model.options.sort, onInput (Options SetSort) ]

Trang 96

viewOptions options =

input [] [ value options.sort, onInput SetSort ]

Trang 97

view : Model -> Html Msg

view model =

div [ class "content" ]

[ input [ defaultValue model.query, onInput SetQuery ] [] , button [ onClick Search ] [ text "Search" ]

]

Trang 98

view model =

]

Trang 99

view model =

]

Trang 100

view model =

]

List String List Int

Trang 101

view model =

]

List String

Trang 102

view model =

[ input [ defaultValue model.query, onInput SetQuery ] []

, button [ onClick Search ] [ text "Search" ]

]

List String

String.length : String -> Int

Trang 103

view model =

]

Html String

Trang 104

view model =

]

Html String

Trang 105

Html OptionsMsg

Html Msg

Trang 106

Html OptionsMsg

Html.map

Html Msg

Trang 107

Html OptionsMsg

Html.map ???

Html Msg

Trang 108

Html OptionsMsg OptionsMsg -> Msg

Html.map ???

Html Msg

Trang 109

Html OptionsMsg OptionsMsg -> Msg Html.map ???

Html Msg

Trang 110

Html OptionsMsg OptionsMsg -> Msg Html.map ???

Html Msg

Trang 111

view model =

]

Trang 112

view model =

, viewOptions model.options

]

Định dạng
Số trang	282
Dung lượng	1,24 MB