Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Elm 0.19.0 Changes

Elm 0.19.0 Changes

An overview of Elm 0.19.0 changes with upgrade experiences stemmed from an existing app and open sourced packages.

Brooke Kuhlmann

October 24, 2022
Tweet

More Decks by Brooke Kuhlmann

Other Decks in Programming

Transcript

  1. Elm 0.19.0 Changes
    Presented by Brooke Kuhlmann

    View Slide

  2. 🎉
    (after ~2 years)
    Elm 0.19.0!
    🎉

    View Slide

  3. Highlights
    https://elm-lang.org/blog/small-assets-without-the-headache

    View Slide

  4. Highlights
    https://elm-lang.org/blog/small-assets-without-the-headache
    🎉

    View Slide

  5. Highlights
    https://elm-lang.org/blog/small-assets-without-the-headache

    View Slide

  6. Highlights
    https://elm-lang.org/blog/small-assets-without-the-headache
    • Dead Code Elimination

    View Slide

  7. Highlights
    https://elm-lang.org/blog/small-assets-without-the-headache
    • Dead Code Elimination
    • Record Field Renaming

    View Slide

  8. Highlights
    https://elm-lang.org/blog/small-assets-without-the-headache
    • Dead Code Elimination
    • Record Field Renaming
    • Faster Compile Times

    View Slide

  9. Highlights
    https://elm-lang.org/blog/small-assets-without-the-headache
    • Dead Code Elimination
    • Record Field Renaming
    • Faster Compile Times
    😂

    View Slide

  10. Highlights
    https://elm-lang.org/blog/small-assets-without-the-headache
    • Dead Code Elimination
    • Record Field Renaming
    • Faster Compile Times
    😂

    person.name → p.n

    View Slide

  11. Highlights
    https://elm-lang.org/blog/small-assets-without-the-headache
    • Dead Code Elimination
    • Record Field Renaming
    • Faster Compile Times

    😂

    person.name → p.n

    View Slide

  12. Existing Project
    Lines of Code
    ----------------------------- --------------- ------------- ---------------- ------
    Language
    fi
    les blank comment code
    ----------------------------- --------------- ------------- ---------------- ------
    YAML 332 26 25 58856
    Ruby 932 6675 1404 32248
    Elm 75 1731 320 8435
    Markdown 10 856 0 2667
    Sass 42 401 0 2102
    ERB 26 131 118 767
    Slim 11 127 7 398
    HTML 3 15 3 182
    JavaScript 3 23 8 73
    JSON 2 0 0 48
    Bourne Shell 1 4 0 18
    ----------------------------- --------------- ------------- ---------------- ------
    SUM: 1437 9989 1885 105794
    ----------------------------- --------------- ------------- ---------------- ------
    Cloc (http://cloc.sourceforge.net)

    View Slide

  13. Existing Project
    Lines of Code
    ----------------------------- --------------- ------------- ---------------- ------
    Language
    fi
    les blank comment code
    ----------------------------- --------------- ------------- ---------------- ------
    YAML 332 26 25 58856
    Ruby 932 6675 1404 32248
    Elm 75 1731 320 8435
    Markdown 10 856 0 2667
    Sass 42 401 0 2102
    ERB 26 131 118 767
    Slim 11 127 7 398
    HTML 3 15 3 182
    JavaScript 3 23 8 73
    JSON 2 0 0 48
    Bourne Shell 1 4 0 18
    ----------------------------- --------------- ------------- ---------------- ------
    SUM: 1437 9989 1885 105794
    ----------------------------- --------------- ------------- ---------------- ------
    Cloc (http://cloc.sourceforge.net)
    cloc --exclude-dir=coverage,elm-stu
    ff
    ,log,node_modules,tmp,vendor .

    View Slide

  14. Existing Project
    Lines of Code
    ----------------------------- --------------- ------------- ---------------- ------
    Language
    fi
    les blank comment code
    ----------------------------- --------------- ------------- ---------------- ------
    YAML 332 26 25 58856
    Ruby 932 6675 1404 32248
    Elm 75 1731 320 8435
    Markdown 10 856 0 2667
    Sass 42 401 0 2102
    ERB 26 131 118 767
    Slim 11 127 7 398
    HTML 3 15 3 182
    JavaScript 3 23 8 73
    JSON 2 0 0 48
    Bourne Shell 1 4 0 18
    ----------------------------- --------------- ------------- ---------------- ------
    SUM: 1437 9989 1885 105794
    ----------------------------- --------------- ------------- ---------------- ------
    Cloc (http://cloc.sourceforge.net)
    cloc --exclude-dir=coverage,elm-stu
    ff
    ,log,node_modules,tmp,vendor .

    View Slide

  15. Existing Project
    Lines of Code
    ----------------------------- --------------- ------------- ---------------- ------
    Language
    fi
    les blank comment code
    ----------------------------- --------------- ------------- ---------------- ------
    YAML 332 26 25 58856
    Ruby 932 6675 1404 32248
    Elm 75 1731 320 8435
    Markdown 10 856 0 2667
    Sass 42 401 0 2102
    ERB 26 131 118 767
    Slim 11 127 7 398
    HTML 3 15 3 182
    JavaScript 3 23 8 73
    JSON 2 0 0 48
    Bourne Shell 1 4 0 18
    ----------------------------- --------------- ------------- ---------------- ------
    SUM: 1437 9989 1885 105794
    ----------------------------- --------------- ------------- ---------------- ------
    Cloc (http://cloc.sourceforge.net)
    cloc --exclude-dir=coverage,elm-stu
    ff
    ,log,node_modules,tmp,vendor .
    ➡ ➡

    View Slide

  16. Existing Project
    Lines of Code
    ----------------------------- --------------- ------------- ---------------- ------
    Language
    fi
    les blank comment code
    ----------------------------- --------------- ------------- ---------------- ------
    YAML 332 26 25 58856
    Ruby 932 6675 1404 32248
    Elm 75 1731 320 8435
    Markdown 10 856 0 2667
    Sass 42 401 0 2102
    ERB 26 131 118 767
    Slim 11 127 7 398
    HTML 3 15 3 182
    JavaScript 3 23 8 73
    JSON 2 0 0 48
    Bourne Shell 1 4 0 18
    ----------------------------- --------------- ------------- ---------------- ------
    SUM: 1437 9989 1885 105794
    ----------------------------- --------------- ------------- ---------------- ------
    Cloc (http://cloc.sourceforge.net)
    cloc --exclude-dir=coverage,elm-stu
    ff
    ,log,node_modules,tmp,vendor .
    ➡ ➡ Client

    View Slide

  17. Existing Project
    Lines of Code
    ----------------------------- --------------- ------------- ---------------- ------
    Language
    fi
    les blank comment code
    ----------------------------- --------------- ------------- ---------------- ------
    YAML 332 26 25 58856
    Ruby 932 6675 1404 32248
    Elm 75 1731 320 8435
    Markdown 10 856 0 2667
    Sass 42 401 0 2102
    ERB 26 131 118 767
    Slim 11 127 7 398
    HTML 3 15 3 182
    JavaScript 3 23 8 73
    JSON 2 0 0 48
    Bourne Shell 1 4 0 18
    ----------------------------- --------------- ------------- ---------------- ------
    SUM: 1437 9989 1885 105794
    ----------------------------- --------------- ------------- ---------------- ------
    Cloc (http://cloc.sourceforge.net)
    cloc --exclude-dir=coverage,elm-stu
    ff
    ,log,node_modules,tmp,vendor .
    ➡ ➡
    API
    Client

    View Slide

  18. Existing Project
    elm make app/assets/elm/**/*.elm --warn --output=vendor/assets/javascripts/demo.js

    View Slide

  19. Existing Project
    elm make app/assets/elm/**/*.elm --warn --output=vendor/assets/javascripts/demo.js
    1.4 MB

    View Slide

  20. Existing Project
    Full Compile Partial Compile

    View Slide

  21. Existing Project
    Success! Compiled 152 modules.

    ✨ Done in 45.57s.
    Full Compile Partial Compile

    View Slide

  22. Existing Project
    Success! Compiled 152 modules.

    ✨ Done in 45.57s.
    Full Compile
    Success! Compiled 3 modules.

    ✨ Done in 11.21s.
    Partial Compile

    View Slide

  23. Apologies
    😢

    View Slide

  24. Apologies
    😢
    No additional performance stats.

    View Slide

  25. Upgrading
    brew install elm

    View Slide

  26. Upgrading
    brew install elm yarn global add elm
    ||

    View Slide

  27. Upgrading (new commands)
    Run: elm

    View Slide

  28. Upgrading (new commands)
    elm repl --help

    elm init --help

    elm reactor --help

    elm make --help

    elm install --help

    elm bump --help

    elm di
    ff
    --help

    elm publish --help

    elm-test
    Run: elm

    View Slide

  29. Upgrading (new commands)
    elm repl --help

    elm init --help

    elm reactor --help

    elm make --help

    elm install --help

    elm bump --help

    elm di
    ff
    --help

    elm publish --help

    elm-test
    Run: elm
    One binary

    to rule them

    all

    View Slide

  30. Upgrading (new commands)
    elm repl --help

    elm init --help

    elm reactor --help

    elm make --help

    elm install --help

    elm bump --help

    elm di
    ff
    --help

    elm publish --help

    elm-test
    Run: elm

    One binary

    to rule them

    all

    View Slide

  31. Upgrading (Elm Test)
    yarn install [email protected]
    https://github.com/elm-community/elm-test

    View Slide

  32. Upgrading (Elm Test)
    yarn install [email protected]

    https://github.com/elm-community/elm-test

    View Slide

  33. Upgrading (Elm Test)
    yarn install [email protected]
    elm-test

    https://github.com/elm-community/elm-test

    View Slide

  34. Upgrading (Elm Test)
    yarn install [email protected]
    elm-test
    ⭐ elm-test --watch

    https://github.com/elm-community/elm-test

    View Slide

  35. Upgrading (elm.json)
    elm install elm-explorations/test

    View Slide

  36. Upgrading (elm.json)
    "test-dependencies": {

    "elm-explorations/test": "1.0.0 <= v < 2.0.0"

    }
    elm install elm-explorations/test

    View Slide

  37. Upgrading (Tests)
    💭
    What does this mean?

    View Slide

  38. Upgrading (Tests)
    ├── src

    │ ├── FormValidator

    │ │ ├── Models.elm

    │ │ ├── Patterns.elm

    │ │ ├── Validator.elm

    │ │ ├── Validators.elm

    │ │ └── Views.elm

    │ └── FormValidator.elm

    ├── tests

    │ ├── FormValidator

    │ │ ├── PatternsTest.elm

    │ │ ├── ValidatorTest.elm

    │ │ └── ValidatorsTest.elm

    │ └── Main.elm

    View Slide

  39. Upgrading (Tests)
    ├── src

    │ ├── FormValidator

    │ │ ├── Models.elm

    │ │ ├── Patterns.elm

    │ │ ├── Validator.elm

    │ │ ├── Validators.elm

    │ │ └── Views.elm

    │ └── FormValidator.elm

    ├── tests

    │ ├── FormValidator

    │ │ ├── PatternsTest.elm

    │ │ ├── ValidatorTest.elm

    │ │ └── ValidatorsTest.elm

    │ └── Main.elm

    View Slide

  40. Upgrading (Tests)
    ├── src

    │ ├── FormValidator

    │ │ ├── Models.elm

    │ │ ├── Patterns.elm

    │ │ ├── Validator.elm

    │ │ ├── Validators.elm

    │ │ └── Views.elm

    │ └── FormValidator.elm

    ├── tests

    │ ├── FormValidator

    │ │ ├── PatternsTest.elm

    │ │ ├── ValidatorTest.elm

    │ │ └── ValidatorsTest.elm

    │ └── Main.elm
    🎉 🎉

    View Slide

  41. Upgrading (elm.json)
    elm-package.json

    View Slide

  42. Upgrading (elm.json)
    → elm.json
    elm-package.json

    View Slide

  43. Upgrading (elm.json)
    → elm.json
    elm-package.json
    elm-community/elm-*

    View Slide

  44. Upgrading (elm.json)
    → elm.json
    elm-package.json
    → elm/*
    elm-community/elm-*

    View Slide

  45. App Changes (elm.json)

    View Slide

  46. App Changes (elm.json)
    🚫

    View Slide

  47. App Changes (elm.json)
    🚫
    🚫

    View Slide

  48. App Changes (elm.json)
    🚫
    🚫

    View Slide

  49. App Changes (elm.json)
    🚫
    🚫

    🚫

    View Slide

  50. App Changes (elm.json)
    🚫
    🚫

    🚫

    View Slide

  51. App Changes (elm.json)
    🚫
    🚫

    🚫


    View Slide

  52. App Changes (elm.json)
    🚫
    🚫

    🚫



    View Slide

  53. App Changes (elm.json)
    🚫
    🚫

    🚫


    🎉

    View Slide

  54. Package Changes (elm.json)

    View Slide

  55. Package Changes (elm.json)

    View Slide

  56. Package Changes (elm.json)

    View Slide

  57. Package Changes (elm.json)

    🚫

    View Slide

  58. Package Changes (elm.json)

    🚫
    🎉

    View Slide

  59. Upgrading (elm.json)
    "dependencies": {

    "direct": {

    "elm/browser": "1.0.0",

    "elm/core": "1.0.0",

    "elm/html": "1.0.0"

    },

    "indirect": {

    "elm/regex": "1.0.0",

    "elm/virtual-dom": "1.0.0"

    }

    }

    Direct versus Indirect

    View Slide

  60. Upgrading (elm.json)
    "dependencies": {

    "direct": {

    "elm/browser": "1.0.0",

    "elm/core": "1.0.0",

    "elm/html": "1.0.0"

    },

    "indirect": {

    "elm/regex": "1.0.0",

    "elm/virtual-dom": "1.0.0"

    }

    }


    Direct versus Indirect

    View Slide

  61. Upgrading (elm.json)
    "dependencies": {

    "direct": {

    "elm/browser": "1.0.0",

    "elm/core": "1.0.0",

    "elm/html": "1.0.0"

    },

    "indirect": {

    "elm/regex": "1.0.0",

    "elm/virtual-dom": "1.0.0"

    }

    }


    Direct versus Indirect

    View Slide

  62. Upgrading (elm.json)
    elm install "elm/regex"

    View Slide

  63. Upgrading (elm.json)
    elm install "elm/regex"
    I found it in your elm.json
    fi
    le, but in the "indirect" dependencies.
    Should I move it into "direct" dependencies for more general use? [Y/n]:

    View Slide

  64. Upgrading (elm.json)
    "dependencies": {

    "direct": {

    "elm/browser": "1.0.0",

    "elm/core": "1.0.0",

    "elm/html": "1.0.0",

    "elm/regex": "1.0.0"

    },

    "indirect": {

    "elm/virtual-dom": "1.0.0"

    }

    }

    View Slide

  65. Upgrading (elm.json)
    "dependencies": {

    "direct": {

    "elm/browser": "1.0.0",

    "elm/core": "1.0.0",

    "elm/html": "1.0.0",

    "elm/regex": "1.0.0"

    },

    "indirect": {

    "elm/virtual-dom": "1.0.0"

    }

    }


    View Slide

  66. Upgrading (package.json)
    "scripts": {

    "build": "elm make src/FormValidator.elm --warn --output=tmp/form-validator.js",

    "live": "elm live src/FormValidator.elm --warn --debug --output=tmp/form-validator.js"

    }
    Elm 0.18

    View Slide

  67. Upgrading (package.json)
    "scripts": {

    "build": "elm make src/FormValidator.elm --warn --output=tmp/form-validator.js",

    "live": "elm live src/FormValidator.elm --warn --debug --output=tmp/form-validator.js"

    }
    "scripts": {

    "build": "elm make src/FormValidator.elm --optimize --output=tmp/form-validator.js",

    "live": "elm live src/FormValidator.elm --optimize --debug --output=tmp/form-validator.js"

    },
    Elm 0.18
    Elm 0.19

    View Slide

  68. Upgrading (package.json)
    "scripts": {

    "build": "elm make src/FormValidator.elm --warn --output=tmp/form-validator.js",

    "live": "elm live src/FormValidator.elm --warn --debug --output=tmp/form-validator.js"

    }
    "scripts": {

    "build": "elm make src/FormValidator.elm --optimize --output=tmp/form-validator.js",

    "live": "elm live src/FormValidator.elm --optimize --debug --output=tmp/form-validator.js"

    },
    Elm 0.18
    Elm 0.19
    🚫
    🚫

    View Slide

  69. Upgrading (package.json)
    "scripts": {

    "build": "elm make src/FormValidator.elm --warn --output=tmp/form-validator.js",

    "live": "elm live src/FormValidator.elm --warn --debug --output=tmp/form-validator.js"

    }
    "scripts": {

    "build": "elm make src/FormValidator.elm --optimize --output=tmp/form-validator.js",

    "live": "elm live src/FormValidator.elm --optimize --debug --output=tmp/form-validator.js"

    },
    Elm 0.18
    Elm 0.19
    🚫
    🚫

    View Slide

  70. Syntax (General)
    toString
    🚫

    View Slide

  71. Syntax (General)
    toString
    String.fromInt
    🚫

    View Slide

  72. Syntax (General)
    toString
    String.fromInt
    String.fromFloat
    🚫


    View Slide

  73. Syntax (General)
    toString
    String.fromInt
    String.fromFloat
    🚫


    Debug.toString

    View Slide

  74. Syntax (General)
    Result.withDefault 0 <| String.toInt value
    🚫

    View Slide

  75. Syntax (General)
    Result.withDefault 0 <| String.toInt value
    Maybe.withDefault 0 <| String.toInt value
    🚫

    View Slide

  76. viewLabel : Maybe String -> Html message

    viewLabel label =

    case label of

    Just label ->

    label



    Nothing ->

    "Unknown"
    https://elm-lang.org/0.19.0/shadowing
    Syntax (Variable Shadowing)

    View Slide

  77. viewLabel : Maybe String -> Html message

    viewLabel label =

    case label of

    Just label ->

    label



    Nothing ->

    "Unknown"
    https://elm-lang.org/0.19.0/shadowing
    Shadow variable!
    Syntax (Variable Shadowing)

    View Slide

  78. viewLabel : Maybe String -> Html message

    viewLabel label =

    case label of

    Just label ->

    label



    Nothing ->

    "Unknown"
    🚫
    https://elm-lang.org/0.19.0/shadowing
    Shadow variable!
    Syntax (Variable Shadowing)

    View Slide

  79. viewLabel : Maybe String -> Html message

    viewLabel label =

    case label of

    Just label ->

    label



    Nothing ->

    "Unknown"
    🚫
    https://elm-lang.org/0.19.0/shadowing
    viewLabel : Maybe String -> Html message

    viewLabel aLabel =

    case aLabel of

    Just label ->

    label



    Nothing ->

    "Unknown"
    Shadow variable!
    Syntax (Variable Shadowing)

    View Slide

  80. viewLabel : Maybe String -> Html message

    viewLabel label =

    case label of

    Just label ->

    label



    Nothing ->

    "Unknown"
    🚫
    https://elm-lang.org/0.19.0/shadowing
    viewLabel : Maybe String -> Html message

    viewLabel aLabel =

    case aLabel of

    Just label ->

    label



    Nothing ->

    "Unknown"
    Shadow variable!
    Fixed
    Syntax (Variable Shadowing)

    View Slide

  81. viewLabel : Maybe String -> Html message

    viewLabel label =

    case label of

    Just label ->

    label



    Nothing ->

    "Unknown"
    🚫

    https://elm-lang.org/0.19.0/shadowing
    viewLabel : Maybe String -> Html message

    viewLabel aLabel =

    case aLabel of

    Just label ->

    label



    Nothing ->

    "Unknown"
    Shadow variable!
    Fixed
    Syntax (Variable Shadowing)

    View Slide

  82. Syntax (Tuples)
    (1, 2)

    View Slide

  83. Syntax (Tuples)
    (1, 2)

    View Slide

  84. Syntax (Tuples)
    (1, 2)

    (1, 2, 3)

    View Slide

  85. Syntax (Tuples)
    (1, 2)

    (1, 2, 3)

    View Slide

  86. Syntax (Tuples)
    (1, 2)

    (1, 2, 3)

    (1, 2, 3, 4)

    View Slide

  87. Syntax (Tuples)
    (1, 2)

    (1, 2, 3)

    (1, 2, 3, 4)
    🚫

    View Slide

  88. Syntax (Tuples)
    (1, 2)

    (1, 2, 3)

    (1, 2, 3, 4)
    🚫
    I recommend switching to records. Each item will be named,

    and you can use the `point.x` syntax to access them.

    View Slide

  89. Syntax (Time)
    elm install elm/time

    View Slide

  90. Syntax (Time)
    import Time
    elm install elm/time

    View Slide

  91. Syntax (Time)
    import Time
    import Json.Encode as JSONE
    elm install elm/time

    View Slide

  92. Syntax (Time)
    import Time
    import Json.Encode as JSONE
    raw = 1535235380000
    elm install elm/time

    View Slide

  93. Syntax (Time)
    import Time
    import Json.Encode as JSONE
    raw = 1535235380000
    time = Time.millisToPosix raw
    elm install elm/time

    View Slide

  94. Syntax (Time)
    import Time
    import Json.Encode as JSONE
    raw = 1535235380000
    time = Time.millisToPosix raw
    value = JSONE.int <| Time.posixToMillis time
    elm install elm/time

    View Slide

  95. Syntax (Regular Expressions)
    elm install elm/regex

    View Slide

  96. Syntax (Regular Expressions)
    import Regex
    elm install elm/regex

    View Slide

  97. Syntax (Regular Expressions)
    import Regex
    Regex.regex "^\\s*$"
    elm install elm/regex

    View Slide

  98. Syntax (Regular Expressions)
    import Regex
    Regex.regex "^\\s*$"
    elm install elm/regex
    🚫

    View Slide

  99. Syntax (Regular Expressions)
    import Regex
    Regex.regex "^\\s*$"
    elm install elm/regex
    Regex.fromString "^\\s*$"

    |> Maybe.withDefault Regex.never
    🚫

    View Slide

  100. Syntax (Regular Expressions)
    import Regex
    Regex.regex "^\\s*$"
    elm install elm/regex
    Regex.fromString "^\\s*$"

    |> Maybe.withDefault Regex.never

    🚫

    View Slide

  101. Syntax (HTML Attributes)
    Html.Attributes.download True

    View Slide

  102. Syntax (HTML Attributes)
    Html.Attributes.download True
    🚫

    View Slide

  103. Syntax (HTML Attributes)
    Html.Attributes.download True
    Html.Attributes.download ""
    🚫

    View Slide

  104. Syntax (HTML Attributes)
    Html.Attributes.download True
    Html.Attributes.download ""

    🚫

    View Slide

  105. Syntax (Programs)
    https://package.elm-lang.org/packages/elm/browser/latest/Browser#application
    main : Program Never Model Message

    main =

    Html.program

    {

    init = init,

    view = view,

    update = update,

    subscriptions = subscriptions

    }

    View Slide

  106. Syntax (Programs)
    main : Program Flags Model Message

    main =

    Browser.application

    {

    init = init,

    view = view,

    update = update,

    subscriptions = subscriptions,

    onUrlRequest = ClickedLink,

    onUrlChange = ChangedUrl

    }

    https://package.elm-lang.org/packages/elm/browser/latest/Browser#application
    main : Program Never Model Message

    main =

    Html.program

    {

    init = init,

    view = view,

    update = update,

    subscriptions = subscriptions

    }

    View Slide

  107. Additional Resources
    • https://elm-lang.org/blog/small-assets-without-the-headache

    • https://github.com/elm/compiler/blob/master/upgrade-docs/0.19.md

    • https://korban.net/posts/elm/2018-08-22-elm-019-whats-new-install-upgrade

    • https://elm-lang.org/0.19.0/optimize

    View Slide

  108. Thanks!
    https://www.alchemists.io
    🙇

    View Slide