A Naive Routing

#html #javascript

Warning: This page includes interactive examples. If you hate having fun, please close the tab immediately.

I really love Vue.js, I really do. But sometimes, I just want to use the good old HTML tags alone with little to no JavaScript. Simplicity is best heard when there is chaos around. So, long story short, I am forcing myself for little projects to use Flask and its little brother Quart, so that I can take a break from the things I got used to and discover some new patterns. And I’ve decided to make a music player with it.

But as you may already see, there is a problem with the tools I’ve chosen. Building a music player with Flask is not a problem, but without the routing, the media playback gets interrupted when the user navigates to another page. So, on a page change, we need to control what is changing on the page and what is not. That’s today’s problem, at least for me, before coffee and breakfast.

My intuition says that I need to create a custom tag for the HTML, which will be the container for the dynamic content. All other elements besides this tag will be static. And then, when the user clicks on a link, we will take the target URL, fetch the HTML content, and load them inside the custom tag. This way, we will keep the music player alive while the user can navigate to other pages. Let’s call it <router-view></router-view> like Vue.js and see how my Bauchgefühl works out in the end.

<router-view></router-view>

Now, let’s create a simple link with a click event that will trigger the fetching and loading of the content. The href attribute will hold the target URL as usual, and the onclick attribute will call the JavaScript function that we will define in a moment.

<a href="/assets/html/example.html" onclick="to(this)">Example page</a>

And here is the JavaScript function that will handle the fetching and loading of the content. The function will prevent the default behavior of the link, get the URL, fetch the content of the target URL, and load it inside the <router-view></router-view> tag.

async function to(el){
    event.preventDefault();
    const route = el.getAttribute('to');
    const html = await fetch(route).then(res => res.text());
    document.querySelector('router-view').innerHTML = html;
}

Want to see it in action?

What’s next? One thing that we can do is to use this in a Flask application and achieve something similar to server-side rendering. However, the idea is the same and I’m sure you can come up with a better solution. This is just a naive routing example that I wanted to share with you. I hope you enjoyed it as much as I did.

Tell no one but I’m actually using this in my music player project. I’m not proud of it, but it works. And that’s what matters in the end, right?