Getting to know Elm - Speaker Deck

Slide 1

Slide 1 text

elm A delightful language for reliable webapps.

Slide 2

Slide 2 text

Arjan van der Gaag arjanvandergaag.nl • @avdgaag

Slide 3

Slide 3 text

Arjan van der Gaag • Brightin • @avdgaag • yet another language • yet another framework • constantly pleasing the compiler • it’s not Haskell

Slide 4

Slide 4 text

Arjan van der Gaag • Brightin • @avdgaag > adder x y = x + y  : number -> number -> number > adder 1 2  3 : number > add1 = adder 1  : number -> number > add1 2  3 : number

Slide 5

Slide 5 text

Arjan van der Gaag • Brightin • @avdgaag > List.head [1, 2, 3]  Just 1 : Maybe.Maybe number > List.head []  Nothing : Maybe.Maybe a

Slide 6

Slide 6 text

Arjan van der Gaag • Brightin • @avdgaag type Maybe a = Just a | Nothing

Slide 7

Slide 7 text

Arjan van der Gaag • Brightin • @avdgaag > (List.head [1, 2, 3]) * 2

Slide 8

Slide 8 text

Arjan van der Gaag • Brightin • @avdgaag The left argument of (*) is causing a type mismatch. 3| List.head [1, 2, 3]) * 2 ^^^^^^^^^^^^^^^^^^^ (*) is expecting the left argument to be a: number But the left argument is: Maybe number

Slide 9

Slide 9 text

Arjan van der Gaag • Brightin • @avdgaag > Maybe.map ((*) 2) (Just 3)  Just 6 : Maybe.Maybe number > Maybe.map ((*) 2) Nothing  Nothing : Maybe.Maybe number

Slide 10

Slide 10 text

Arjan van der Gaag • Brightin • @avdgaag case List.head [1, 2, 3] of Just n -> workWith n Nothing -> doSomethingElse

Slide 11

Slide 11 text

Arjan van der Gaag • Brightin • @avdgaag auto-currying functions, types, immutable values and  a helpful compiler

Slide 12

Slide 12 text

Arjan van der Gaag • Brightin • @avdgaag view update model event

Slide 13

Slide 13 text

Arjan van der Gaag • Brightin • @avdgaag view update model event

Slide 14

Slide 14 text

