Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Scenic City Summit 2017: Tame the frontend with...

Scenic City Summit 2017: Tame the frontend with Elm

Avatar for Jeremy Fairbank

Jeremy Fairbank

July 28, 2017
Tweet

More Decks by Jeremy Fairbank

Other Decks in Programming

Transcript

  1. elm

  2. elm

  3. greet name = "Hello, " ++ name greet "Scenic City

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

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

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

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

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

    Summit" -- Hello, Scenic City Summit
  9. add x y = x + y add 2 3

    == 5 add 2 3 == 5 add 2 3 == 5
  10. add x y = x + y add 2 3

    == 5 add 2 3 == 5 add 2 3 == 5
  11. add x y = x + y add 2 3

    == 5 add 2 3 == 5 add 2 3 == 5
  12. 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
  13. 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 ×
  14. myList = [1, 2, 3, 4, 5] double n =

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

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

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

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

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

    n * 2 doubleNumbers list = List.map double list doubleNumbers myList -- [2, 4, 6, 8, 10]
  20. add x y = x + y add 1 2

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

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

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

    -- 3 (add 1) 2 -- 3 New function created
  24. greet name = "Hello, " ++ name exclaim phrase =

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

    phrase ++ "!" excitedGreeting name = exclaim (greet (String.toUpper name))
  26. Strong Static Types life : Int life = 42 greeting

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

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

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

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

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

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

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

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

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

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

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

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

    dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. 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
  46. type alias Dog = { name : String , age

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

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

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

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

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

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

    age = 11 , breed = Shelty } Misspelled. Won’t compile!
  53. type Maybe a = Just a | Nothing Wraps the

    successful value Type Variable
  54. type Maybe a = Just a | Nothing Either I

    have Just the value a, or I have Nothing.
  55. 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
  56. 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
  57. 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
  58. 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
  59. 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
  60. 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
  61. case divide 4 2 of Just n -> "Result is

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

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

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

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

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