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.

E0e036f89c14b3e59640318eedf9670b?s=128

Brooke Kuhlmann

March 27, 2020
Tweet

Transcript

  1. Elm 0.19.0 Changes Presented by Brooke Kuhlmann

  2. (after ~2 years) Elm 0.19.0!

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

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

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

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

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

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

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

    • Faster Compile Times
  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
  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
  12. Existing Project Lines of Code ----------------------------- --------------- ------------- ---------------- ------

    Language files 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)
  13. Existing Project Lines of Code ----------------------------- --------------- ------------- ---------------- ------

    Language files 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-stuff,log,node_modules,tmp,vendor .
  14. Existing Project Lines of Code ----------------------------- --------------- ------------- ---------------- ------

    Language files 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-stuff,log,node_modules,tmp,vendor . ➡
  15. Existing Project Lines of Code ----------------------------- --------------- ------------- ---------------- ------

    Language files 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-stuff,log,node_modules,tmp,vendor . ➡ ➡
  16. Existing Project Lines of Code ----------------------------- --------------- ------------- ---------------- ------

    Language files 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-stuff,log,node_modules,tmp,vendor . ➡ ➡ Client
  17. Existing Project Lines of Code ----------------------------- --------------- ------------- ---------------- ------

    Language files 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-stuff,log,node_modules,tmp,vendor . ➡ ➡ API Client
  18. Existing Project elm make app/assets/elm/**/*.elm --warn --output=vendor/assets/javascripts/demo.js

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

  20. Existing Project Full Compile Partial Compile

  21. Existing Project Success! Compiled 152 modules. ✨ Done in 45.57s.

    Full Compile Partial Compile
  22. Existing Project Success! Compiled 152 modules. ✨ Done in 45.57s.

    Full Compile Success! Compiled 3 modules. ✨ Done in 11.21s. Partial Compile
  23. Apologies

  24. Apologies No additional performance stats.

  25. Upgrading brew install elm

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

  27. Upgrading (new commands) Run: elm

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

    reactor --help elm make --help elm install --help elm bump --help elm diff --help elm publish --help elm-test Run: elm
  29. Upgrading (new commands) elm repl --help elm init --help elm

    reactor --help elm make --help elm install --help elm bump --help elm diff --help elm publish --help elm-test Run: elm One binary to rule them all
  30. Upgrading (new commands) elm repl --help elm init --help elm

    reactor --help elm make --help elm install --help elm bump --help elm diff --help elm publish --help elm-test Run: elm ➡ One binary to rule them all
  31. Upgrading (Elm Test) yarn install elm-test@0.19.0-rev6 https://github.com/elm-community/elm-test

  32. Upgrading (Elm Test) yarn install elm-test@0.19.0-rev6 ⬆ https://github.com/elm-community/elm-test

  33. Upgrading (Elm Test) yarn install elm-test@0.19.0-rev6 elm-test ⬆ https://github.com/elm-community/elm-test

  34. Upgrading (Elm Test) yarn install elm-test@0.19.0-rev6 elm-test ⭐ elm-test --watch

    ⬆ https://github.com/elm-community/elm-test
  35. Upgrading (elm.json) elm install elm-explorations/test

  36. Upgrading (elm.json) "test-dependencies": { "elm-explorations/test": "1.0.0 <= v < 2.0.0"

    } elm install elm-explorations/test
  37. Upgrading (Tests) What does this mean?

  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
  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
  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
  41. Upgrading (elm.json) elm-package.json

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

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

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

  45. App Changes (elm.json)

  46. App Changes (elm.json)

  47. App Changes (elm.json)

  48. App Changes (elm.json) ✅

  49. App Changes (elm.json) ✅

  50. App Changes (elm.json) ✅ ➡

  51. App Changes (elm.json) ✅ ➡ ➡

  52. App Changes (elm.json) ✅ ➡ ➡ ✅

  53. App Changes (elm.json) ✅ ➡ ➡ ✅

  54. Package Changes (elm.json)

  55. Package Changes (elm.json) ➡

  56. Package Changes (elm.json) ➡

  57. Package Changes (elm.json) ➡

  58. Package Changes (elm.json) ➡

  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
  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
  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
  62. Upgrading (elm.json) elm install "elm/regex"

  63. Upgrading (elm.json) elm install "elm/regex" I found it in your

    elm.json file, but in the "indirect" dependencies. Should I move it into "direct" dependencies for more general use? [Y/n]:
  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" } }
  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" } } ➡
  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
  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
  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
  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 ✅
  70. Syntax (General) toString

  71. Syntax (General) toString String.fromInt ✅

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

  73. Syntax (General) toString String.fromInt String.fromFloat ✅ ✅ Debug.toString ✅

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

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

    String.toInt value ✅
  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)
  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)
  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)
  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)
  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)
  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)
  82. Syntax (Tuples) (1, 2)

  83. Syntax (Tuples) (1, 2) ✅

  84. Syntax (Tuples) (1, 2) ✅ (1, 2, 3)

  85. Syntax (Tuples) (1, 2) ✅ (1, 2, 3) ✅

  86. Syntax (Tuples) (1, 2) ✅ (1, 2, 3) ✅ (1,

    2, 3, 4)
  87. Syntax (Tuples) (1, 2) ✅ (1, 2, 3) ✅ (1,

    2, 3, 4)
  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.
  89. Syntax (Time) elm install elm/time

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

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

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

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

    1535235380000 time = Time.millisToPosix raw elm install elm/time
  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
  95. Syntax (Regular Expressions) elm install elm/regex

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

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

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

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

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

    Regex.fromString "^\\s*$" |> Maybe.withDefault Regex.never ✅
  101. Syntax (HTML Attributes) Html.Attributes.download True

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

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

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

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

  108. Thanks! @bkuhlmann https://www.alchemists.io