Arjan van der Gaag • Brightin • @avdgaag view = div [ class "wrapper" ] [ input [ type' "text" ] [] ]

Slide 15

Slide 15 text

Arjan van der Gaag • Brightin • @avdgaag we describe our views using plain Elm functions

Slide 16

Slide 16 text

Arjan van der Gaag • Brightin • @avdgaag view update model event

Slide 17

Slide 17 text

Arjan van der Gaag • Brightin • @avdgaag view update model event

Slide 18

Slide 18 text

Arjan van der Gaag • Brightin • @avdgaag type Maybe a = Just a | Nothing

Slide 19

Slide 19 text

Arjan van der Gaag • Brightin • @avdgaag type User = AnonymousUser | LoggedInUser String

Slide 20

Slide 20 text

Arjan van der Gaag • Brightin • @avdgaag type alias Euros = Int type alias Cents = Int type alias Money = (Euros, Cents) type alias Model = { query : String }

Slide 21

Slide 21 text

Arjan van der Gaag • Brightin • @avdgaag view = div [ class "wrapper" ] [ input [ type' “text" ] [] ]

Slide 22

Slide 22 text

Arjan van der Gaag • Brightin • @avdgaag view model = div [ class "wrapper" ] [ input [ type' “text" ] [] ]

Slide 23

Slide 23 text

Arjan van der Gaag • Brightin • @avdgaag view model = div [ class "wrapper" ] [ input [ type' "text" , value model.query ] [] ]

Slide 24

Slide 24 text

Arjan van der Gaag • Brightin • @avdgaag we model our domain with types, helping us make impossible states impossible

Slide 25

Slide 25 text

Arjan van der Gaag • Brightin • @avdgaag view update model event

Slide 26

Slide 26 text

Arjan van der Gaag • Brightin • @avdgaag view update model event

Slide 27

Slide 27 text

Arjan van der Gaag • Brightin • @avdgaag type Msg = NoOp | SetQueryText String

Slide 28

Slide 28 text

Arjan van der Gaag • Brightin • @avdgaag view : Model -> Html Msg view model = div [ class "wrapper" ] [ input [ type' "text" , value model.query ] [] ]

Slide 29

Slide 29 text

Arjan van der Gaag • Brightin • @avdgaag view : Model -> Html Msg view model = div [ class "wrapper" ] [ input [ type' "text" , value model.query , onInput SetQueryText ] [] ]

Slide 30

Slide 30 text

Arjan van der Gaag • Brightin • @avdgaag view update model event

Slide 31

Slide 31 text

Arjan van der Gaag • Brightin • @avdgaag update : Msg -> Model -> Model  update msg model = case msg of  NoOp -> model

Slide 32

Slide 32 text

Arjan van der Gaag • Brightin • @avdgaag This `case` does not have branches for all possibilities. 60|> case msg of 61|> NoOp -> 62|> model ! [] 63|> You need to account for the following values: Main.SetQueryText _ Add a branch to cover this pattern! If you are seeing this error for the first time, check out these hints: The recommendations about wildcard patterns and `Debug.crash` are important! Detected errors in 1 module.

Slide 33

Slide 33 text

Arjan van der Gaag • Brightin • @avdgaag update : Msg -> Model -> Model update msg model = case msg of NoOp -> model SetQueryText str -> { model | query = str }

Slide 34

Slide 34 text

Arjan van der Gaag • Brightin • @avdgaag we explicitly describe all mutations in our system

Slide 35

Slide 35 text

Arjan van der Gaag • Brightin • @avdgaag view update model event

Slide 36

Slide 36 text

Arjan van der Gaag • Brightin • @avdgaag view update model event sub

Slide 37

Slide 37 text

Arjan van der Gaag • Brightin • @avdgaag view update model event sub cmd

Slide 38

Slide 38 text

Arjan van der Gaag • Brightin • @avdgaag update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of SetQueryText str -> ( { model | query = str } , getSuggestions str )

Slide 39

Slide 39 text

Arjan van der Gaag • Brightin • @avdgaag update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of SetQueryText str -> ( { model | query = str } , getSuggestions str )

Slide 40

Slide 40 text

Arjan van der Gaag • Brightin • @avdgaag getSuggestions : String -> Cmd Msg getSuggestions query = let url = Http.url "http://example.com" [("term", query)] task = Http.get callback url in Task.perform Failure Success task

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Arjan van der Gaag • Brightin • @avdgaag type Msg = NoOp | SetQueryText String | Failure Http.Error | Success (List String)

Slide 45

Slide 45 text

Arjan van der Gaag • Brightin • @avdgaag the elm runtime explicitly handles side eﬀects

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Arjan van der Gaag • Brightin • @avdgaag getSuggestions : String -> Cmd Msg getSuggestions query = let url = Http.url "http://example.com" [("term", query)] task = Http.get decodeSuggestions url in Task.perform Failure Success task

Slide 49

Slide 49 text

Arjan van der Gaag • Brightin • @avdgaag -- ["term1", "term2"] decodeSuggestions : Json.Decode.Decoder Model decodeSuggestions = Json.Decode.list Json.Decode.string

Slide 50

Slide 50 text

Arjan van der Gaag • Brightin • @avdgaag type alias Person = { name : String , age : Int , profession : Maybe String } person : Decoder Person person = object3 Person ("name" := string) ("age" := int) (maybe ("profession" := string))

Slide 51

Slide 51 text

Arjan van der Gaag • Brightin • @avdgaag boilerplate code  keeps us safe

Slide 52

Slide 52 text

Arjan van der Gaag • Brightin • @avdgaag boilerplate explicit code keeps us safe

Slide 53

Slide 53 text

Arjan van der Gaag • Brightin • @avdgaag view update model event sub cmd

Slide 54

Slide 54 text

Arjan van der Gaag • Brightin • @avdgaag • helpful compiler • explicit domain modeling • explicit side eﬀects via the Elm runtime • predictable architecture