Fluent Conf 2017: Tame the frontend with Elm

Fluent Conf 2017: Tame the frontend with Elm

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

June 21, 2017
Tweet

Transcript

  1. 4.
  2. 6.

    elm

  3. 9.
  4. 11.

    elm

  5. 16.

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

    -- Hello, Fluent Conf Single Expression
  6. 22.

    add x y = x + y add 2 3

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

    add x y = x + y add 2 3

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

    add x y = x + y add 2 3

    == 5 add 2 3 == 5 add 2 3 == 5
  9. 26.

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

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

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

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

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

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

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

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

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

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

    add x y = x + y add 1 2

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

    add x y = x + y add 1 2

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

    add x y = x + y add 1 2

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

    add x y = x + y add 1 2

    -- 3 (add 1) 2 -- 3 New function created
  19. 51.

    Strong Static Types life : Int life = 42 greeting

    : String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
  20. 52.

    Strong Static Types life : Int life = 42 greeting

    : String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
  21. 53.

    Strong Static Types life : Int life = 42 greeting

    : String greeting = "Hello World" isTrue : Bool isTrue = True numbers : List Int numbers = [1, 2, 3]
  22. 54.

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

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

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

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

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

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

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

    ++ name add : Int -> (Int -> Int) add x y = x + y
  26. 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
  27. 60.

    dog : { name : String, age : Int }

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

    dog : { name : String, age : Int }

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

    dog : { name : String, age : Int }

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

    dog : { name : String, age : Int }

    dog = { name = "Tucker" , age = 11 } dog.name -- "Tucker" dog.age -- 11 Records
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 71.

    type alias Dog = { name : String , age

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

    type alias Dog = { name : String , age

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

    type alias Dog = { name : String , age

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

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

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

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

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

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

    age = 11 , breed = Sheltie }
  43. 80.
  44. 82.

    type Maybe a = Just a | Nothing Either I

    have Just the value a, or I have Nothing.
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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
  51. 89.

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

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

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

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

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

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

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

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

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

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