DEV Community: Tonis Anton

JavaScript router in 60 lines

Tonis Anton — Tue, 23 Nov 2021 16:41:50 +0000

I was building a web application for myself and as NPM packages and JS frameworks are getting bigger and more complicated, I decided not to install some JS framework, and build the app from scratch this time.

Creating a new web-app requires Router to handle the page changes, and this is my attempt on creating one.

So what does router really do for the web application.

The app should be able to read what URL is open and show the required content, so for example, I open a page www.mybook.com/user/1, the page should render the user 1, information.
The page should listen to URL changes, so when I click a button or an image, that redirects the user to www.mybook.com/post/my-latest-news the page will not refresh, but instead removes the old content, and renders the new required content. This way of rendering content is usually called single page application or SPA.
The page should have URL history memory, so when I press back or forward buttons in the browser, the application should know what pages to show.
I would like the router to have a possibility to define routes and fire some action, when the user lands on that route.

For example

router.on("/post/my-latest-news", (params) => {
  // In here, I remove old content and render new one 
})

I would also like the router to accept parameters in the URL.

For example, "/post/:id" would give me the id value as a parameter when deciding which post to show.

That's the basic of it, I think.

For listening to listening for route change, I will use the popstate listener API.

And for URL history, I am going to use browser History API

JavaScript Implementation

You can find the code for this router on Github

class Router {
    constructor() {
        this.routes = new Map();
        this.current = [];

        // Listen to the route changes, and fire routeUpdate when route change happens.
        window.onpopstate = this.routeUpdate.bind(this);
    }

    // Returns the path in an array, for example URL "/blog/post/1" , will be returned as ["blog", "post", "1"]
    get path() {
        return window.location.pathname.split('/').filter((x) => x != '');
    }

    // Returns the pages query parameters as an object, for example "/post/?id=2" will return { id:2 } 
    get query() {
        return Object.fromEntries(new URLSearchParams(window.location.search));
    }

    routeUpdate() {
        // Get path as an array and query parameters as an object
        const path = this.path;
        const query = this.query;

        // When URL has no path, fire the action under "/" listener and return 
        if (path.length == 0) {
            this.routes.get('/')(path);
            return;
        }

        // When same route is already active, don't render it again, may cause harmful loops.
        if (this.current.join() === path.join()) return;

        // Set active value of current page
        this.current = path;

        // Here I save the parameters of the URL, for example "/post/:page", will save value of page
        let parameters = {};

        // Loop though the saved route callbacks, and find the correct action for currect URL change
        for (let [route, callback] of this.routes) {

            // Split the route action name into array
            const routes = route.split('/').filter((x) => x != '');
            const matches = routes
                .map((url, index) => {
                    // When the route accepts value as wildcard accept any value
                    if (url == '*') return true;

                    // Route has a parameter value, because it uses : lets get that value from the URL
                    if (url.includes(':')) {
                        parameters[url.split(':')[1]] = path[index];
                        return true;
                    }
                    // The new URL matches the saved route callback url, return true, meaning the action should be activated.
                    if (url == path[index]) return true;
                    return false;
                })
                .filter((x) => x);

            // When the router has found that current URL, is matching the saved route name, fire the callback action with parameters included 
            if (matches.length == routes.length && routes.length > 0) {
                callback({ path, parameters, query });
            }
        }
    }

    // Listen for route changes, required route name and the callback function, when route matches.
    on(route, callback) {
        this.routes.set(route, callback);
    }

    // Fire this function when you want to change page, for example router.change("/user/1")
    // It will also save the route change to history api.
    change(route) {
        window.history.pushState({ action: 'changeRoute' }, null, route);
        window.dispatchEvent(new Event('popstate'));
    }
}

export default new Router();

Using the router

PS!

You should also, add <base href="/"> in the header of your HTML file, so the front-end router, will always start the URL path from the start, and will not keep appending to the URL.

First, we import the Router

I am going to use ES6 native modules import, it's very easy and is supported by most browsers already.

import Router from '/libraries/router.js';

You can export router class from the file as new directly, or you could just do something like this

window.router = new Router()

PS!

My personal preference is to create the page as webcomponent or lit.js and then just swap the components when route is active.


Router.on('/home', (event) => {
    // Replace and render page content here
});


Router.on('/post/:id', (event) => {
    // Replace and render page content here
    // You can get parameter with, event.parameters.id
});

