Functional in the Front, Rails in the Back: the Elm Mullet

Presentation given at RubyConf AU 2017.

Transcript

1. Hello @rahult @louis_simoneau
2. What is elm?
3. What is elm? A delightful language for reliable webapps. Generate JavaScript with great performance and no runtime exceptions.
5. What is elm… …and why should I care?
6. No Runtime Errors
7. No Runtime Errors type alias User = { name: String , state: String , phone: String }
8. No Runtime Errors type alias User = { name: String , state: String , phone: String } areaCodes = Dict.fromList [ ("ACT", "02") , ("NSW", "02") , ("NT", "08") , ("QLD", "07") , ("SA", "08") , ("VIC", "03") , ("WA", "08") ]
9. No Runtime Errors type alias User = { name: String , state: String , phone: String } areaCodes = Dict.fromList [ ("ACT", "02") , ("NSW", "02") , ("NT", "08") , ("QLD", "07") , ("SA", "08") , ("VIC", "03") , ("WA", "08") ] displayPhone user = (Dict.get user.state areaCodes) ++ user.phone
12. No Runtime Errors type alias User = { name: String , state: String , phone: String } areaCodes = Dict.fromList [ ("ACT", "02") , ("NSW", "02") , ("NT", "08") , ("QLD", "07") , ("SA", "08") , ("VIC", "03") , ("WA", "08") ] displayPhone user = (Dict.get user.state areaCodes) ++ user.phone
13. No Runtime Errors displayPhone user = case (Dict.get user.state areaCodes) of Just areaCode -> areaCode ++ user.phone Nothing -> user.phone ++ " (area code unknown)"
14. No Runtime Errors displayPhone user = case (Dict.get user.state areaCodes) of Just areaCode -> areaCode ++ user.phone Nothing -> user.phone ++ " (area code unknown)"
15. No Runtime Errors displayPhone user = case (Dict.get user.state areaCodes) of Just areaCode -> areaCode ++ user.phone Nothing -> user.phone ++ " (area code unknown)"
16. No Runtime Errors displayPhone user = case (Dict.get user.state areaCodes) of Just areaCode -> areaCode ++ user.phone Nothing -> user.phone ++ " (area code unknown)"
17. What is elm… …and why should I care?
18. “Ruby is designed to make programmers happy.” - Yukihiro Matsumoto
19. “Elm is designed to be fun to use.” - Evan Czaplicki… …probably said something like this
20. Batteries Included JavaScript Elm Package Manager Compiler Views Application State Tests elm-test
21. Low Barrier to Entry
22. Low Barrier to Entry
23. Low Barrier to Entry
24. Crash Course in Elm Syntax Well-handled edge case
25. Ruby Elm Elm Syntax (Literals) > 42 => 42 irb(main):002:0> 1.618 => 1.618 > 42 42 : number > 1.618 1.618 : Float
26. Ruby Elm Elm Syntax (Literals) > 42 => 42 irb(main):002:0> 1.618 => 1.618 > 42 42 : number > 1.618 1.618 : Float
27. Ruby Elm Elm Syntax (Literals) > 42 => 42 > 1.618 => 1.618 > 42 42 : number > 1.618 1.618 : Float
28. Ruby Elm Elm Syntax (Literals) > 42 => 42 > 1.618 => 1.618 > 42 42 : number > 1.618 1.618 : Float
29. Ruby Elm Elm Syntax (Literals) > "Hello" => "Hello" irb(main):004:0> 'H' => "H" irb(main):005:0> 'Hello' => "Hello" > "Hello" "Hello" : String > 'H' 'H' : Char > 'Hello' -- SYNTAX PROBLEM
30. Ruby Elm Elm Syntax (Literals) > "Hello" => "Hello" irb(main):004:0> 'H' => "H" irb(main):005:0> 'Hello' => "Hello" > "Hello" "Hello" : String > 'H' 'H' : Char > 'Hello' -- SYNTAX PROBLEM
31. Ruby Elm Elm Syntax (Literals) > "Hello" => "Hello" > 'H' => "H" irb(main):005:0> 'Hello' => "Hello" > "Hello" "Hello" : String > 'H' 'H' : Char > 'Hello' -- SYNTAX PROBLEM
32. Ruby Elm Elm Syntax (Literals) > "Hello" => "Hello" > 'H' => "H" irb(main):005:0> 'Hello' => "Hello" > "Hello" "Hello" : String > 'H' 'H' : Char > 'Hello' -- SYNTAX PROBLEM
33. Ruby Elm Elm Syntax (Literals) > "Hello" => "Hello" > 'H' => "H" > 'Hello' => "Hello" > "Hello" "Hello" : String > 'H' 'H' : Char > 'Hello' -- SYNTAX PROBLEM
34. Ruby Elm Elm Syntax (Literals) > "Hello" "Hello" : String > 'H' 'H' : Char > 'Hello' -- SYNTAX PROBLEM > "Hello" => "Hello" > 'H' => "H" > 'Hello' => "Hello"
35. Ruby Elm Elm Syntax (List) > [1,2,3] => [1, 2, 3] > [1,2,3].map { |n| n + 1 } => [2, 3, 4] > [1, "ABC", 3] => [1, "ABC", 3] > [1, "ABC", 3].map { |n| n + 1 } TypeError: no implicit conversion of Integer into String > [1,2,3] [1,2,3] : List number > List.map (\n -> n + 1) [1,2,3] [2,3,4] : List number > [1, "ABC", 3] -- TYPE MISMATCH
36. Ruby Elm Elm Syntax (List) > [1,2,3] => [1, 2, 3] > [1,2,3].map { |n| n + 1 } => [2, 3, 4] > [1, "ABC", 3] => [1, "ABC", 3] > [1, "ABC", 3].map { |n| n + 1 } TypeError: no implicit conversion of Integer into String > [1,2,3] [1,2,3] : List number > List.map (\n -> n + 1) [1,2,3] [2,3,4] : List number > [1, "ABC", 3] -- TYPE MISMATCH
37. Ruby Elm Elm Syntax (List) > [1,2,3] => [1, 2, 3] > [1,2,3].map { |n| n + 1 } => [2, 3, 4] > [1, "ABC", 3] => [1, "ABC", 3] > [1, "ABC", 3].map { |n| n + 1 } TypeError: no implicit conversion of Integer into String > [1,2,3] [1,2,3] : List number > List.map (\n -> n + 1) [1,2,3] [2,3,4] : List number > [1, "ABC", 3] -- TYPE MISMATCH
38. Ruby Elm Elm Syntax (List) > [1,2,3] => [1, 2, 3] > [1,2,3].map { |n| n + 1 } => [2, 3, 4] > [1, "ABC", 3] => [1, "ABC", 3] > [1, "ABC", 3].map { |n| n + 1 } TypeError: no implicit conversion of Integer into String > [1,2,3] [1,2,3] : List number > List.map (\n -> n + 1) [1,2,3] [2,3,4] : List number > [1, "ABC", 3] -- TYPE MISMATCH
39. Ruby Elm Elm Syntax (List) > [1,2,3] => [1, 2, 3] > [1,2,3].map { |n| n + 1 } => [2, 3, 4] > [1, "ABC", 3] => [1, "ABC", 3] > [1, "ABC", 3].map { |n| n + 1 } TypeError: no implicit conversion of Integer into String > [1,2,3] [1,2,3] : List number > List.map (\n -> n + 1) [1,2,3] [2,3,4] : List number > [1, "ABC", 3] -- TYPE MISMATCH
40. Ruby Elm Elm Syntax (List) > [1,2,3] => [1, 2, 3] > [1,2,3].map { |n| n + 1 } => [2, 3, 4] > [1, "ABC", 3] => [1, "ABC", 3] > [1, "ABC", 3].map { |n| n + 1 } TypeError: no implicit conversion of Integer into String > [1,2,3] [1,2,3] : List number > List.map (\n -> n + 1) [1,2,3] [2,3,4] : List number > [1, "ABC", 3] -- TYPE MISMATCH
41. Ruby Elm Elm Syntax (List) > [1,2,3] => [1, 2, 3] > [1,2,3].map { |n| n + 1 } => [2, 3, 4] > [1, "ABC", 3] => [1, "ABC", 3] > [1, "ABC", 3].map { |n| n + 1 } TypeError: no implicit conversion of Integer into String > [1,2,3] [1,2,3] : List number > List.map (\n -> n + 1) [1,2,3] [2,3,4] : List number > [1, "ABC", 3] -- TYPE MISMATCH
42. Ruby Elm Elm Syntax (List) > [1,2,3] => [1, 2, 3] > [1,2,3].map { |n| n + 1 } => [2, 3, 4] > [1, "ABC", 3] => [1, "ABC", 3] > [1, "ABC", 3].map { |n| n + 1 } TypeError: no implicit conversion of Integer into String > [1,2,3] [1,2,3] : List number > List.map (\n -> n + 1) [1,2,3] [2,3,4] : List number > [1, "ABC", 3] -- TYPE MISMATCH > List.map (\n -> n + 1) [1,'ABC',3] -- Avoid Runtime Errors by Design
43. Ruby Elm Elm Syntax (Record) > point = OpenStruct.new(x:4,y:2) => #<OpenStruct x=4, y=2> > point.x => 4 > point.x = 1 => 1 > point.z = 3 => 3 > point = { x = 4, y = 2 } { x = 4, y = 2 } : { x : number, y : number1 } > point.x 4 : number > { point | x = 1 } { x = 1, y = 2 } : { y : number1, x : number } > { point | z = 1 } -- TYPE MISMATCH
44. Ruby Elm Elm Syntax (Record) > point = OpenStruct.new(x:4,y:2) => #<OpenStruct x=4, y=2> > point.x => 4 > point.x = 1 => 1 > point.z = 3 => 3 > point = { x = 4, y = 2 } { x = 4, y = 2 } : { x : number, y : number1 } > point.x 4 : number > { point | x = 1 } { x = 1, y = 2 } : { y : number1, x : number } > { point | z = 1 } -- TYPE MISMATCH
45. Ruby Elm Elm Syntax (Record) > point = OpenStruct.new(x:4,y:2) => #<OpenStruct x=4, y=2> > point.x => 4 > point.x = 1 => 1 > point.z = 3 => 3 > point = { x = 4, y = 2 } { x = 4, y = 2 } : { x : number, y : number1 } > point.x 4 : number > { point | x = 1 } { x = 1, y = 2 } : { y : number1, x : number } > { point | z = 1 } -- TYPE MISMATCH
46. Ruby Elm Elm Syntax (Record) > point = OpenStruct.new(x:4,y:2) => #<OpenStruct x=4, y=2> > point.x => 4 > point.x = 1 => 1 > point.z = 3 => 3 > point = { x = 4, y = 2 } { x = 4, y = 2 } : { x : number, y : number1 } > point.x 4 : number > { point | x = 1 } { x = 1, y = 2 } : { y : number1, x : number } > { point | z = 1 } -- TYPE MISMATCH
47. Ruby Elm Elm Syntax (Record) > point = OpenStruct.new(x:4,y:2) => #<OpenStruct x=4, y=2> > point.x => 4 > point.x = 1 => 1 > point.z = 3 => 3 > point = { x = 4, y = 2 } { x = 4, y = 2 } : { x : number, y : number1 } > point.x 4 : number > { point | x = 1 } { x = 1, y = 2 } : { y : number1, x : number } > { point | z = 1 } -- TYPE MISMATCH
48. Ruby Elm Elm Syntax (Record) > point = OpenStruct.new(x:4,y:2) => #<OpenStruct x=4, y=2> > point.x => 4 > point.x = 1 => 1 > point.z = 3 => 3 > point = { x = 4, y = 2 } { x = 4, y = 2 } : { x : number, y : number1 } > point.x 4 : number > { point | x = 1 } { x = 1, y = 2 } : { y : number1, x : number } > { point | z = 1 } -- TYPE MISMATCH
49. Ruby Elm Elm Syntax (Record) > point = OpenStruct.new(x:4,y:2) => #<OpenStruct x=4, y=2> > point.x => 4 > point.x = 1 => 1 > point.z = 3 => 3 > point = { x = 4, y = 2 } { x = 4, y = 2 } : { x : number, y : number1 } > point.x 4 : number > { point | x = 1 } { x = 1, y = 2 } : { y : number1, x : number } > { point | z = 1 } -- TYPE MISMATCH
50. Ruby Elm Elm Syntax (Record) > point = OpenStruct.new(x:4,y:2) => #<OpenStruct x=4, y=2> > point.x => 4 > point.x = 1 => 1 > point.z = 3 => 3 > point = { x = 4, y = 2 } { x = 4, y = 2 } : { x : number, y : number1 } > point.x 4 : number > { point | x = 1 } { x = 1, y = 2 } : { y : number1, x : number } > { point | z = 1 } -- TYPE MISMATCH
51. Ruby Elm Elm Syntax (Functions) > def add(x, y) x + y end => :add > add 1, 2 => 3 > add x y = x + y <function> : number -> number -> number > add 1 2 3 : number
52. Ruby Elm Elm Syntax (Functions) > def add(x, y) x + y end => :add > add 1, 2 => 3 > add x y = x + y <function> : number -> number -> number > add 1 2 3 : number
53. Ruby Elm Elm Syntax (Functions) > def add(x, y) x + y end => :add > add 1, 2 => 3 > add x y = x + y <function> : number -> number -> number > add 1 2 3 : number
54. Ruby Elm Elm Syntax (Functions) > def add(x, y) x + y end => :add > add 1, 2 => 3 > add x y = x + y <function> : number -> number -> number > add 1 2 3 : number
55. ELM Syntax (Type Annotation) greet : String -> String greet name = "Hello, " ++ name ++ "!" 
 square : number -> number square number = number * number
 
 add : number -> number -> number add x y = x + y
