MPADiff, make your MPA an SPA with a single LOC.

Introduction

Even though I write React based apps on a daily basis. One thing that I always think about is why does everyone use SPAs today. I get it, it's easier to develop, reduces development time (business people like this) & it has a better UX (in my opinion) when it's done right.

But let's face it, it's far easier to write a Node.JS backend with handlebars for templates than it is to write a react application.

Below are the pros & cons of using an SPA approach vs using an MPA approach.

MPA vs SPA

The previous comparison is not full but gives us an insight to why SPAs are becoming more and more popular.

Now, the question is this. Can we make a multi-page application behave as an SPA, while still having the benefits of an MPA without much time? The answer is Yes!

MPADiff

MPADiff is JavaScript library written in TypeScript that makes an MPA look & feel like an SPA while still being an MPA it self.

It works by changing the default behavior of a tags. Once a link is clicked, the HTML of such link is fetched using a GET request, The body element is swapped & the head element is updated (not replaced).

This approach prevents reloading CSS that was already loaded.

By default, the library eagerly loads link elements (i.e. before the user clicks on them). This makes navigation between different pages instantaneous, but puts an extra load on your infrastructure.

Installing

Yarn

yarn add mpadiff

npm

npm i mpadiff -S

Self host

<script src="build/index.js"></script>

CDN

<script src="https://unpkg.com/mpadiff"></script>

Usage

MPADiff can be used & enabled with a single line of code, just like this:

<script src="https://unpkg.com/mpadiff"></script>
<script>
window.MPADiff.default.init({
  loaderDelay: 0,
  loaderElement: undefined,
  eagerLoading: true
});
</script>

Options

Notes

1. MPADiff is still in its early stages, use it carefully.
2. For bugs, issues & Feature requests, report to the github issues page.
3. Full API reference: https://github.com/atwamahmoud/MPADiff
4. Having any thoughts? Add a comment below.