Change routes

To change routes, you should use code below, because it will also store the URL change in browser history this way.

Router.change("/account")

Backend setup

When creating the SPA app on web, you should be aware of an error what might happen.

When trying to load the page for a URL, for example www.mybook.com/user/1, the backend usually sends 404 error, page not found.

That happens, because backend has not defined a route for /user/1, the route finding for it, should happen on front-end side.

For fixing that, I redirect the 404 route on backend to index.html file or whatever one you are using.

So instead of backend sending route not found, it will send the SPA app main file, and then the SPA app router will render the correct page, because it has the information about the routes.

Tools to use for back-end proxy

For debugging locally, I am using Node.js and http-server

This console command, will run the http-server on current folder and will redirect all failed requests to main index.html and then JS router will take over.

http-server -p 8080 . --proxy http://localhost:8080?

For production, I am using Caddy as my backend proxy.
So here's a code-example how I send all 404 request to index.html in Caddy.

The try_files part, is where the failed routes are redirected.

https://www.mybook.com {
    root * /srv/www/mybook
    try_files {path} /index.html    
    encode zstd gzip
    file_server
}

Making quick blog with modern ES6

Tonis Anton — Thu, 04 Apr 2019 07:57:53 +0000

Browser engines have evolved enormously and i want to share some ideas how to quickly build a JavaScript Single Page Application,
using cool browser features like

Async functions
Custom elements V1
ES6 Modules

This will be a very basic project, it will take maybe 15 minutes to get running and we wont need to install any node_modules just write the code and boom it's ready.

You can view the live result here and check the full code here

For developing you should use a server for serving your index.html, you can use whatever you like, for example with node.js you can use http-server

Okay so lets start

Basic setup

First lets create some base files, we need index.html for sure, so let's start with that.

In your project folder create a new file called index.html

And add some content to it

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My blog</title>
    <link rel="stylesheet" href="Application/styles/index.css">
</head>
<body>
   <div id="root"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
<script type="module" src="Application/App.js"></script>
</html>

We have some basic stuff in it like, title, stylesheet, root, and our script tag, i have also included webcomponents-lite.js as a polyfill to increase the browser support for webcomponents, cause they still lack support on some browsers.

Lets focus on the script tag, we have type=module there, we need to use it if we want to activate ES6 modules support in our JS file, so dont forget it.

<script type="module" src="Application/App.js"></script>

Next lets create our folder structure.

Lets make it like this

Application
- components
- modules
- styles
- App.js

Good lets now move on to writing JavaScript

JavaScript files setup

Our Application starts from App.js so let's create this first.

Copy all this to your App.js

import Router from "https://unpkg.com/navigo@6.0.2/src/index.js";
import { HTML } from "https://unpkg.com/kelbas";

const router = new Router();

router.on("/", () => {
  const element = HTML`<h2>Hello</h2>`;
  document.querySelector("#root").replaceWith(element);
});

router.on("/post/:id", params => {});
router.resolve();

Currently when we open our Application we should see Hello

I will explain a bit what our imported libraries do.

For the Router we will be using navigo, it's a very light weight awesome routing library for the browsers.

Then we have the HTML library and that's created by myself, it extends on the idea of using ES6 template strings to create HTML elements.

Next in our components folder lets create 3 files home.js , post.js and index.js

So our components folder looks like this

components
- home.js
- index.js
- post.js

In our index.js lets just export the other 2 files, so we could easily import all our components later.

index.js

export { default as home } from "./home.js"
export { default as post } from "./post.js"

Before we can start building our pages we will add one more thing.

In our modules folder, lets create a file called Element.js

Application
- modules
  - Element.js

Our Element.js will be a wrapper for native HTMLElement, i would recommend using a simple wrapper so we supercharge our development with Custom elements

In the newly created Element.js add

Element.js

export default class Element extends HTMLElement {

    //Element is connected
    async connectedCallback() {
        this.install.apply(this)

        this.beforeRender()
        const element = await this.render()
        this.appendChild(element)

        this.installed()
    }

    //Element is removed
    disconnectedCallback() {
        this.uninstall()
    }

    //Update element
    async update() {
        const element = await this.render()
        this.beforeUpdate()
        this.lastChild.replaceWith(element)
        this.afterUpdate()
    }


    //You can use these function to run your functions between component state changes, like with react.js
    install() { }

