32: Elm Routing

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'

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

Elm Navigation

Install elm-lang/navigation Came out recently with 0.17 release program function from Navigation package is defined as: 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 Url determines the model Model determines the Url 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 Elm lang Docs Navigation url-parser elm-lang/navigation SPA Functional Routing SPA Simple Elmseeds spa navigation Choosing Elm SPA Route Arch JSTOElm Navigation Example More Elm SPA Follow

JavaScript to Elm

Twitter: @jstoelm
Email: [email protected]

Jesse Tomchak

Twitter: @jtomchak