Pure in-app navigation implemented in Elm (URL become a thin wrapper instead)

<p>In the usual Elm app the URL is the source of truth. To go somewhere, <code>update</code> writes the URL, and the app only moves when the URL comes back as <code>UrlChanged</code>. This works, but after a while I found three problems with it, so I tried the other way around: the model owns where the app is, and the URL just follows it. I am writing it down in case I forget, or in case someone else finds it useful.</p> <p>You can see the sample code here: <a href="https://github.com/rinn7e/elm-navigation-project" rel="noopener noreferrer">https://github.com/rinn7e/elm-navigation-project</a></p> <p>It has the same small blog three times (a list of posts, a post, an about page, a login page, and a page to write a new post that only signed-in users can open):</p> <ul> <li> <code>elm-blog</code>: the usual way, as in <a href="https://github.com/rtfeldman/elm-spa-example" rel="noopener noreferrer">elm-spa-example</a> </li> <li> <code>elm-blog-url-wrapper</code>: the thin URL wrapper</li> <li> <code>elm-blog-url-wrapper-screen-naming</code>: the same as the second one, with other names</li> </ul> <p>The test account is <code>test</code> / <code>testtest</code>.</p> <h2>

Requirement

</h2> <p>This post aims for those who are already familiar with Elm and <code>Browser.application</code>.</p> <p>Every tool is a local dev dependency (Elm, elm-format, Vite with <code>vite-plugin-elm</code>, Tailwind v4), so in each app folder this is enough:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install </span>npm run dev </code></pre> </div> <h2>

The usual way

</h2> <p>Here are the branches of <code>update</code> in <code>elm-blog</code> that write the URL:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight elm"><code><span class="n">update</span> <span class="p">:</span> <span class="kt">Msg</span> <span class="o">-&gt;</span> <span class="kt">Model</span> <span class="o">-&gt;</span> <span class="p">(</span> <span class="kt">Model</span><span class="o">,</span> <span class="kt">Cmd</span> <span class="kt">Msg</span> <span class="p">)</span> <span class="n">update</span> <span class="n">msg</span> <span class="n">model</span> <span class="o">=</span> <span class="k">case</span> <span class="p">(</span> <span class="n">msg</span><span class="o">,</span> <span class="n">model</span><span class="o">.</span><span class="n">page</span> <span class="p">)</span> <span class="k">of</span> <span class="p">(</span> <span class="kt">LinkClicked</span> <span class="n">urlRequest</span><span class="o">,</span> <span class="n">_</span> <span class="p">)</span> <span class="o">-&gt;</span> <span class="k">case</span> <span class="n">urlRequest</span> <span class="k">of</span> <span class="kt">Browser</span><span class="o">.</span><span class="kt">Internal</span> <span class="n">url</span> <span class="o">-&gt;</span> <span class="p">(</span> <span class="n">model</span><span class="o">,</span> <span class="kt">Nav</span><span class="o">.</span><span class="n">pushUrl</span> <span class="n">model</span><span class="o">.</span><span class="n">key</span> <span class="p">(</span><span class="kt">Url</span><span class="o">.</span><span class="n">toString</span> <span class="n">url</span><span class="p">)</span> <span class="p">)</span>