    installed() { }

    uninstall() { }

    beforeUpdate() { }

    afterUpdate() { }

    beforeRender() { }
}

Creating Web-component pages

Now we have our project fully setup and we can start implementing pages, as this is meant as a short tutorial i will be using JSON-Placeholder for my data.

We can pull posts in by just calling

fetch('https://jsonplaceholder.typicode.com/posts/')
  .then(response => response.json())

Lets add some JavaScript to our /components/home.js

home.js

import { HTML } from "https://unpkg.com/kelbas"
import Element from "../modules/Element.js"


export default class Home extends Element {
    async getPosts() {
       return await fetch("https://jsonplaceholder.typicode.com/posts").then(res => res.json())
    }

    open(id) {
        this.router.navigate(`/post/${id}`)
    }

    async render() {
        const posts = await this.getPosts()
        return HTML`<section id="posts-container">
                        ${posts.map((post) => {
                            return HTML`<div class="post" onclick=${this.open.bind(this, post.id)}>
                                                <h3 class="post-title">${post.title}</h3>
                                                <p class="post-body">${post.body}</p>
                                        </div>`
                         })}
                    </section>`
    }
}

First we add our required libraries, we import the Element.js that we created before and also the HTML parser that i talked about earlier.

If you have developed with React.js then this could seem quite familiar, which is awesome in my opinion, cause we dont need to bundle JSX to render this and it basically has the same API.

We have an async function to pull the data,
then in the render function first we wait for the data and then show the data retrieved, very simple.
We could easily add a Loading... indicator here but i pass it this time for keeping things simple.

There is also the function open, just add it currently, we will implement this.router later in the App.js

Next lets add some JavaScript to our /components/post.js

post.js

import { HTML } from "https://unpkg.com/kelbas"
import Element from "../modules/Element.js"


export default class Post extends Element {
    async getPost() {
       return await fetch(`https://jsonplaceholder.typicode.com/posts/${this.post}`).then(res => res.json())
    }

    async render() {
        const {title, body} = await this.getPost()

        return HTML`<section id="post-container">
                        <h2>${title}</h2>
                        <p>${body}</p>
                    </section>`
    }
}

This is basically the same as home.js but it will load a single post data, notice the this.post value in getPost function, we will add this as an id in the router at App.js

Now lets go back to our App.js, we will implement our newly created components and update the routes

Copy all of this into your App.js

App.js


import Router from "https://unpkg.com/navigo@6.0.2/src/index.js";
import { HTML } from "https://unpkg.com/kelbas";

const router = new Router();

import * as component from "./components/index.js";

for (let key in component) {
  component[key].prototype.router = router;
  customElements.define(`${key}-element`, component[key]);
}

router.on("/", () => {
  const element = HTML`<home-element id="root"></home-element>`;
  document.querySelector("#root").replaceWith(element);
});

router.on("/post/:id", params => {
  const element = HTML`<post-element id="root"></post-element>`;
        element.post = params.id
  document.querySelector("#root").replaceWith(element);
});

router.resolve();

First we import all our components from /Application/components/index.js

Then we attach our router to all our components so we could easily change routes from inside the component
and we also define the customElements as file-name + element so our home.js becomes home-element in custom-elemets registry.

After defining the customElements you can attach <home-element></home-element> to your index.html and it will work, how cool is that.

We also updated our routes, whats happening there is that when route is fired, we will create our HTML customElement that we imported and then defined before.

Then we will use replaceWith on our <div id="root"></div> element in index.html.

Also make sure to give your elements something to be identified with like id or key, so we can find the element that we want to replace each time route changes, thats why home-element and post-element have id=root also.

And now the final part add, lets add our designs.

Add styles

In your styles folder at

Application
- styles

Lets add index.css and fill it with some simple css

index.css

@import "https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css";

body {
  width: 60%;
  margin: 0 auto;
  background: #e67e22;
}
#posts-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 20px;
  margin: 50px 0;
}

#posts-container .post {
  background: #ecf0f1;
  padding: 10px 15px;
  cursor: pointer;
}

#post-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 20px;
  margin-top:50px;
}

#post-container h2 {
  color: #ecf0f1;
}

#post-container p {
  color: #ecf0f1;
  background: #d35400;
  padding: 20px;
}

If you got in trouble you can check the full-code here

I hope my tutorial was helpful and give your thoughts about it in the comments.