DEV Community

Aiden Bai
Aiden Bai

Posted on

3 2

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!

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay