Hajime, the duck guy

Introduction

In this exercise, you will implement simple client-side routing using the hashchange event. This is a useful pattern for SPA (single-page applications) that does not integrate with SSR (server-side rendering).

Skills you will acquire

• Client-side routing
• Working with events
• Serializing and deserializing state

Materials

• The HTML page you will work on

Objective

Implement client-side routing that maps hashes to various sections of the page. The routing should allow you to:

• Hide or reveal different parts of the page based on the hash (fragment identifier)
• Use the back button in the browser to return to the previous state
• Go to a specific state by pasting an URL in the address bar
• Perform initialization when a section is revealed
• Perform cleanup with a section is hidden

The page you will be working on is provided in the materials section.

Check your solution

• One of the section is shown by default when the page loads with no fragment identifier
• Only one section is shown at any given moment
• There is a navigation menu that lets you switch between sections
• The link matching the currently shown section should be marked as active
• When a section is revealed, a message should be logged in the console
• When a section is hidden, a message should be logged in the console
• You are able to change the mapping between the fragment identifier and sections freely without touching the section code
• Title of the page changes when the route changes

Keep in mind

The page already includes a <script> tag that lets you include a JavaScript file in the page.

Routing means deciding what code path(s) to execute based on the "route". The route is some kind of identifier — some piece of text — that the client specified (e.g., URL in the address bar, or, in our case, a fragment identifier, a.k.a. hash).

Although the format of the identifier may be restricted by the platform — there are rules about what URLs and fragment identifiers can contain — how we interpret the identifier is up to use. We can represent as much or as little data with them as we like. In other words, we might need some translation between what's in the raw hash text and what we want our application to know based on that text.

For instance, a fragment identifier can be used to simply identify a part of a HTML page to jump to:

#main

We can also store JSON data in the fragment identifier:

#{"route":"main"}

However, the above example is not a valid hash, so some characters must be replaced (URI-encoded) by sequences that can later be converted back (URI-decoded) into their original form:

#%7B%22route%22%3A%22main%22%7D

Or use URL-encoded form data:

#route=main

By default, the browser will want to jump to any element on the page that has an id attribute matching the fragment identifier. Although the first option seems like the simplest solution, you should keep in mind that it is more likely to trigger this behavior unintentionally. Try different options to see which ones work the best.

To implement a router, there are two parts that we care about:

• The exact timing of the route change
• The contents of the hash

The timing of the route change is provided to us by two things:

• Page load (this is the starting point which also needs to be handled)
• The hashchange event (this is fired every time the hash changes)

We will use the term 'routing event' to refer to both of those situations. The code that handles all the routing events will be called the 'router', and the code that implements the behavior of the specific route will be called 'route handler'.

The raw content of the hash is provided via the location.hash property.

We have a two options for handling route events. We can either have the router invoke the individual route handlers, or we can have the router relay the routing event so that route handlers can handle it themselves.

The first option is implemented simply by having the router call the appropriate handler function.

The second option can be implemented by using a custom event bus (e.g., by using an EventTarget object). The route handlers would subscribe to the events on this custom bus, while the router emits events on the bus.

When switching between routes, we usually need to do some setup. For example, fetch some data, or prepare the UI in some way. When moving away from a route, we may also want to do some clean-up. Reset UI state, for example, or empty cached data. In this example, you will log messages to the console in addition to toggling appropriate sections on and off. Feel free to experiment with other things you can do when setting or cleaning up the sections.

This exercise deliberately does not use any CSS. Toggling the sections on and off can be done without it. For example, we can use the hidden attribute to turn sections on and off. Consider the initial state of each section so that the correct one can be revealed regardless of what the initial route (i.e., the initial value of the hash) is when page loads.

Reading list

• Location: hash property (MDN)
• Window: hashchange event (MDN)
• decodeURIComponent() (MDN)
• encodeURIComponent() (MDN)
• Percent encoding (Wikipedia)
• EventTarget (MDN)
• hidden attribute (MDN)

Hints & spoilers

var data = JSON.parse(decodeURIComponent(location.hash).slice(1) || '{}'))

var data = {route: 'main'}
var hash = '#' + encodeURIComponent(JSON.stringify(data))

var data = new URLSearchParams(location.hash.slice(1))

var data = new URLSearchParams()
data.set('route', 'main')
var hash = '#' + data.toString()

function onRouteChange() {
    var targetRoute = 'main' /* obtain target route from location.hash */
    switch (targetRoute) {
        case 'main':
            setupMain()
            break
        case 'about':
            setupAbout()
            break
        // ....
    }
}

var routeHandlers = {
    main: setupMain,
    about: setupAbout,
    // etc...
}

function onRouteChange() {
    var targetRoute = 'main' /* obtain target route from location.hash */
    var handler = routeHandlers[targetRoute]
    handler()
}

var routeHandlers = {
    // etc...
}
var cleanup

function onRouteChange() {
    if (cleanup) cleanup()
    var targetRoute = 'main' /* obtain target route from location.hash */
    var handler = routeHandlers[targetRoute]
    cleanup = handler()
}

var bus = new EventTarget()

function onRouteChange() {
    var targetRoute = 'main' /* obtain target route from location.hash */
    bus.dispatchEvent(new Event('route:' + targetEvent))
}

bus.addEventListener('route:main', setupMain)
bus.addEventListener('route:about', setupAbout)
// etc...

var bus = new EventTarget()

function onRouteChange() {
    bus.dispatchEvent(new Event('cleanup'))
    var targetRoute = 'main' /* obtain target route from location.hash */
    bus.dispatchEvent(new Event('route:' + targetEvent))
}

bus.addEventListener('route:main', function (ev) {
    ev.target.addEventListener('cleanup', cleanupMain, {once: true})
    // do the setup
})
// etc...