Tips for building a Single Page App (SPA) with Elm

Covers the following things:

• Having multiple sub pages with their own model/view/update functions. More specifically, the difficulty I had in adding these sub pages to one overarching Main view, thanks to the mismatched types. It was difficult for me to understand how to make a sub pages update signature of SubMsg -> SubModel -> (SubModel, Cmd SubMsg) work in the Main update function.
  • Yes, I could easily get the submodel out of the update command by using SubPage.update mainModel.subPageModel and pulling it out with a case expression, but I couldn’t figure out what to do with the Cmd SubMsg part; do I just discard it? what if the sub page is doing an http operation, which that Cmd holds? It would never update if I just discard it.
  • Answer was to use Cmd.map, just like you use Html.map.
• If you’re doing a SPA, you probably want to use Browser.application to start your program. This wants your view function to return a Browser.Document msg, which is just a type alias for a record that looks like { title : String, body : Html list }.
  • Difficulty mapping the sub views — I couldn’t do Html.map (subview) because the subview was returning a Browser.Document. The solution was to map every item in Browser.Document.body with Html.map.
• Another difficulty in one of the subviews that has a concept of multiple pages that are not different URLs. Think the steps of a checkout, where first you enter a billing address, then shipping address, then payment information. I had trouble passing a function to each of those steps that would bubble up an event to the view and tell it to switch to the next step.

Sidenote, I really wish Elm’s type signatures made generics a little more obvious. It’s cognitively more work for me to visually parse the difference between Browser.Document msg and Browser.Document Msg. It would be easier if Elm used some kind of symbol or annotation to indicate that msg is generic; something like Browser.Document<msg> like C#, or Browser.Document 'msg like F#.