Jeremy Fairbank
July 28, 2017
160

# Scenic City Summit 2017: Tame the frontend with Elm

July 28, 2017

## Transcript

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

[email protected]

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

✓ Easier to refactor

13. ### greet name = "Hello, " ++ name greet "Scenic City

Summit" -- Hello, Scenic City Summit
14. ### greet name = "Hello, " ++ name greet "Scenic City

Summit" -- Hello, Scenic City Summit
15. ### greet name = "Hello, " ++ name greet "Scenic City

Summit" -- Hello, Scenic City Summit
16. ### greet name = "Hello, " ++ name greet "Scenic City

Summit" -- Hello, Scenic City Summit Single Expression
17. ### greet name = "Hello, " ++ name greet "Scenic City

Summit" -- Hello, Scenic City Summit
18. ### greet name = "Hello, " ++ name greet "Scenic City

Summit" -- Hello, Scenic City Summit

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

26. ### function doubleNumbers(numbers) { const doubled = []; const l =

numbers.length; for (let i = 0; i < l; i++) { doubled.push(numbers[i] * 2); } return doubled; } doubleNumbers([1, 2, 3, 4, 5]); // [2, 4, 6, 8, 10] Imperative
27. ### function doubleNumbers(numbers) { const doubled = []; const l =

numbers.length; for (let i = 0; i < l; i++) { doubled.push(numbers[i] * 2); } return doubled; } doubleNumbers([1, 2, 3, 4, 5]); // [2, 4, 6, 8, 10] Imperative ×
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. ### myList = [1, 2, 3, 4, 5] double n =

n * 2 doubleNumbers list = List.map double list doubleNumbers myList -- [2, 4, 6, 8, 10]
33. ### myList = [1, 2, 3, 4, 5] double n =

n * 2 doubleNumbers list = List.map double list doubleNumbers myList -- [2, 4, 6, 8, 10]

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
37. ### add x y = x + y add 1 2

-- 3 (add 1) 2 -- 3
38. ### add x y = x + y add 1 2

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

-- 42

-- 42

-- 42

43. ### greet name = "Hello, " ++ name exclaim phrase =

phrase ++ "!" excitedGreeting name = exclaim (greet (String.toUpper name))
44. ### greet name = "Hello, " ++ name exclaim phrase =

phrase ++ "!" excitedGreeting name = exclaim (greet (String.toUpper name))
45. ### excitedGreeting name = name |> String.toUpper |> greet |> exclaim

excitedGreeting "Tucker"
46. ### excitedGreeting name = name |> String.toUpper |> greet |> exclaim

excitedGreeting "Tucker"

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

: String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
56. ### Strong Static Types life : Int life = 42 greeting

: String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
57. ### Strong Static Types life : Int life = 42 greeting

: String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
58. ### Strong Static Types life : Int life = 42 greeting

: String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
59. ### Strong Static Types life : Int life = 42 greeting

: String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
60. ### greet : String -> String greet name = "Hello, "

++ name add : Int -> Int -> Int add x y = x + y
61. ### greet : String -> String greet name = "Hello, "

++ name add : Int -> Int -> Int add x y = x + y
62. ### greet : String -> String greet name = "Hello, "

++ name add : Int -> Int -> Int add x y = x + y
63. ### greet : String -> String greet name = "Hello, "

++ name add : Int -> (Int -> Int) add x y = x + y
64. ### The 2nd argument to function `add` is causing a mismatch.

7| add 2 "3" ^^^ Function `add` is expecting the 2nd argument to be: Int But it is: String Compile time static type checks

66. ### dog : { name : String, age : Int }

dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
67. ### dog : { name : String, age : Int }

dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
68. ### dog : { name : String, age : Int }

dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
69. ### dog : { name : String, age : Int }

dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
70. ### 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
71. ### 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
72. ### 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
73. ### 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
74. ### 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
75. ### 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

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

: Int , breed : Breed } type Breed = Sheltie | Poodle
78. ### type alias Dog = { name : String , age

: Int , breed : Breed } type Breed = Sheltie | Poodle
79. ### type alias Dog = { name : String , age

: Int , breed : Breed } type Breed = Sheltie | Poodle Union Type
80. ### dog : Dog dog = { name = "Tucker" ,

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

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

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

age = 11 , breed = Shelty } Misspelled. Won’t compile!

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

successful value
87. ### type Maybe a = Just a | Nothing Wraps the

successful value Type Variable
88. ### type Maybe a = Just a | Nothing Represents no

result or missing value
89. ### type Maybe a = Just a | Nothing Either I

have Just the value a, or I have Nothing.
90. ### 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
91. ### 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
92. ### 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
93. ### 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
94. ### 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
95. ### 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
96. ### case divide 4 2 of Just n -> "Result is

" ++ (toString n) Nothing -> "No Result"
97. ### case divide 4 2 of Just n -> "Result is

" ++ (toString n) Nothing -> "No Result"
98. ### case divide 4 2 of Just n -> "Result is

" ++ (toString n) Nothing -> "No Result"
99. ### case divide 4 2 of Just n -> "Result is

" ++ (toString n) Nothing -> "No Result"
100. ### case divide 4 2 of Just n -> "Result is

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

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

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