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. 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)
  2. 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 .
  3. 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 . ➡
  4. 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 . ➡ ➡
  5. 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
  6. 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
  7. Existing Project Success! Compiled 152 modules. ✨ Done in 45.57s.

    Full Compile Success! Compiled 3 modules. ✨ Done in 11.21s. Partial Compile
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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 🎉 🎉
  14. 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
  15. 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
  16. 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
  17. 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]:
  18. 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" } }
  19. 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" } } ➡
  20. 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
  21. 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
  22. 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 🚫 🚫
  23. 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 🚫 🚫 ✅
  24. 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)
  25. 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)
  26. 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)
  27. 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)
  28. 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)
  29. 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)
  30. 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.
  31. Syntax (Time) import Time import Json.Encode as JSONE raw =

    1535235380000 time = Time.millisToPosix raw elm install elm/time
  32. 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
  33. Syntax (Regular Expressions) import Regex Regex.regex "^\\s*$" elm install elm/regex

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

    Regex.fromString "^\\s*$" |> Maybe.withDefault Regex.never ✅ 🚫
  35. 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 }
  36. 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 }