32: Elm Routing, the basics - JSToElm
All Episodes

32: Elm Routing, the basics

As I'm looking at the ways that I can get tackle having Elm over take our React app, I'm a bit stumped by routing. For review, we've got an onClick event in our list of notes in the 'Home' module that should take use from the root of our application '/', to notes with at unique noteId in the url like '/notes/:noteId' this let's us grab that id from the route and fetch the details of that particular note. We're not leveraging react router dom, which is what I've relied on for a long time now. So, how does this work ?

Routing Elm SPA’s

For some reason, this general goal is called “Single Page Apps” or SPAs in the JavaScript world. It is odd in that the essence is that you want to manage multiple pages intelligently, and maybe “asset management” would have been clearer, but that ship has sailed.

The core functionality is the ability to “navigate” to new URLs, changing the address bar of the browser without the browser kicking off a request to your servers. Instead, you manage the changes yourself in Elm.

  • Handling Routing in Elm

    • First and foremost, NO HASHES
    • Will need to be a navigation program, that will handle the initial incoming Route with the app it instantiated.

  • Gonna need some helpful libraries

    1. Elm Navigation

      1. Install elm-lang/navigation
      2. Came out recently with 0.17 release
      3. program function from Navigation package is defined as:
      4. This sets up our Elm app to get updates when the url or location changes. 
program : (Location -> msg) ->
          { init : Location -> (model, Cmd msg)
          , update : msg -> model -> (model, Cmd msg)
          , subscriptions: model -> Sub msg
          , view : model -> Html msg
} -> Program Never model msg

3 ideas of routing

  1. Url determines the model
  2. Model determines the Url
  3. Keep model state and URL in sync at all times.

Pretty sure we want the 3rd one. We want to fetch the data, and when’s it’s successfully back we want to render that particular view to the app

Process

  • elm-package install elm-lang/navigation -y we’ll start with a #hash routing system for simplicity and then grow it from there.

  • import Navigation Update the program to be a navigation program that will take the inital and UrlChange which is a type of Msg

main : Program Never Model Msg
main =
    Navigation.program UrlChange
        { view = view
        , init = init
        , update = update
        , subscriptions = always Sub.none
        }
  • This means that our init will need to be updated. For now let’s give it a hard coded url
init : Navigation.Location -> ( Model, Cmd Msg )
init location =
    ( { route = Home }, Cmd.none )
  • So now we need a type on our Msg UrlChange in our update function. This will be where we want to match on the location.hash. And update the model.route value based on that. with of course default, meaning no match, to Home.
case msg of
        UrlChange location ->
            case location.hash of
  • With this in place we should be able to handle changes to the incoming url navigation as long as it’s a hash # Let’s render a list of items as our nav menu
menu =
    ul [] (List.map viewLinks [ "home", "about", "contact", "Bob" ])

  • Each viewLink will just be an ‘a’ tag with the corresponding href

  • Routing practice

  • Figure out if rendering a react component in Elm is a good idea or not?

Resources

Follow

Published 12 Apr 2018

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