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 = let _ = Debug.log "location" location in case (Url.parsePath matchRoute location) of Just route -> route Nothing -> NotFound matchRoute : Parser (Route -> a) a matchRoute = Url.oneOf [ 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. Picks

Procrastination

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

Elm-conf

Resources Functional Routes Haskell Elm routing example type safe routing Follow

JavaScript to Elm

Twitter: @jstoelm
Email: [email protected]

Jesse Tomchak

Twitter: @jtomchak