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!

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

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

Okay