56. ELM Syntax (Type Annotation) greet : String -> String greet name = "Hello, " ++ name ++ "!" 
 square : number -> number square number = number * number
 
 add : number -> number -> number add x y = x + y
57. Elm (Currying) add : number -> number -> number add x y = x + y > add 1 2 3 : number > add 1 <function> : number -> number > ((add 1) 2) 3 : number
58. Elm (Currying) add : number -> number -> number add x y = x + y > add 1 2 3 : number > add 1 <function> : number -> number > ((add 1) 2) 3 : number
59. Elm (Currying) add : number -> (number -> number) add x y = x + y > add 1 2 3 : number > add 1 <function> : number -> number > ((add 1) 2) 3 : number
60. Elm (Currying) add : number -> number -> number add x y = x + y > add 1 2 3 : number > add 1 <function> : number -> number > ((add 1) 2) 3 : number
61. ELM Syntax (Type Alias) name : { firstName : String, lastName : String } -> String name person = person.firstName ++ " " ++ person.lastName
62. ELM Syntax (Type Alias) type alias Person = { firstName : String, lastName : String } name : Person -> String name person = person.firstName ++ " " ++ person.lastName
63. ELM Syntax (Type Alias) type alias Person = { firstName : String, lastName : String } name : Person -> String name person = person.firstName ++ " " ++ person.lastName
64. ELM Syntax (Union Types) type User = Anonymous | Named String Anonymous -- Anonymous : User Named -- <function> : String -> User Named "Marvin" --Named "Marvin" : User
65. ELM Syntax (Union Types) type User = Anonymous | Named String Anonymous -- Anonymous : User Named -- <function> : String -> User Named "Marvin" --Named "Marvin" : User
66. ELM Syntax (Union Types) type User = Anonymous | Named String Anonymous -- Anonymous : User Named -- <function> : String -> User Named "Marvin" --Named "Marvin" : User
67. ELM Syntax (Union Types) type User = Anonymous | Named String Anonymous -- Anonymous : User Named -- <function> : String -> User Named "Marvin" --Named "Marvin" : User
68. ELM Syntax (Union Types) userPhoto : User -> String userPhoto user = case user of Anonymous -> "anonymous.png" Named name -> "users/" ++ name ++ ".png"
69. ELM Syntax (Union Types) userPhoto : User -> String userPhoto user = case user of Anonymous -> "anonymous.png" Named name -> "users/" ++ name ++ ".png"
70. ELM Syntax (Union Types) userPhoto : User -> String userPhoto user = case user of Anonymous -> "anonymous.png" Named name -> "users/" ++ name ++ ".png"
71. ELM Syntax (Union Types) userPhoto : User -> String userPhoto user = case user of Anonymous -> "anonymous.png" Named name -> "users/" ++ name ++ ".png"
72. ELM Syntax (Union Types) type Maybe a = Nothing | Just a type alias User = { firstName : String, middleName : Maybe String, lastName : String } { firstName = "Douglas", middleName = Nothing, lastName = "Adams" } { firstName = "Douglas", middleName = Just "Noel", lastName = "Adams" }
73. ELM Syntax (Union Types) type Maybe a = Nothing | Just a type alias User = { firstName : String, middleName : Maybe String, lastName : String } { firstName = "Douglas", middleName = Nothing, lastName = "Adams" } { firstName = "Douglas", middleName = Just "Noel", lastName = "Adams" }
74. ELM Syntax (Union Types) type Maybe a = Nothing | Just a type alias User = { firstName : String, middleName : Maybe String, lastName : String } { firstName = "Douglas", middleName = Nothing, lastName = "Adams" } { firstName = "Douglas", middleName = Just "Noel", lastName = "Adams" }
75. ELM Syntax (Union Types) type Maybe a = Nothing | Just a type alias User = { firstName : String, middleName : Maybe String, lastName : String } { firstName = "Douglas", middleName = Nothing, lastName = "Adams" } { firstName = "Douglas", middleName = Just "Noel", lastName = "Adams" }
76. ELM Syntax (Union Types) type Result error value = Err error | Ok value String.toInt : String -> Result String Int String.toInt "123" == Ok 123 String.toInt "-42" == Ok -42 String.toInt "3.1" == Err "could not convert string '3.1' to an Int" String.toInt "31a" == Err "could not convert string '31a' to an Int”
77. ELM Syntax (Union Types) type Result error value = Err error | Ok value String.toInt : String -> Result String Int String.toInt "123" == Ok 123 String.toInt "-42" == Ok -42 String.toInt "3.1" == Err "could not convert string '3.1' to an Int" String.toInt "31a" == Err "could not convert string '31a' to an Int”
78. ELM Syntax (Union Types) type Result error value = Err error | Ok value String.toInt : String -> Result String Int String.toInt "123" == Ok 123 String.toInt "-42" == Ok -42 String.toInt "3.1" == Err "could not convert string '3.1' to an Int" String.toInt "31a" == Err "could not convert string '31a' to an Int”
79. ELM Syntax (Union Types) type Result error value = Err error | Ok value String.toInt : String -> Result String Int String.toInt "123" == Ok 123 String.toInt "3.1" == Err "could not convert string '3.1' to an Int" String.toInt "31a" == Err "could not convert string '31a' to an Int”
80. The App github.com/lsimoneau/elm-cart
83. Elm + Rails github.com/fbonetti/elm-rails
84. Html.beginnerProgram
85. Html.beginnerProgram Model View Update Msg
86. Html.beginnerProgram type alias Model = Int
87. Html.beginnerProgram type alias Model = Int type Msg = Increment | Decrement
88. Html.beginnerProgram type alias Model = Int type Msg = Increment | Decrement update : Msg -> Model -> Model update = ...
89. Html.beginnerProgram type alias Model = Int type Msg = Increment | Decrement update : Msg -> Model -> Model update = ... view : Model -> Html Msg view = ...
90. Html.beginnerProgram type alias Model = Int type Msg = Increment | Decrement update : Msg -> Model -> Model update = ... view : Model -> Html Msg view = ... Html.beginnerProgram { model: 0 , update: update , view: view }
91. Html.beginnerProgram Model View Update Msg
92. The Model type alias Item = { quantity: Int , name: String , unit_price: Float , subtotal: Float }
93. The Model type alias Item = { quantity: Int , name: String , unit_price: Float , subtotal: Float } type alias ProductId = Int
94. The Model type alias Item = { quantity: Int , name: String , unit_price: Float , subtotal: Float } type alias ProductId = Int type alias Model = Dict ProductId Item
95. The Model model : Model model = Dict.fromList [ ( 123 , { quantity: 1 , unit_price: 99.0 , subtotal: 99.0 , name: "Sulfuras, Hand of Ragnaros" } ) ]
96. The Update type Msg = Increment ProductId | Decrement ProductId
97. The Update type Msg = Increment ProductId | Decrement ProductId update : Msg -> Model -> Model update msg model = case msg of Increment productId -> updateProductCount productId model 1 Decrement productId updateProductCount productId model -1
98. The View itemView : ( ProductId, Item ) -> Html Msg itemView ( productId, item ) = div [] [ div [] [ text item.name ] , div [] [ toString item.quantity |> text ] , button [ onClick (Decrement productId) ] [ text "-" ] , button [ onClick (Increment productId) ] [ text "+" ] ]
99. The View view : Model -> Html Msg view model = div [] (List.map itemView (Dict.toList model)) itemView : ( ProductId, Item ) -> Html Msg itemView ( productId, item ) = div [] [ div [] [ text item.name ] , div [] [ toString item.quantity |> text ] , button [ onClick (Decrement productId) ] [ text "-" ] , button [ onClick (Increment productId) ] [ text "+" ] ]
100. Html.program
101. Html.program Commands Subscriptions Model View Update Msg Msg
102. Update with Commands update : Msg -> Model -> ( Model, Cmd Msg ) update msg model =
103. Update with Commands update : Msg -> Model -> ( Model, Cmd Msg ) update msg model =
104. Update with Commands update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of GoToCheckout -> ( { model | status = ViewingCheckoutForm }, Cmd.none ) CancelCheckout -> ( { model | status = ViewingCart }, Cmd.none )
105. Update with Commands update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of GoToCheckout -> ( { model | status = ViewingCheckoutForm }, Cmd.none ) CancelCheckout -> ( { model | status = ViewingCart }, Cmd.none )
106. Update with Commands update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of GoToCheckout -> ( { model | status = ViewingCheckoutForm }, Cmd.none ) CancelCheckout -> ( { model | status = ViewingCart }, Cmd.none ) Increment productId -> ( model, updateItem productId 1 ) Decrement productId -> ( model, updateItem productId -1 )
107. Update with Commands update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of GoToCheckout -> ( { model | status = ViewingCheckoutForm }, Cmd.none ) CancelCheckout -> ( { model | status = ViewingCart }, Cmd.none ) Increment productId -> ( model, updateItem productId 1 ) Decrement productId -> ( model, updateItem productId -1 ) GotCartResponse (Ok cart) -> ( { model | cart = cart }, Cmd.none ) GotCartResponse (Err error) -> ( { model | cartError = Just (displayError error) }, Cmd.none )
108. The App github.com/lsimoneau/elm-cart
109. Bonus Tip: Do the Elm Architecture Tutorial https:/ /guide.elm-lang.org/architecture/
110. Thank You @rahult @louis_simoneau