$30 off During Our Annual Pro Sale. View Details »

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.

Arjan van der Gaag

November 10, 2016
Tweet

More Decks by Arjan van der Gaag

Other Decks in Programming

Transcript

  1. elm
    A delightful language for reliable webapps.

    View Slide

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

    View Slide

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

    View Slide

  4. 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

    View Slide

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

    Just 1 : Maybe.Maybe number
    > List.head []

    Nothing : Maybe.Maybe a

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  11. Arjan van der Gaag • Brightin • @avdgaag
    auto-currying functions, types,
    immutable values and

    a helpful compiler

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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
    }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. Arjan van der Gaag • Brightin • @avdgaag
    update : Msg -> Model -> Model

    update msg model =
    case msg of

    NoOp ->
    model

    View Slide

  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:

    The recommendations about wildcard patterns and `Debug.crash` are important!
    Detected errors in 1 module.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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
    )

    View Slide

  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
    )

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  45. Arjan van der Gaag • Brightin • @avdgaag
    the elm runtime explicitly
    handles side effects

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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))

    View Slide

  51. Arjan van der Gaag • Brightin • @avdgaag
    boilerplate code

    keeps us safe

    View Slide

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

    View Slide

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

    View Slide

  54. Arjan van der Gaag • Brightin • @avdgaag
    • helpful compiler
    • explicit domain modeling
    • explicit side effects via the Elm runtime
    • predictable architecture

    View Slide

  55. brightin
    is looking or developers & designers

    View Slide

  56. brightin.nl
    is looking or developers & designers

    View Slide

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

    View Slide