51: Elm Routing (Maybe) - JSToElm
All Episodes

51: Elm Routing (Maybe)

We are trying our best to make the self imposed deadline to have our app converted by Elm-conf. Let's dive in and see what went well, where we struggled, and what we did to procrastinate.

Getting over the hump for Routing

  • We tired several attempts to define or explain routing in Elm, with varying degrees of success, mostly failing.
  • Routing must be a pure function, since it’s not in the update function of our Elm App, it can not be a side effect
  • Knowing that, the url coming in from the browser’s API is going to always be a string, then think, what kind of data do we want the route function to return to us? HTML?
  • Here in lies my struggle. I know the input, but have not expressly figured out what the output needs to be. You can get this sense by my attempts to explain the route type signature several times in the previous episode.
  • Use the Url parser and map
  • We need a couple things

    • Location is a record
    • Extract Route
    • a function that take the type Location and returns a Type of Route
    • case (Url.parsePath matchRoute location) of
    • parsePath takes matchRoute and that function takes a Location and returns us a glorious Route
    • Match Route
    • Need to Figure out this case statement
    • matchRoute takes a function as it’s argument, but location is not a function ?
extractRoute : Location -> Route
extractRoute location =
        _ =
            Debug.log "location" location
        case (Url.parsePath matchRoute location) of
            Just route ->

            Nothing ->

matchRoute : Parser (Route -> a) a
matchRoute =
        [ Url.map Home Url.top
        , Url.map NewNote (s "notes" </> s "new")
        , Url.map Note (s "notes" </> Url.int)
  • So Parser takes a function. and Returns the same type that the function you gave it takes.

    • Upgraded our program to a Navigation Program
    • Function extractRoute takes a type Location and returns a Route
    • (Url.parsePath matchRoute location)
    • oneOf takes parsePath route location and in that sense we have the above
    • This is where I fall down on my Type signatures. And it’s frustrating.
  • OK we got it working but it’s not doing changes on URL. At first I thought it was because maybe React is holding onto the ref assignment, which turns out that’s exactly what it’s doing, (which we told it to by ‘should update’ false). But the answer is simpler than that. We having told our Elm app to do anything or take any action when the URL is updated. :man_facepalming:. So sometimes the simplest answer is the best answer.


  • Procrastination

    1. Updated Windows to Fall service pack whatever. Forcing me to restart my machine
    2. That updated Chrome. Updated Typora (again) and Git for windows
    3. Only a few tweaks to Hyper.js my Terminal
    4. Update to VSCode’s monthly version
    5. And react / react-dom from 16.2 - 16.5 :grinning:
  • Elm-conf



Published 20 Sep 2018

A show about learning Elm, Functional Programing, and generally leveling up as a JS developer.
JavaScript To Elm on Twitter