Fluent Conf 2017: Tame the frontend with Elm

Transcript

1. 1.

   Tame the frontend with Elm Jeremy Fairbank / @elpapapollo

2. 2.

   Software is broken. We are here to fix it. Say

   hello@testdouble.com
3. 3.

   Happiness

4. 4.

   None
5. 5.

   ✓ Easier to write code ✓ Easier to write tests

   ✓ Easier to refactor
6. 6.

   elm

7. 7.

   No runtime exceptions in practice.

8. 8.

   No undefined is not a function

9. 9.

   Fast

10. 10.

    One framework. No fatigue. Update View Model Messages

11. 11.

    elm

12. 12.

    Functional

13. 13.

    greet name = "Hello, " ++ name greet "Fluent Conf"

    -- Hello, Fluent Conf
14. 14.

    greet name = "Hello, " ++ name greet "Fluent Conf"

    -- Hello, Fluent Conf
15. 15.

    greet name = "Hello, " ++ name greet "Fluent Conf"

    -- Hello, Fluent Conf
16. 16.

    greet name = "Hello, " ++ name greet "Fluent Conf"

    -- Hello, Fluent Conf Single Expression
17. 17.

    greet name = "Hello, " ++ name greet "Fluent Conf"

    -- Hello, Fluent Conf
18. 18.

    greet name = "Hello, " ++ name greet "Fluent Conf"

    -- Hello, Fluent Conf
19. 19.

    Pure Data in Data out

20. 20.

    Pure No side effects

21. 21.

    Pure Predictable and Testable!

22. 22.

    add x y = x + y add 2 3

    == 5 add 2 3 == 5 add 2 3 == 5
23. 23.

    add x y = x + y add 2 3

    == 5 add 2 3 == 5 add 2 3 == 5
24. 24.

    add x y = x + y add 2 3

    == 5 add 2 3 == 5 add 2 3 == 5
25. 25.

    Expressive Terse and declarative code

26. 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. 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. 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. 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. 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. 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. 32.

    Curried Functions Building blocks

33. 33.

    add x y = x + y add 1 2

    -- 3 (add 1) 2 -- 3
34. 34.

    add x y = x + y add 1 2

    -- 3 (add 1) 2 -- 3
35. 35.

    add x y = x + y add 1 2

    -- 3 (add 1) 2 -- 3
36. 36.

    add x y = x + y add 1 2

    -- 3 (add 1) 2 -- 3 New function created
37. 37.

    increment = add 1 increment 2 -- 3 increment 41

    -- 42
38. 38.

    increment = add 1 increment 2 -- 3 increment 41

    -- 42
39. 39.

    increment = add 1 increment 2 -- 3 increment 41

    -- 42
40. 40.

    Pipes Expressive Chaining

41. 41.

    exclaim (greet (String.toUpper "Tucker")) greet name = "Hello, " ++

    name exclaim phrase = phrase ++ "!"
42. 42.

    "Tucker" |> String.toUpper |> greet |> exclaim

43. 43.

    "Tucker" |> String.toUpper |> greet |> exclaim

44. 44.

    |> String.toUpper "Tucker" |> greet |> exclaim

45. 45.

    "TUCKER" |> greet |> exclaim

46. 46.

    |> greet "TUCKER" |> exclaim

47. 47.

    "Hello, TUCKER" |> exclaim

48. 48.

    |> exclaim "Hello, TUCKER"

49. 49.

    "Hello, TUCKER!"

50. 50.

    No Runtime Exceptions

51. 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. 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. 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. 54.

    greet : String -> String greet name = "Hello, "

    ++ name add : Int -> Int -> Int add x y = x + y
55. 55.

    greet : String -> String greet name = "Hello, "

    ++ name add : Int -> Int -> Int add x y = x + y
56. 56.

    greet : String -> String greet name = "Hello, "

    ++ name add : Int -> Int -> Int add x y = x + y
57. 57.

    greet : String -> String greet name = "Hello, "

    ++ name add : Int -> (Int -> Int) add x y = x + y
58. 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. 59.

    Immutable Data Safe and Consistent

60. 60.

    dog : { name : String, age : Int }

    dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
61. 61.

    dog : { name : String, age : Int }

    dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
62. 62.

    dog : { name : String, age : Int }

    dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
63. 63.

    dog : { name : String, age : Int }

    dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
64. 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. 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. 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. 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. 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. 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. 70.

    Custom Types Domain-specific code

71. 71.

    type alias Dog = { name : String , age

    : Int , breed : Breed } type Breed = Sheltie | Poodle
72. 72.

    type alias Dog = { name : String , age

    : Int , breed : Breed } type Breed = Sheltie | Poodle
73. 73.

    type alias Dog = { name : String , age

    : Int , breed : Breed } type Breed = Sheltie | Poodle Union Type
74. 74.

    dog : Dog dog = { name = "Tucker" ,

    age = 11 , breed = Sheltie }
75. 75.

    dog : Dog dog = { name = "Tucker" ,

    age = 11 , breed = Sheltie }
76. 76.

    dog : Dog dog = { name = "Tucker" ,

    age = 11 , breed = Sheltie }
77. 77.

    No null or undefined

78. 78.

    type Maybe a = Just a | Nothing

79. 79.

    type Maybe a = Just a | Nothing Wraps the

    successful value
80. 80.

    type Maybe a = Just a | Nothing Represents no

    result or missing value
81. 81.

    type Maybe a = Just a | Nothing Type Variable

82. 82.

    type Maybe a = Just a | Nothing Either I

    have Just the value a, or I have Nothing.
83. 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. 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. 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. 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. 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. 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. 89.

    case divide 4 2 of Just n -> "Result is

    " ++ (toString n) Nothing -> "No Result"
90. 90.

    case divide 4 2 of Just n -> "Result is

    " ++ (toString n) Nothing -> "No Result"
91. 91.

    case divide 4 2 of Just n -> "Result is

    " ++ (toString n) Nothing -> "No Result"
92. 92.

    case divide 4 2 of Just n -> "Result is

    " ++ (toString n) Nothing -> "No Result"
93. 93.

    case divide 4 2 of Just n -> "Result is

    " ++ (toString n) -- Nothing -> -- "No Result"
94. 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. 95.

    Update View Model Messages The Elm Architecture

96. 96.

    Demos The Elm Architecture in Action

97. 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. 98.

    Say hello@testdouble.com Thank you! Jeremy Fairbank / @elpapapollo