Structuring Views in Elm

Given at the Boston Elm meetup, this talk walks through ways of structuring Elm views to go from HTML soup to a view built entirely out of domain terms.

1. Structuring Views in Elm
2. Common Views
3. div [ class "survey" ] [ div [class "survey-section" ] [ h2 [ class "section-title" ] [ text "Food" ] , div [ class "question" ] [ div [ class "question-text" ] [ text "Pineapple on Pizza?" ] , div [] [ label [ for "pop-yes" ] [ text "Yes"] , input [ type_ "radio" , id "pop-yes" , name "pop" , onCheck (always <| PoP True) ] [] , label [ for "pop-no" ] [ text "No"] , input [ type_ "radio" , id "pop-no" , name "pop" , onCheck (always <| PoP False) ] [] ] ] ] -- repeat for anchovies ]
4. Hard to read
5. Extract Method
6. Extract Method Function
7. radio : Msg -> String -> String -> String -> Html Msg radio msg groupName idSuffix labelText = ...
8. div [ class "survey" ] [ div [class "survey-section" ] [ h2 [ class "section-title" ] [ text "Food" ] , div [ class "question" ] [ div [ class "question-text" ] [ text "Pineapple on Pizza?" ] , div [] [ radio (PoP True) "pop" "-yes" "Yes" , radio (PoP False) "pop" "-no" "No" ] ] ] -- repeat for anchovies ]
9. Top-down
10. That's a lot of arguments
11. Layered API
12. elm/html
13. node : String -> List (Attribute msg) -> List (Html msg) -> Html msg
14. div : List (Attribute msg) -> List (Html msg) -> Html msg div attributes children = node "div" attributes children
15. yesNoQuestion : String -> (Bool -> Msg) -> String -> Html Msg yesNoQuestion questionText tagger groupName = ...
16. div [ class "survey" ] [ div [class "survey-section" ] [ h2 [ class "section-title" ] [ text "Food" ] , yesNoQuestion "Pineaple on Pizza?" PoP "pop" ] -- repeat for anchovies ]
17. Bottom-up
18. surveySection : String -> List (Html a) -> Html a surveySection sectionTitle questions = ...
19. survey : List (Html a) -> Html a survey sections = ...
20. survey [ surveySection "Toppings" [ yesNoQuestion "Pineaple on Pizza?" PoP "pop" -- repeat for anchovies ] ]
21. The reader shouldn't be able to tell what technology you used for you view
22. In particular, try to avoid duplicating CSS classes
23. survey [ surveySection "Toppings" [ yesNoQuestion "Pineaple on Pizza?" PoP "pop" , yesNoQuestion "Anchovies?" Anchovies "ancho" ] , surveySection "Crust" [ pickOne [ ("Thin Crust", Thin) , ("Thick Crust", Thick) , ("Chicago Style", Chicago) ] ] ]
24. Bonus tips: Conditions
25. Separate conditional logic from content
26. viewMessage : Message -> Html a viewMessage message div [ if message.isError then (class "red") else (class "green") ] [ text message.text ]
27. messageClass : Bool -> Html.Attribute a messageClass isError = ...
28. viewMessage : Message -> Html a viewMessage message div [ messageClass message.isError ] [ text message.text ]
29. Push up conditional logic
30. viewMessage : Message -> Html a viewMessage message div [ if message.isError then (class "red") else (class "green") ] (if message.isError then [ errorIcon, text message.text ] else [ text message.text ] )
31. viewMessage : Message -> Html a viewMessage message div [ messageClass message.isError ] (messageContent message)
32. viewMessage : Message -> Html a viewMessage message if message.isError then errorMessage message.text else successMessage message.text
33. Easier to understand individual messages
34. errorMessage : String -> Html a errorMessage content = div [ class "red" ] [ errorIcon, text content ]
35. successMessage : String -> Html a successMessage content = div [ class "green" ] [ text content ]