Rethinking All Practices: Building Web Applications with Elm

React re-thought best practices for web and native development, but it is limited by the strengths and weaknesses of JavaScript.

Elm takes rethinking best practices even further by asking what a modern language designed for productive development should look like.

Signals and the Elm Architecture help you compose large complex applications out of small, understandable pieces. Elm's powerful type system and emphasis on pure functions and immutable data make refactoring and maintaining large applications faster and easier.

Elm and React share common ideas, and creating a new language helps Elm leverage those ideas in to a better development experience. Learn how Elm can make you a better React developer, and maybe, just maybe, take the plunge in to trying Elm yourself.

Transcript

1. React.js CONF 2016
2. Rethinking All Practices Building Web Applications in Elm Jamison Dance
3. @jergason http://jamison.dance JavaScript Jabber Who am I? React Rally
4. Isomorphic
5. “ For most algebraic structures, including groups and rings, a homomorphism is an isomorphism if and only if it is bijective.” - Some Internet Rando
6. Isomorphic
10. UNIVERSAL
11. Big JavaScript 2047 1 petabyte
12. More Tools
13. Rethink Best Practices console.lol = console.log; for (var i = 0; i < 100; i++) { console.lol('lol'); }
14. Rethink Best Practices console.lol = console.log for (var i = 0 i < 100 i++) { console.lol('lol') }
15. Elm
16. The Problem
17. function foo(num) { if (num > 10) { return 'demo code is best code' } } console.log(foo(1).toUpperCase()) //
18. Know when they happen
20. Bob did this
21. Prevent them
22. function foo(num) { if (num > 10) { return 'demo code is best code' } } console.log(foo(1).toUpperCase()) //
24. function foo(num: number): any { if (num > 10) { return 'demo code is best code' } } console.log(foo(1).toUpperCase()) //
25. ᕕ( ᐛ )ᕗ
26. Gradual Type Systems
27. Code that is hard to type is code you will not type.
28. Elm has a static type system. No runtime errors
29. foo num = if num > 10 then "demo code is best code"
31. foo num = if num > 10 then "demo code is best code" else null
32. No `null` ¯\_(ϑ)_/¯
34. foo num = if num > 10 then "demo code is best code" else "shoot"
35. type Bool = True | False
36. type Maybe a = Just a | Nothing
37. foo num = if num > 10 then Just "demo code is best code" else Nothing
38. foo : Int -> Maybe String foo num = if num > 10 then Just "demo code is best code" else Nothing
39. bar num = case foo num of Just str -> String.toUpper str Nothing -> "WELP"
40. bar num = case foo num of Just str -> String.toUpper str
42. “ The competent programmer is fully aware of the strictly limited size of their own skull.” - Edsger W. Dijkstra
43. Uber For Cats For Dogs
44. The Problem
45. React!
46. Or not
47. Elm Architecture
48. Stateless functions
49. function add(a, b) { return a + b }
50. Or not
51. function add(a, b) { fireZeMissiles() return a + b }
53. Uber For Cats For Dogs
54. function add(a, b) { recordUserAddition(a, b) return a + b }
55. Elm only has stateless functions.
56. add a b = a + b
57. Immutable data
58. function updateUserScore(user, points) { return { ...user, points: user.points + points } }
59. Or not
60. function updateUserScore(user, points) { user.points += points }
62. Elm only has immutable data.
63. updateUser user points = { user | points = user.points + points }
65. Solutions Callbacks Flux Redux Observables
66. Button ButtonClicked Update Button Model
67. Constraints versus guidelines.
68. All Programs Good Programs Elm Programs
69. Constraints can guide you towards better design.
70. “ The competent programmer is fully aware of the strictly limited size of their own skull.” - Edsger W. Dijkstra
71. Caveats • Smaller community • Server rendering is not easy (but improving) • No React Native • Elm does best when it runs everything • Early days still
72. Elm React Native http://ohanhi.github.io/elm-native-ui.html
73. Browser apps are growing.
74. JS tooling is evolving.
75. Elm is what it is evolving towards.
76. Resources • elm-lang.org • elmlang.herokuapp.com • devchat.tv/js-jabber/175-jsj-elm-with-evan- czaplicki-and-richard-feldman • Effects As Data • Let's Be Mainstream • just bug me on twitter @jergason
77. Thanks.