Jeremy Fairbank
June 21, 2017
140

# Fluent Conf 2017: Tame the frontend with Elm

June 21, 2017

## Transcript

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

[email protected]

4. ### ✓ Easier to write code ✓ Easier to write tests

✓ Easier to refactor

12. ### greet name = "Hello, " ++ name greet "Fluent Conf"

-- Hello, Fluent Conf
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 Single Expression
16. ### greet name = "Hello, " ++ name greet "Fluent Conf"

-- Hello, Fluent Conf
17. ### greet name = "Hello, " ++ name greet "Fluent Conf"

-- Hello, Fluent Conf

21. ### add x y = x + y add 2 3

== 5 add 2 3 == 5 add 2 3 == 5
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

25. ### myList = [1, 2, 3, 4, 5] double n =

n * 2 doubleNumbers list = List.map double list doubleNumbers myList -- [2, 4, 6, 8, 10]
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]

32. ### add x y = x + y add 1 2

-- 3 (add 1) 2 -- 3
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 New function created

-- 42

-- 42

-- 42

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

name exclaim phrase = phrase ++ "!"

50. ### Strong Static Types life : Int life = 42 greeting

: String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
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. ### greet : String -> String greet name = "Hello, "

++ name add : Int -> Int -> Int add x y = x + y
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. ### 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. ### dog : { name : String, age : Int }

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

70. ### type alias Dog = { name : String , age

: Int , breed : Breed } type Breed = Sheltie | Poodle
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 Union Type
73. ### dog : Dog dog = { name = "Tucker" ,

age = 11 , breed = Sheltie }
74. ### dog : Dog dog = { name = "Tucker" ,

age = 11 , breed = Sheltie }
75. ### dog : Dog dog = { name = "Tucker" ,

age = 11 , breed = Sheltie }

78. ### type Maybe a = Just a | Nothing Wraps the

successful value
79. ### type Maybe a = Just a | Nothing Represents no

result or missing value

81. ### type Maybe a = Just a | Nothing Either I

have Just the value a, or I have Nothing.
82. ### 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
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. ### case divide 4 2 of Just n -> "Result is

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

96. ### Getting Started • elm-lang.org • elm-lang.org/examples • guide.elm-lang.org • www.elm-tutorial.org

• builtwithelm.co • Slack • elmlang.herokuapp.com