Fluent Conf 2017: Tame the frontend with Elm

Transcript

1. Tame the frontend with Elm Jeremy Fairbank / @elpapapollo
2. Software is broken. We are here to fix it. Say hello@testdouble.com
3. Happiness
5. ✓ Easier to write code ✓ Easier to write tests ✓ Easier to refactor
6. elm
7. No runtime exceptions in practice.
8. No undefined is not a function
9. Fast
10. One framework. No fatigue. Update View Model Messages
11. elm
12. Functional
13. greet name = "Hello, " ++ name greet "Fluent Conf" -- Hello, Fluent Conf
14. greet name = "Hello, " ++ name greet "Fluent Conf" -- Hello, Fluent Conf
15. greet name = "Hello, " ++ name greet "Fluent Conf" -- Hello, Fluent Conf
16. greet name = "Hello, " ++ name greet "Fluent Conf" -- Hello, Fluent Conf Single Expression
17. greet name = "Hello, " ++ name greet "Fluent Conf" -- Hello, Fluent Conf
18. greet name = "Hello, " ++ name greet "Fluent Conf" -- Hello, Fluent Conf
19. Pure Data in Data out
20. Pure No side effects
21. Pure Predictable and Testable!
22. add x y = x + y add 2 3 == 5 add 2 3 == 5 add 2 3 == 5
23. add x y = x + y add 2 3 == 5 add 2 3 == 5 add 2 3 == 5
24. add x y = x + y add 2 3 == 5 add 2 3 == 5 add 2 3 == 5
25. Expressive Terse and declarative code
26. myList = [1, 2, 3, 4, 5] double n = n * 2 doubleNumbers list = List.map double list doubleNumbers myList -- [2, 4, 6, 8, 10]
27. myList = [1, 2, 3, 4, 5] double n = n * 2 doubleNumbers list = List.map double list doubleNumbers myList -- [2, 4, 6, 8, 10]
28. myList = [1, 2, 3, 4, 5] double n = n * 2 doubleNumbers list = List.map double list doubleNumbers myList -- [2, 4, 6, 8, 10]
29. myList = [1, 2, 3, 4, 5] double n = n * 2 doubleNumbers list = List.map double list doubleNumbers myList -- [2, 4, 6, 8, 10]
30. myList = [1, 2, 3, 4, 5] double n = n * 2 doubleNumbers list = List.map double list doubleNumbers myList -- [2, 4, 6, 8, 10]
31. myList = [1, 2, 3, 4, 5] double n = n * 2 doubleNumbers list = List.map double list doubleNumbers myList -- [2, 4, 6, 8, 10]
32. Curried Functions Building blocks
33. add x y = x + y add 1 2 -- 3 (add 1) 2 -- 3
34. add x y = x + y add 1 2 -- 3 (add 1) 2 -- 3
35. add x y = x + y add 1 2 -- 3 (add 1) 2 -- 3
36. add x y = x + y add 1 2 -- 3 (add 1) 2 -- 3 New function created
37. increment = add 1 increment 2 -- 3 increment 41 -- 42
38. increment = add 1 increment 2 -- 3 increment 41 -- 42
39. increment = add 1 increment 2 -- 3 increment 41 -- 42
40. Pipes Expressive Chaining
41. exclaim (greet (String.toUpper "Tucker")) greet name = "Hello, " ++ name exclaim phrase = phrase ++ "!"
42. "Tucker" |> String.toUpper |> greet |> exclaim
43. "Tucker" |> String.toUpper |> greet |> exclaim
44. |> String.toUpper "Tucker" |> greet |> exclaim
45. "TUCKER" |> greet |> exclaim
46. |> greet "TUCKER" |> exclaim
47. "Hello, TUCKER" |> exclaim
48. |> exclaim "Hello, TUCKER"
49. "Hello, TUCKER!"
50. No Runtime Exceptions
51. Strong Static Types life : Int life = 42 greeting : String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
52. Strong Static Types life : Int life = 42 greeting : String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
53. Strong Static Types life : Int life = 42 greeting : String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
54. greet : String -> String greet name = "Hello, " ++ name add : Int -> Int -> Int add x y = x + y
55. greet : String -> String greet name = "Hello, " ++ name add : Int -> Int -> Int add x y = x + y
56. greet : String -> String greet name = "Hello, " ++ name add : Int -> Int -> Int add x y = x + y
57. greet : String -> String greet name = "Hello, " ++ name add : Int -> (Int -> Int) add x y = x + y
58. The argument to function `greet` is causing a mismatch. 11| greet 42 ^^ Function `greet` is expecting the argument to be: String But it is: number Compile time static type checks
59. Immutable Data Safe and Consistent
60. dog : { name : String, age : Int } dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
61. dog : { name : String, age : Int } dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
62. dog : { name : String, age : Int } dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
63. dog : { name : String, age : Int } dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
64. haveBirthday dog = { dog | age = dog.age + 1 } dog = { name = "Tucker", age = 11 } olderDog = haveBirthday dog olderDog.age -- 12 olderDog.name -- "Tucker" dog.age -- 11 dog.name -- "Tucker" Create New Data
65. haveBirthday dog = { dog | age = dog.age + 1 } dog = { name = "Tucker", age = 11 } olderDog = haveBirthday dog olderDog.age -- 12 olderDog.name -- "Tucker" dog.age -- 11 dog.name -- "Tucker" Create New Data
66. haveBirthday dog = { dog | age = dog.age + 1 } dog = { name = "Tucker", age = 11 } olderDog = haveBirthday dog olderDog.age -- 12 olderDog.name -- "Tucker" dog.age -- 11 dog.name -- "Tucker" Create New Data
67. haveBirthday dog = { dog | age = dog.age + 1 } dog = { name = "Tucker", age = 11 } olderDog = haveBirthday dog olderDog.age -- 12 olderDog.name -- "Tucker" dog.age -- 11 dog.name -- "Tucker" Create New Data
68. haveBirthday dog = { dog | age = dog.age + 1 } dog = { name = "Tucker", age = 11 } olderDog = haveBirthday dog olderDog.age -- 12 olderDog.name -- "Tucker" dog.age -- 11 dog.name -- "Tucker" Create New Data
69. haveBirthday dog = { dog | age = dog.age + 1 } dog = { name = "Tucker", age = 11 } olderDog = haveBirthday dog olderDog.age -- 12 olderDog.name -- "Tucker" dog.age -- 11 dog.name -- "Tucker" Create New Data
70. Custom Types Domain-specific code
71. type alias Dog = { name : String , age : Int , breed : Breed } type Breed = Sheltie | Poodle
72. type alias Dog = { name : String , age : Int , breed : Breed } type Breed = Sheltie | Poodle
73. type alias Dog = { name : String , age : Int , breed : Breed } type Breed = Sheltie | Poodle Union Type
74. dog : Dog dog = { name = "Tucker" , age = 11 , breed = Sheltie }
75. dog : Dog dog = { name = "Tucker" , age = 11 , breed = Sheltie }
76. dog : Dog dog = { name = "Tucker" , age = 11 , breed = Sheltie }
77. No null or undefined
78. type Maybe a = Just a | Nothing
79. type Maybe a = Just a | Nothing Wraps the successful value
80. type Maybe a = Just a | Nothing Represents no result or missing value
81. type Maybe a = Just a | Nothing Type Variable
82. type Maybe a = Just a | Nothing Either I have Just the value a, or I have Nothing.
83. divide : Float -> Float -> Maybe Float divide x y = if y == 0 then Nothing else Just (x / y) divide 4 2 -- Just 2 divide 4 0 -- Nothing
84. divide : Float -> Float -> Maybe Float divide x y = if y == 0 then Nothing else Just (x / y) divide 4 2 -- Just 2 divide 4 0 -- Nothing
85. divide : Float -> Float -> Maybe Float divide x y = if y == 0 then Nothing else Just (x / y) divide 4 2 -- Just 2 divide 4 0 -- Nothing
86. divide : Float -> Float -> Maybe Float divide x y = if y == 0 then Nothing else Just (x / y) divide 4 2 -- Just 2 divide 4 0 -- Nothing
87. divide : Float -> Float -> Maybe Float divide x y = if y == 0 then Nothing else Just (x / y) divide 4 2 -- Just 2 divide 4 0 -- Nothing
88. divide : Float -> Float -> Maybe Float divide x y = if y == 0 then Nothing else Just (x / y) divide 4 2 -- Just 2 divide 4 0 -- Nothing
89. case divide 4 2 of Just n -> "Result is " ++ (toString n) Nothing -> "No Result"
90. case divide 4 2 of Just n -> "Result is " ++ (toString n) Nothing -> "No Result"
91. case divide 4 2 of Just n -> "Result is " ++ (toString n) Nothing -> "No Result"
92. case divide 4 2 of Just n -> "Result is " ++ (toString n) Nothing -> "No Result"
93. case divide 4 2 of Just n -> "Result is " ++ (toString n) -- Nothing -> -- "No Result"
94. Exhaustive matching This `case` does not have branches for all possibilities. 21|> case divide 4 2 of 22|> Just n -> 23|> "Result is " ++ (toString n) You need to account for the following values: Maybe.Nothing Add a branch to cover this pattern!
95. Update View Model Messages The Elm Architecture
96. Demos The Elm Architecture in Action
97. Getting Started • elm-lang.org • elm-lang.org/examples • guide.elm-lang.org • www.elm-tutorial.org • builtwithelm.co • Slack • elmlang.herokuapp.com
98. Say hello@testdouble.com Thank you! Jeremy Fairbank / @elpapapollo