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.

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