Elm 0.19.0 Changes

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