Getting to know Elm

Getting to know Elm

They say React is just a library, but it could well have changed the way you write javascript applications. What if you could take that transformation even further? Elm is a functional programming language for writing HTML apps that replaces runtime exceptions with friendly compiler error messages, and a cacophony of modules with neat tooling and conventions. If you want to write great code, you should get to know Elm. But beware; it might change the way you build HTML apps forever.

241eb3a089132c5a0c65e765558a6735?s=128

Arjan van der Gaag

November 10, 2016
Tweet

Transcript

  1. elm A delightful language for reliable webapps.

  2. Arjan van der Gaag arjanvandergaag.nl • @avdgaag

  3. Arjan van der Gaag • Brightin • @avdgaag • yet

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

    x y = x + y
 <function> : number -> number -> number > adder 1 2
 3 : number > add1 = adder 1
 <function> : number -> number > add1 2
 3 : number
  5. Arjan van der Gaag • Brightin • @avdgaag > List.head

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

    a = Just a | Nothing
  7. Arjan van der Gaag • Brightin • @avdgaag > (List.head

    [1, 2, 3]) * 2
  8. 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
  9. Arjan van der Gaag • Brightin • @avdgaag > Maybe.map

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

    [1, 2, 3] of Just n -> workWith n Nothing -> doSomethingElse
  11. Arjan van der Gaag • Brightin • @avdgaag auto-currying functions,

    types, immutable values and
 a helpful compiler
  12. Arjan van der Gaag • Brightin • @avdgaag view update

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

    model event
  14. Arjan van der Gaag • Brightin • @avdgaag view =

    div [ class "wrapper" ] [ input [ type' "text" ] [] ]
  15. Arjan van der Gaag • Brightin • @avdgaag we describe

    our views using plain Elm functions
  16. Arjan van der Gaag • Brightin • @avdgaag view update

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

    model event
  18. Arjan van der Gaag • Brightin • @avdgaag type Maybe

    a = Just a | Nothing
  19. Arjan van der Gaag • Brightin • @avdgaag type User

    = AnonymousUser | LoggedInUser String
  20. Arjan van der Gaag • Brightin • @avdgaag type alias

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

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

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

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

    our domain with types, helping us make impossible states impossible
  25. Arjan van der Gaag • Brightin • @avdgaag view update

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

    model event
  27. Arjan van der Gaag • Brightin • @avdgaag type Msg

    = NoOp | SetQueryText String
  28. Arjan van der Gaag • Brightin • @avdgaag view :

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

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

    model event
  31. Arjan van der Gaag • Brightin • @avdgaag update :

    Msg -> Model -> Model
 update msg model = case msg of
 NoOp -> model
  32. 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: <https://github.com/elm-lang/elm-compiler/blob/0.17.1/hints/missing-patterns.md> The recommendations about wildcard patterns and `Debug.crash` are important! Detected errors in 1 module.
  33. Arjan van der Gaag • Brightin • @avdgaag update :

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

    describe all mutations in our system
  35. Arjan van der Gaag • Brightin • @avdgaag view update

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

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

    model event sub cmd
  38. 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 )
  39. 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 )
  40. 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
  41. 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
  42. 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
  43. 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
  44. Arjan van der Gaag • Brightin • @avdgaag type Msg

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

    runtime explicitly handles side effects
  46. 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
  47. 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
  48. 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
  49. Arjan van der Gaag • Brightin • @avdgaag -- ["term1",

    "term2"] decodeSuggestions : Json.Decode.Decoder Model decodeSuggestions = Json.Decode.list Json.Decode.string
  50. 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))
  51. Arjan van der Gaag • Brightin • @avdgaag boilerplate code


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

    code keeps us safe
  53. Arjan van der Gaag • Brightin • @avdgaag view update

    model event sub cmd
  54. Arjan van der Gaag • Brightin • @avdgaag • helpful

    compiler • explicit domain modeling • explicit side effects via the Elm runtime • predictable architecture
  55. brightin is looking or developers & designers

  56. brightin.nl is looking or developers & designers

  57. Arjan van der Gaag arjanvandergaag.nl • @avdgaag