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

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!