Turning MPA to SPA with Virtual DOM

Plug: I help develop Million: Virtual DOM into the future! 💥🦁✨

Motivation

Whether you use a static site generator like Eleventy, have a server rendered application with Ruby on Rails, or just have a plain HTML/CSS/JS site, you're probably using some sort of multi-page application.

The main issue with MPA is that each navigation (e.g. clicking a link, form submission) requires a full page reload, meaning more time is wasted.

We could rewrite our entire app as a SPA with React/Vue, but that would be time consuming and unnecessarily complex.

This is why tools like Turbo Drive exist. Turbo Drive "watches for link clicks and form submissions, performs them in the background, and updates the page without doing a full reload."

However, I feel like Turbo Drive is sometimes too overcomplicated -- I just want something small that works without much configuration.

Usage

Using Million, a modern Virtual DOM library, I created a MPA to SPA router.

All you have to do is add this in your HTML files

import { router } from 'https://unpkg.com/million?module';

router();

And it's that easy!