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.

Transcript

1. Elm 0.19.0 Changes Brooke Kuhlmann alchemists.io
2. 🎉 (after ~2 years) Elm 0.19.0! 🎉 alchemists.io
3. Highlights elm-lang.org/blog/small-assets-without-the-headache alchemists.io
4. Highlights elm-lang.org/blog/small-assets-without-the-headache 🎉 alchemists.io
5. Highlights elm-lang.org/blog/small-assets-without-the-headache alchemists.io
6. Highlights elm-lang.org/blog/small-assets-without-the-headache • Dead Code Elimination alchemists.io
7. Highlights elm-lang.org/blog/small-assets-without-the-headache • Dead Code Elimination • Record Field Renaming alchemists.io
8. Highlights elm-lang.org/blog/small-assets-without-the-headache • Dead Code Elimination • Record Field Renaming • Faster Compile Times alchemists.io
9. Highlights elm-lang.org/blog/small-assets-without-the-headache • Dead Code Elimination • Record Field Renaming • Faster Compile Times 😂 alchemists.io
10. Highlights elm-lang.org/blog/small-assets-without-the-headache • Dead Code Elimination • Record Field Renaming • Faster Compile Times 😂 ⭐ person.name → p.n alchemists.io
11. Highlights elm-lang.org/blog/small-assets-without-the-headache • Dead Code Elimination • Record Field Renaming • Faster Compile Times ⚡ 😂 ⭐ person.name → p.n alchemists.io
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.sourceforge.net alchemists.io
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.sourceforge.net cloc --exclude-dir=coverage,elm-stu ff ,log,node_modules,tmp,vendor . alchemists.io
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.sourceforge.net cloc --exclude-dir=coverage,elm-stu ff ,log,node_modules,tmp,vendor . ➡ alchemists.io
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.sourceforge.net cloc --exclude-dir=coverage,elm-stu ff ,log,node_modules,tmp,vendor . ➡ ➡ alchemists.io
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.sourceforge.net cloc --exclude-dir=coverage,elm-stu ff ,log,node_modules,tmp,vendor . ➡ ➡ Client alchemists.io
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.sourceforge.net cloc --exclude-dir=coverage,elm-stu ff ,log,node_modules,tmp,vendor . ➡ ➡ API Client alchemists.io
18. Existing Project elm make app/assets/elm/**/*.elm --warn --output=vendor/assets/javascripts/demo.js alchemists.io
19. Existing Project elm make app/assets/elm/**/*.elm --warn --output=vendor/assets/javascripts/demo.js 1.4 MB alchemists.io
20. Existing Project Full Compile Partial Compile alchemists.io
21. Existing Project Success! Compiled 152 modules. ✨ Done in 45.57s. Full Compile Partial Compile alchemists.io
22. Existing Project Success! Compiled 152 modules. ✨ Done in 45.57s. Full Compile Success! Compiled 3 modules. ✨ Done in 11.21s. Partial Compile alchemists.io
23. Apologies 😢 alchemists.io
24. Apologies 😢 No additional performance stats. alchemists.io
25. Upgrading brew install elm alchemists.io
26. Upgrading brew install elm yarn global add elm || alchemists.io
27. Upgrading (new commands) Run: elm alchemists.io
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 alchemists.io
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 alchemists.io
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 alchemists.io
31. Upgrading (Elm Test) yarn install elm-test@0.19.0-rev6 github.com/elm-community/elm-test alchemists.io
32. Upgrading (Elm Test) yarn install elm-test@0.19.0-rev6 ⬆ github.com/elm-community/elm-test alchemists.io
33. Upgrading (Elm Test) yarn install elm-test@0.19.0-rev6 elm-test ⬆ github.com/elm-community/elm-test alchemists.io
34. Upgrading (Elm Test) yarn install elm-test@0.19.0-rev6 elm-test ⭐ elm-test --watch ⬆ github.com/elm-community/elm-test alchemists.io
35. Upgrading (elm.json) elm install elm-explorations/test alchemists.io
36. Upgrading (elm.json) "test-dependencies": { "elm-explorations/test": "1.0.0 <= v < 2.0.0" } elm install elm-explorations/test alchemists.io
37. Upgrading (Tests) 💭 What does this mean? alchemists.io
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 alchemists.io
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 alchemists.io
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 🎉 🎉 alchemists.io
41. Upgrading (elm.json) elm-package.json alchemists.io
42. Upgrading (elm.json) → elm.json elm-package.json alchemists.io
43. Upgrading (elm.json) → elm.json elm-package.json elm-community/elm-* alchemists.io
44. Upgrading (elm.json) → elm.json elm-package.json → elm/* elm-community/elm-* alchemists.io
45. App Changes (elm.json) alchemists.io
46. App Changes (elm.json) 🚫 alchemists.io
47. App Changes (elm.json) 🚫 🚫 alchemists.io
48. App Changes (elm.json) 🚫 🚫 ✅ alchemists.io
49. App Changes (elm.json) 🚫 🚫 ✅ 🚫 alchemists.io
50. App Changes (elm.json) 🚫 🚫 ✅ 🚫 ➡ alchemists.io
51. App Changes (elm.json) 🚫 🚫 ✅ 🚫 ➡ ➡ alchemists.io
52. App Changes (elm.json) 🚫 🚫 ✅ 🚫 ➡ ➡ ✅ alchemists.io
53. App Changes (elm.json) 🚫 🚫 ✅ 🚫 ➡ ➡ 🎉 ✅ alchemists.io
54. Package Changes (elm.json) alchemists.io
55. Package Changes (elm.json) ➡ alchemists.io
56. Package Changes (elm.json) ➡ alchemists.io
57. Package Changes (elm.json) ➡ 🚫 alchemists.io
58. Package Changes (elm.json) ➡ 🚫 🎉 alchemists.io
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 alchemists.io
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 alchemists.io
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 alchemists.io
62. Upgrading (elm.json) elm install "elm/regex" alchemists.io
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]: alchemists.io
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" } } alchemists.io
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" } } ➡ alchemists.io
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 alchemists.io
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 alchemists.io
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 🚫 🚫 alchemists.io
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 🚫 🚫 ✅ alchemists.io
70. Syntax (General) toString 🚫 alchemists.io
71. Syntax (General) toString String.fromInt 🚫 ✅ alchemists.io
72. Syntax (General) toString String.fromInt String.fromFloat 🚫 ✅ ✅ alchemists.io
73. Syntax (General) toString String.fromInt String.fromFloat 🚫 ✅ ✅ Debug.toString ✅ alchemists.io
74. Syntax (General) Result.withDefault 0 <| String.toInt value 🚫 alchemists.io
75. Syntax (General) Result.withDefault 0 <| String.toInt value Maybe.withDefault 0 <| String.toInt value 🚫 ✅ alchemists.io
76. viewLabel : Maybe String -> Html message viewLabel label = case label of Just label -> label Nothing -> "Unknown" elm-lang.org/0.19.0/shadowing Syntax (Variable Shadowing) alchemists.io
77. viewLabel : Maybe String -> Html message viewLabel label = case label of Just label -> label Nothing -> "Unknown" elm-lang.org/0.19.0/shadowing Shadow variable! Syntax (Variable Shadowing) alchemists.io
78. viewLabel : Maybe String -> Html message viewLabel label = case label of Just label -> label Nothing -> "Unknown" 🚫 elm-lang.org/0.19.0/shadowing Shadow variable! Syntax (Variable Shadowing) alchemists.io
79. viewLabel : Maybe String -> Html message viewLabel label = case label of Just label -> label Nothing -> "Unknown" 🚫 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) alchemists.io
80. viewLabel : Maybe String -> Html message viewLabel label = case label of Just label -> label Nothing -> "Unknown" 🚫 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) alchemists.io
81. viewLabel : Maybe String -> Html message viewLabel label = case label of Just label -> label Nothing -> "Unknown" 🚫 ✅ 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) alchemists.io
82. Syntax (Tuples) (1, 2) alchemists.io
83. Syntax (Tuples) (1, 2) ✅ alchemists.io
84. Syntax (Tuples) (1, 2) ✅ (1, 2, 3) alchemists.io
85. Syntax (Tuples) (1, 2) ✅ (1, 2, 3) ✅ alchemists.io
86. Syntax (Tuples) (1, 2) ✅ (1, 2, 3) ✅ (1, 2, 3, 4) alchemists.io
87. Syntax (Tuples) (1, 2) ✅ (1, 2, 3) ✅ (1, 2, 3, 4) 🚫 alchemists.io
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. alchemists.io
89. Syntax (Time) elm install elm/time alchemists.io
90. Syntax (Time) import Time elm install elm/time alchemists.io
91. Syntax (Time) import Time import Json.Encode as JSONE elm install elm/time alchemists.io
92. Syntax (Time) import Time import Json.Encode as JSONE raw = 1535235380000 elm install elm/time alchemists.io
93. Syntax (Time) import Time import Json.Encode as JSONE raw = 1535235380000 time = Time.millisToPosix raw elm install elm/time alchemists.io
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 alchemists.io
95. Syntax (Regular Expressions) elm install elm/regex alchemists.io
96. Syntax (Regular Expressions) import Regex elm install elm/regex alchemists.io
97. Syntax (Regular Expressions) import Regex Regex.regex "^\\s*$" elm install elm/regex alchemists.io
98. Syntax (Regular Expressions) import Regex Regex.regex "^\\s*$" elm install elm/regex 🚫 alchemists.io
99. Syntax (Regular Expressions) import Regex Regex.regex "^\\s*$" elm install elm/regex Regex.fromString "^\\s*$" |> Maybe.withDefault Regex.never 🚫 alchemists.io
100. Syntax (Regular Expressions) import Regex Regex.regex "^\\s*$" elm install elm/regex Regex.fromString "^\\s*$" |> Maybe.withDefault Regex.never ✅ 🚫 alchemists.io
101. Syntax (HTML Attributes) Html.Attributes.download True alchemists.io
102. Syntax (HTML Attributes) Html.Attributes.download True 🚫 alchemists.io
103. Syntax (HTML Attributes) Html.Attributes.download True Html.Attributes.download "" 🚫 alchemists.io
104. Syntax (HTML Attributes) Html.Attributes.download True Html.Attributes.download "" ✅ 🚫 alchemists.io
105. Syntax (Programs) 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 } alchemists.io
106. Syntax (Programs) main : Program Flags Model Message main = Browser.application { init = init, view = view, update = update, subscriptions = subscriptions, onUrlRequest = ClickedLink, onUrlChange = ChangedUrl } 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 } alchemists.io
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 alchemists.io
108. Thanks 🙇 alchemists.io
109. Let's Connect! alchemists.io @bkuhlmann@mastodon.social