Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

What does it mean by Html Msg?

There are possibly 2 questions in this question. I'll answer them 1 by 1

Part 1: h-t-m-l message

After knowing the basic Elm syntax, we could be reading the following "return values" like this

userFromJWT : String -> Maybe User
-- returns a User value or nothing
split : String -> List String
-- returns a list of String

With the help from our prior programming experience, we treat the return values as *User and []String and jumps directly to think in terms of "How do I use a var u *User value? u.name?" and "How do I use a var s String? String.length(s)?"

We don't actually "see" the words Maybe or List; our attention was focused on User and String.

If we proceed with these instincts alone, we'll fumble when we see unfamiliar types. We'd ask the wrong questions

view : Model -> Html Msg
-- returns an h-t-m-l message... but how do I return such a message?
userEmail : Json.Decode.Decoder String
-- returns a json decode decoder string... but how do I return such a string?

There are no answers to the questions because there's a misunderstanding of the grammar. To avoid being misled by my prior programming experience, I do this one weird trick instead:

  1. Just focus on the first word

    Html Msg
    ^^^^
    -- and read "Html" type
    
    
    Json.Decode.Decoder String
    ^^^^^^^^^^^^^^^^^^^
    -- and read "Json.Decode.Decoder" type
    
    
    HelloWorld (Html msg) (Json.Decode.Decoder String)
    ^^^^^^^^^^
    -- and read "HelloWorld" type
  2. Then look at the documentation for that word; look for functions that returns that word

Here are some functions that I found with text search -> Html on in the Html docs page

text : String -> Html msg
div : List (Attribute msg) -> List (Html msg) -> Html msg
span : List (Attribute msg) -> List (Html msg) -> Html msg

-- note: unfamiliar types like `Attribute` usually refers to a type defined in the same module, i.e. `Html.Attribute`. You may have to search around for it

And calling any of the these functions will be able to give us a value of Html type, just provide the necessary input argument values.

Here are some functions that I found returning Decoder in the docs page of Json.Decode (there wasn't a page on Json.Decode.Decoder alone)

string : Decoder String
int : Decoder Int
list : Decoder a -> Decoder (List a)
field : String -> Decoder a -> Decoder a
oneOf : List (Decoder a) -> Decoder a

Same idea: calling any of the these functions will be able to give us a value of Json.Decode.Decoder type, just provide the necessary input argument values.

Part 2 Ok, but what is this Html type

In an Elm Browser program we are required to provide a view function that returns Html type. We can deduce Elm takes this return value and renders the corresponding DOM nodes in the browser.

view : model -> Html msg
view model =
    Html.h1 [ Html.Attributes.class "greeting" ] [ Html.text "Hello" ]

will render

<h1 class="greeting">Hello</h1>

The Html module does not export the internal details of this type for us to look at (aka it's an opaque type). The module only exports a bunch of functions for us to call, to obtain various Html values. And really that's all we can know about it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment