Turning MPA to SPA with Virtual DOM

aidenybai

Aiden Bai

Posted on April 17, 2022

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();
Enter fullscreen mode Exit fullscreen mode

And it's that easy!

💖 💪 🙅 🚩
aidenybai
Aiden Bai

Posted on April 17, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related