1 The main view function takes an Address and the current Model as input and returns a virtual HTML that represents the UI we want rendered. In Elm we use something called mailboxes to respond to user interactions. Check out the note section below for more details if you’re interested. In short the address param is the address to a given mailbox. Elm picks up any messages in the mailbox, handles them and ultimately the results flow back to our application through the previously described update function.

2 All HTML tags have a corresponding function and all follow the same pattern. The first argument is a list of attributes, the second is a list of sub elements.

3 The beauty of everything being a function (as opposed to templating languages) is that you have the full power of the language to construct your view. Map, filter, reduce etc to your heart’s content.

4 The searchInputView function renders the search input field. This is where most of the user interaction stuff happens so it’s naturally the most complex part of the UI.

5 We use the Dict type to represent key/values. Think map if you’re from a Clojure background! The keyActions map lists the keycode and update action combo we are interested in handling.

6 We want to intercept just the given keyCodes everything else should flow through and update the searchStr in our model. To support that we need to implement a custom decoder for the keydown event.

7 You can read handleKeydown as follows, if the keyCode lookup for the given k returns an Action use that otherwise use the default NoOp action. The result from that is used as the last param of the Signal.message function. (In Clojure terms you can think of |> as thread-last). Signal.message sends the given action to the given address.

8 The search input handles changes to the input by triggering the Filter action with a payload which is the current value of the input. To handle the special characters we handle the keydown event using the local helper function we outlined in <7>.

9 itemView constructs the view for each individual item. Most of the logic here is related to giving the currently selected item it’s own css class.

10 Maybe.andThen is a function to help you chain maybes. (There is no such thing as null/nil in Elm !). flip flips the order of the two first arguments, and we do it to allow us to chain calls using the |> operator