textCopy
            <span class="kt">Browser</span><span class="o">.</span><span class="kt">External</span> <span class="n">href</span> <span class="o">-&gt;</span>
                <span class="p">(</span> <span class="n">model</span><span class="o">,</span> <span class="kt">Nav</span><span class="o">.</span><span class="n">load</span> <span class="n">href</span> <span class="p">)</span>

    <span class="p">(</span> <span class="kt">UrlChanged</span> <span class="n">url</span><span class="o">,</span> <span class="n">_</span> <span class="p">)</span> <span class="o">-&gt;</span>
        <span class="n">changeRouteTo</span> <span class="p">(</span><span class="kt">Route</span><span class="o">.</span><span class="n">fromUrl</span> <span class="n">url</span><span class="p">)</span> <span class="n">model</span>

    <span class="p">(</span> <span class="kt">ClickedLogout</span><span class="o">,</span> <span class="n">_</span> <span class="p">)</span> <span class="o">-&gt;</span>
        <span class="p">(</span> <span class="p">{</span> <span class="n">model</span> <span class="o">|</span> <span class="n">user</span> <span class="o">=</span> <span class="kt">Nothing</span> <span class="p">}</span>
        <span class="o">,</span> <span class="kt">Cmd</span><span class="o">.</span><span class="n">batch</span> <span class="p">[</span> <span class="n">storeUser</span> <span class="kt">Nothing</span><span class="o">,</span> <span class="kt">Route</span><span class="o">.</span><span class="n">replaceUrl</span> <span class="n">model</span><span class="o">.</span><span class="n">key</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">Home</span> <span class="p">]</span>
        <span class="p">)</span>

    <span class="p">(</span> <span class="kt">GotLoginMsg</span> <span class="n">subMsg</span><span class="o">,</span> <span class="kt">Login</span> <span class="n">login</span> <span class="p">)</span> <span class="o">-&gt;</span>
        <span class="k">case</span> <span class="kt">Login</span><span class="o">.</span><span class="n">update</span> <span class="n">subMsg</span> <span class="n">login</span> <span class="k">of</span>
            <span class="p">(</span> <span class="n">_</span><span class="o">,</span> <span class="kt">Just</span> <span class="n">user</span> <span class="p">)</span> <span class="o">-&gt;</span>
                <span class="p">(</span> <span class="p">{</span> <span class="n">model</span> <span class="o">|</span> <span class="n">user</span> <span class="o">=</span> <span class="kt">Just</span> <span class="n">user</span> <span class="p">}</span>
                <span class="o">,</span> <span class="kt">Cmd</span><span class="o">.</span><span class="n">batch</span> <span class="p">[</span> <span class="n">storeUser</span> <span class="p">(</span><span class="kt">Just</span> <span class="n">user</span><span class="p">)</span><span class="o">,</span> <span class="kt">Route</span><span class="o">.</span><span class="n">replaceUrl</span> <span class="n">model</span><span class="o">.</span><span class="n">key</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">Home</span> <span class="p">]</span>
                <span class="p">)</span>

    <span class="c1">-- ...</span>

</code></pre>

</div> <p>And the guard lives in <code>changeRouteTo</code>, where the URL comes back:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight elm"><code> <span class="kt">Just</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">NewPost</span> <span class="o">-&gt;</span> <span class="k">if</span> <span class="n">model</span><span class="o">.</span><span class="n">user</span> <span class="o">==</span> <span class="kt">Nothing</span> <span class="k">then</span> <span class="p">(</span> <span class="n">model</span><span class="o">,</span> <span class="kt">Route</span><span class="o">.</span><span class="n">replaceUrl</span> <span class="n">model</span><span class="o">.</span><span class="n">key</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">Login</span> <span class="p">)</span>

textCopy
        <span class="k">else</span>
            <span class="p">(</span> <span class="p">{</span> <span class="n">model</span> <span class="o">|</span> <span class="n">page</span> <span class="o">=</span> <span class="kt">NewPost</span> <span class="kt">NewPost</span><span class="o">.</span><span class="n">init</span> <span class="p">}</span><span class="o">,</span> <span class="kt">Cmd</span><span class="o">.</span><span class="n">none</span> <span class="p">)</span>

</code></pre>

</div> <p>The problems with this are:</p> <ol> <li> <strong>Navigation is spread over <code>update</code>.</strong> Every branch that wants to move the app has to write the URL itself. A new branch that forgets it leaves the URL showing something other than the screen.</li> <li> <strong>The echo.</strong> Everything the app writes comes back as <code>UrlChanged</code>, so one move is two updates: one that writes the URL, and one that really changes the page. I wrote about this before in <a href="https://dev.to/rinn7e/solving-elm-router-double-update-problem-dde">Solving Elm Router "Double Update" Problem</a>, where I needed an <code>isInternal</code> flag to ignore it. With a guard it is even more: a guest clicking "Write" is three messages and two URL writes (<code>LinkClicked</code>, push <code>/new</code>, <code>UrlChanged /new</code>, replace <code>/login</code>, <code>UrlChanged /login</code>).</li> <li> <strong>The sync.</strong> Between the write and the echo, the model and the URL do not agree. Right after a login, <code>model.user</code> is set but the page is still the login page until <code>UrlChanged</code> arrives.</li> </ol> <h2>

The idea

</h2> <p>The URL is not state. It shows where the app is, the same way the view shows what the app holds, so it can be written from the model too:</p> <ul> <li>The model owns where the app is (the destination). <code>update</code> never touches the URL.</li> <li>One wrapper around the root <code>update</code> writes the URL after every step, from the destination read from the model. A change of destination pushes an entry, the same destination writes nothing.</li> <li>The URL is never the source of truth: it is only parsed into a move at boot, on back / forward, and when a link is clicked (Elm hands links to us as URLs). The guard runs on every move, and when it redirects, the URL is corrected with a replace.</li> <li>Only one module (<code>Route</code>) knows how a destination is spelled as a URL.</li> </ul> <h2>

The thin URL wrapper

</h2> <p>The <code>Route</code> module and the pages do not change at all. Everything below is in <code>Main.elm</code> of <code>elm-blog-url-wrapper</code>.</p> <h3>

1. The destination is read, not stored

</h3> <p>The page in the model already says where the app is, so the destination is not stored a second time. It is read from the page:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight elm"><code><span class="n">destinationOf</span> <span class="p">:</span> <span class="kt">Model</span> <span class="o">-&gt;</span> <span class="kt">Maybe</span> <span class="kt">Route</span> <span class="n">destinationOf</span> <span class="n">model</span> <span class="o">=</span> <span class="k">case</span> <span class="n">model</span><span class="o">.</span><span class="n">page</span> <span class="k">of</span> <span class="kt">NotFound</span> <span class="o">-&gt;</span> <span class="kt">Nothing</span>

textCopy
    <span class="kt">Home</span> <span class="o">-&gt;</span>
        <span class="kt">Just</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">Home</span>

    <span class="kt">Post</span> <span class="n">slug</span> <span class="o">-&gt;</span>
        <span class="kt">Just</span> <span class="p">(</span><span class="kt">Route</span><span class="o">.</span><span class="kt">Post</span> <span class="n">slug</span><span class="p">)</span>

    <span class="kt">About</span> <span class="o">-&gt;</span>
        <span class="kt">Just</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">About</span>

    <span class="kt">Login</span> <span class="n">_</span> <span class="o">-&gt;</span>
        <span class="kt">Just</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">Login</span>

    <span class="kt">NewPost</span> <span class="n">_</span> <span class="o">-&gt;</span>
        <span class="kt">Just</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">NewPost</span>

</code></pre>

</div> <p>In a bigger app each part of the model keeps its own piece (the screen shown, an open dialog, a tab) and <code>destinationOf</code> puts them together.</p> <h3>

2. Navigating is a model change

</h3> <p>A move goes through the guard, and the destination shown already is dropped. It returns a <code>Model</code>, there is no <code>Cmd</code>:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight elm"><code><span class="n">navigate</span> <span class="p">:</span> <span class="kt">Maybe</span> <span class="kt">Route</span> <span class="o">-&gt;</span> <span class="kt">Model</span> <span class="o">-&gt;</span> <span class="kt">Model</span> <span class="n">navigate</span> <span class="n">maybeRoute</span> <span class="n">model</span> <span class="o">=</span> <span class="k">let</span> <span class="n">destination</span> <span class="o">=</span> <span class="n">guard</span> <span class="n">model</span> <span class="n">maybeRoute</span> <span class="k">in</span> <span class="k">if</span> <span class="n">destination</span> <span class="o">==</span> <span class="n">destinationOf</span> <span class="n">model</span> <span class="k">then</span> <span class="n">model</span>

textCopy
<span class="k">else</span>
    <span class="n">openPage</span> <span class="n">destination</span> <span class="n">model</span>

<span class="n">guard</span> <span class="p">:</span> <span class="kt">Model</span> <span class="o">-></span> <span class="kt">Maybe</span> <span class="kt">Route</span> <span class="o">-></span> <span class="kt">Maybe</span> <span class="kt">Route</span> <span class="n">guard</span> <span class="n">model</span> <span class="n">maybeRoute</span> <span class="o">=</span> <span class="k">case</span> <span class="n">maybeRoute</span> <span class="k">of</span> <span class="kt">Just</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">Login</span> <span class="o">-></span> <span class="k">if</span> <span class="n">model</span><span class="o">.</span><span class="n">user</span> <span class="o">/=</span> <span class="kt">Nothing</span> <span class="k">then</span> <span class="kt">Just</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">Home</span>

textCopy
        <span class="k">else</span>
            <span class="n">maybeRoute</span>

    <span class="kt">Just</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">NewPost</span> <span class="o">-&gt;</span>
        <span class="k">if</span> <span class="n">model</span><span class="o">.</span><span class="n">user</span> <span class="o">==</span> <span class="kt">Nothing</span> <span class="k">then</span>
            <span class="kt">Just</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">Login</span>

        <span class="k">else</span>
            <span class="n">maybeRoute</span>

    <span class="n">_</span> <span class="o">-&gt;</span>
        <span class="n">maybeRoute</span>

</code></pre>

</div> <p><code>openPage</code> is the old <code>changeRouteTo</code> without the guard and without the <code>Cmd</code>.</p> <p>So the branches of <code>update</code> only change the model. A login sets the user and navigates home, and nothing in <code>update</code> knows about the URL:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight elm"><code> <span class="p">(</span> <span class="kt">LinkClicked</span> <span class="n">urlRequest</span><span class="o">,</span> <span class="n">_</span> <span class="p">)</span> <span class="o">-&gt;</span> <span class="k">case</span> <span class="n">urlRequest</span> <span class="k">of</span> <span class="kt">Browser</span><span class="o">.</span><span class="kt">Internal</span> <span class="n">url</span> <span class="o">-&gt;</span> <span class="p">(</span> <span class="n">navigate</span> <span class="p">(</span><span class="kt">Route</span><span class="o">.</span><span class="n">fromUrl</span> <span class="n">url</span><span class="p">)</span> <span class="n">model</span><span class="o">,</span> <span class="kt">Cmd</span><span class="o">.</span><span class="n">none</span> <span class="p">)</span>

textCopy
            <span class="kt">Browser</span><span class="o">.</span><span class="kt">External</span> <span class="n">href</span> <span class="o">-&gt;</span>
                <span class="p">(</span> <span class="n">model</span><span class="o">,</span> <span class="kt">Nav</span><span class="o">.</span><span class="n">load</span> <span class="n">href</span> <span class="p">)</span>

    <span class="p">(</span> <span class="kt">UrlChanged</span> <span class="n">url</span><span class="o">,</span> <span class="n">_</span> <span class="p">)</span> <span class="o">-&gt;</span>
        <span class="p">(</span> <span class="n">navigate</span> <span class="p">(</span><span class="kt">Route</span><span class="o">.</span><span class="n">fromUrl</span> <span class="n">url</span><span class="p">)</span> <span class="n">model</span><span class="o">,</span> <span class="kt">Cmd</span><span class="o">.</span><span class="n">none</span> <span class="p">)</span>

    <span class="p">(</span> <span class="kt">ClickedLogout</span><span class="o">,</span> <span class="n">_</span> <span class="p">)</span> <span class="o">-&gt;</span>
        <span class="p">(</span> <span class="n">navigate</span> <span class="p">(</span><span class="kt">Just</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">Home</span><span class="p">)</span> <span class="p">{</span> <span class="n">model</span> <span class="o">|</span> <span class="n">user</span> <span class="o">=</span> <span class="kt">Nothing</span> <span class="p">}</span>
        <span class="o">,</span> <span class="n">storeUser</span> <span class="kt">Nothing</span>
        <span class="p">)</span>

    <span class="p">(</span> <span class="kt">GotLoginMsg</span> <span class="n">subMsg</span><span class="o">,</span> <span class="kt">Login</span> <span class="n">login</span> <span class="p">)</span> <span class="o">-&gt;</span>
        <span class="k">case</span> <span class="kt">Login</span><span class="o">.</span><span class="n">update</span> <span class="n">subMsg</span> <span class="n">login</span> <span class="k">of</span>
            <span class="p">(</span> <span class="n">_</span><span class="o">,</span> <span class="kt">Just</span> <span class="n">user</span> <span class="p">)</span> <span class="o">-&gt;</span>
                <span class="p">(</span> <span class="n">navigate</span> <span class="p">(</span><span class="kt">Just</span> <span class="kt">Route</span><span class="o">.</span><span class="kt">Home</span><span class="p">)</span> <span class="p">{</span> <span class="n">model</span> <span class="o">|</span> <span class="n">user</span> <span class="o">=</span> <span class="kt">Just</span> <span class="n">user</span> <span class="p">}</span>
                <span class="o">,</span> <span class="n">storeUser</span> <span class="p">(</span><span class="kt">Just</span> <span class="n">user</span><span class="p">)</span>
                <span class="p">)</span>

    <span class="c1">-- ...</span>

</code></pre>

</div> <p>Links stay <code>a</code> tags with an <code>href</code> (open in a new tab still works). Elm sends every plain click on them to <code>onUrlRequest</code>, so <code>LinkClicked</code> is just one more move: it opens the page, it does not push the URL.</p> <h3>

3. The wrapper

</h3> <p>This is the only place that writes the URL:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight elm"><code><span class="n">updateWithUrl</span> <span class="p">:</span> <span class="kt">Msg</span> <span class="o">-&gt;</span> <span class="kt">Model</span> <span class="o">-&gt;</span> <span class="p">(</span> <span class="kt">Model</span><span class="o">,</span> <span class="kt">Cmd</span> <span class="kt">Msg</span> <span class="p">)</span> <span class="n">updateWithUrl</span> <span class="n">msg</span> <span class="n">model</span> <span class="o">=</span> <span class="k">let</span> <span class="p">(</span> <span class="n">newModel</span><span class="o">,</span> <span class="n">cmd</span> <span class="p">)</span> <span class="o">=</span> <span class="n">update</span> <span class="n">msg</span> <span class="n">model</span> <span class="k">in</span> <span class="p">(</span> <span class="n">newModel</span><span class="o">,</span> <span class="kt">Cmd</span><span class="o">.</span><span class="n">batch</span> <span class="p">[</span> <span class="n">urlCmd</span> <span class="n">msg</span> <span class="n">model</span> <span class="n">newModel</span><span class="o">,</span> <span class="n">cmd</span> <span class="p">]</span> <span class="p">)</span>

<span class="n">urlCmd</span> <span class="p">:</span> <span class="kt">Msg</span> <span class="o">-></span> <span class="kt">Model</span> <span class="o">-></span> <span class="kt">Model</span> <span class="o">-></span> <span class="kt">Cmd</span> <span class="kt">Msg</span> <span class="n">urlCmd</span> <span class="n">msg</span> <span class="n">model</span> <span class="n">newModel</span> <span class="o">=</span> <span class="k">case</span> <span class="p">(</span> <span class="n">msg</span><span class="o">,</span> <span class="n">destinationOf</span> <span class="n">newModel</span> <span class="p">)</span> <span class="k">of</span> <span class="p">(</span> <span class="n">_</span><span class="o">,</span> <span class="kt">Nothing</span> <span class="p">)</span> <span class="o">-></span> <span class="c1">-- The not found page writes no URL: no link of the app leads to it</span> <span class="kt">Cmd</span><span class="o">.</span><span class="n">none</span>

textCopy
    <span class="p">(</span> <span class="kt">UrlChanged</span> <span class="n">url</span><span class="o">,</span> <span class="kt">Just</span> <span class="n">route</span> <span class="p">)</span> <span class="o">-&gt;</span>
        <span class="k">if</span> <span class="kt">Route</span><span class="o">.</span><span class="n">fromUrl</span> <span class="n">url</span> <span class="o">==</span> <span class="kt">Just</span> <span class="n">route</span> <span class="k">then</span>
            <span class="kt">Cmd</span><span class="o">.</span><span class="n">none</span>

        <span class="k">else</span>
            <span class="kt">Route</span><span class="o">.</span><span class="n">replaceUrl</span> <span class="n">newModel</span><span class="o">.</span><span class="n">key</span> <span class="n">route</span>

    <span class="p">(</span> <span class="n">_</span><span class="o">,</span> <span class="kt">Just</span> <span class="n">route</span> <span class="p">)</span> <span class="o">-&gt;</span>
        <span class="k">if</span> <span class="n">destinationOf</span> <span class="n">model</span> <span class="o">==</span> <span class="kt">Just</span> <span class="n">route</span> <span class="k">then</span>
            <span class="kt">Cmd</span><span class="o">.</span><span class="n">none</span>

        <span class="k">else</span> <span class="k">if</span> <span class="n">guard</span> <span class="n">newModel</span> <span class="p">(</span><span class="n">destinationOf</span> <span class="n">model</span><span class="p">)</span> <span class="o">/=</span> <span class="n">destinationOf</span> <span class="n">model</span> <span class="k">then</span>
            <span class="c1">-- The guard would redirect the destination before</span>
            <span class="kt">Route</span><span class="o">.</span><span class="n">replaceUrl</span> <span class="n">newModel</span><span class="o">.</span><span class="n">key</span> <span class="n">route</span>

        <span class="k">else</span>
            <span class="kt">Route</span><span class="o">.</span><span class="n">pushUrl</span> <span class="n">newModel</span><span class="o">.</span><span class="n">key</span> <span class="n">route</span>

</code></pre>

</div> <p>And it replaces <code>update</code> in the program:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight elm"><code><span class="n">main</span> <span class="p">:</span> <span class="kt">Program</span> <span class="p">(</span><span class="kt">Maybe</span> <span class="kt">String</span><span class="p">)</span> <span class="kt">Model</span> <span class="kt">Msg</span> <span class="n">main</span> <span class="o">=</span> <span class="kt">Browser</span><span class="o">.</span><span class="n">application</span> <span class="p">{</span> <span class="n">init</span> <span class="o">=</span> <span class="n">init</span> <span class="o">,</span> <span class="n">view</span> <span class="o">=</span> <span class="n">view</span> <span class="o">,</span> <span class="n">update</span> <span class="o">=</span> <span class="n">updateWithUrl</span> <span class="o">,</span> <span class="n">subscriptions</span> <span class="o">=</span> <span class="o">\</span><span class="n">_</span> <span class="o">-&gt;</span> <span class="kt">Sub</span><span class="o">.</span><span class="n">none</span> <span class="o">,</span> <span class="n">onUrlRequest</span> <span class="o">=</span> <span class="kt">LinkClicked</span> <span class="o">,</span> <span class="n">onUrlChange</span> <span class="o">=</span> <span class="kt">UrlChanged</span> <span class="p">}</span> </code></pre> </div> <p>A back or forward of the browser (<code>UrlChanged</code>) has its entry already, so it is only corrected when the guard redirected it. Every other step pushes a new destination, with one exception: when the guard would now redirect the destination you left, its entry is replaced. After a login the login page would only redirect home, so back goes to the page before the login. The same after logging out on <code>/new</code>.</p> <p>Apart from telling a back / forward from the rest, the wrapper decides from the state (the destination before and after the step), not from which branch of <code>update</code> moved the app. So it cannot be forgotten.</p> <p>The echo is still there in Elm (<code>Nav.pushUrl</code> and <code>Nav.replaceUrl</code> send <code>UrlChanged</code>), but now it is harmless: it is the destination shown, so <code>navigate</code> drops it and the wrapper writes nothing. No <code>isInternal</code> flag is needed.</p> <h3>

4. Boot

</h3> <p>At boot the URL is read once. The page is opened through the guard right away, and the URL is corrected with a replace only when the guard redirected it:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight elm"><code><span class="n">init</span> <span class="p">:</span> <span class="kt">Maybe</span> <span class="kt">String</span> <span class="o">-&gt;</span> <span class="kt">Url</span> <span class="o">-&gt;</span> <span class="kt">Nav</span><span class="o">.</span><span class="kt">Key</span> <span class="o">-&gt;</span> <span class="p">(</span> <span class="kt">Model</span><span class="o">,</span> <span class="kt">Cmd</span> <span class="kt">Msg</span> <span class="p">)</span> <span class="n">init</span> <span class="n">user</span> <span class="n">url</span> <span class="n">key</span> <span class="o">=</span> <span class="k">let</span> <span class="n">urlDestination</span> <span class="o">=</span> <span class="kt">Route</span><span class="o">.</span><span class="n">fromUrl</span> <span class="n">url</span>

textCopy
    <span class="n">bootModel</span> <span class="o">=</span>
        <span class="p">{</span> <span class="n">key</span> <span class="o">=</span> <span class="n">key</span>
        <span class="o">,</span> <span class="n">user</span> <span class="o">=</span> <span class="n">user</span>
        <span class="o">,</span> <span class="n">posts</span> <span class="o">=</span> <span class="kt">BlogPost</span><span class="o">.</span><span class="n">all</span>
        <span class="o">,</span> <span class="n">page</span> <span class="o">=</span> <span class="kt">NotFound</span>
        <span class="p">}</span>

    <span class="n">model</span> <span class="o">=</span>
        <span class="n">openPage</span> <span class="p">(</span><span class="n">guard</span> <span class="n">bootModel</span> <span class="n">urlDestination</span><span class="p">)</span> <span class="n">bootModel</span>
<span class="k">in</span>
<span class="p">(</span> <span class="n">model</span><span class="o">,</span> <span class="n">bootUrlCmd</span> <span class="n">urlDestination</span> <span class="n">model</span> <span class="p">)</span>

</code></pre>

</div> <p><code>bootUrlCmd</code> compares <code>urlDestination</code> with <code>destinationOf model</code> and calls <code>Route.replaceUrl</code> when they differ.</p> <h2>

What changed

</h2> <p>In <code>src</code>, only <code>Main.elm</code> changed from <code>elm-blog</code>. You can check with:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>git diff <span class="nt">--no-index</span> elm-blog/src elm-blog-url-wrapper/src </code></pre> </div> <ul> <li> <code>update</code> never writes the URL: each branch only changes the model.</li> <li>The guard runs on every move, before the page opens: at boot, on back / forward, and inside the app.</li> <li>A guest clicking "Write" is two messages (<code>LinkClicked</code>, and the echo of <code>/login</code>, which is dropped) and one URL write. <code>/new</code> is never written.</li> <li>Logging out from a page the guard still allows (<code>/about</code>) now pushes <code>/</code>, so back returns to that page. In <code>elm-blog</code> it replaced the entry.</li> <li>The model and the URL agree after every step. The not found page is the exception: it writes no URL, which is fine because no link of the app leads to it.</li> </ul> <h2>

Conclusion

</h2> <p>That is it. The URL becomes a thin adapter at the edges: written from the model after every step, and parsed into a move only when the browser hands one to us.</p> <p>If the naming makes it harder to follow, it is because <code>Route</code> and <code>Page</code> are names from the URL-first way. In <code>elm-blog-url-wrapper-screen-naming</code> I changed the names only: <code>Page</code> is <code>Screen</code> (what the app shows) and <code>Route</code> is <code>Destination</code> (where the app is):<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight elm"><code><span class="k">type</span> <span class="kt">Screen</span> <span class="o">=</span> <span class="kt">NotFound</span> <span class="o">|</span> <span class="kt">Home</span> <span class="o">|</span> <span class="kt">Post</span> <span class="kt">String</span> <span class="o">|</span> <span class="kt">About</span> <span class="o">|</span> <span class="kt">Login</span> <span class="kt">Login</span><span class="o">.</span><span class="kt">Model</span> <span class="o">|</span> <span class="kt">NewPost</span> <span class="kt">NewPost</span><span class="o">.</span><span class="kt">Model</span> </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight elm"><code><span class="n">destinationOf</span> <span class="p">:</span> <span class="kt">Model</span> <span class="o">-&gt;</span> <span class="kt">Maybe</span> <span class="kt">Destination</span> <span class="n">destinationOf</span> <span class="n">model</span> <span class="o">=</span> <span class="k">case</span> <span class="n">model</span><span class="o">.</span><span class="n">screen</span> <span class="k">of</span> <span class="kt">NotFound</span> <span class="o">-&gt;</span> <span class="kt">Nothing</span>

textCopy
    <span class="kt">Home</span> <span class="o">-&gt;</span>
        <span class="kt">Just</span> <span class="kt">Destination</span><span class="o">.</span><span class="kt">Home</span>

    <span class="c1">-- ...</span>

</code></pre>

</div> <p>With these names the model holds a screen, and the destination is read from it.</p> <p>I hope to hear from others if they reach the same conclusion. Feel free to ask me anything as well.</p> <p>Thanks for reading!</p>

Original source

Read the original article on dev.to