MPADiff, make your MPA an SPA with a single LOC.
Tags: javascript, typescript, mpa, spa
Published: 2021-07-29 04:47:46

---
title: MPADiff, make your MPA an SPA with a single LOC.
published: true
description: MPADiff is JS library that makes your MPA behave as an SPA, with a single line of code.
tags: JavaScript, TypeScript, mpa, spa
//cover_image: https://direct_url_to_image.jpg
---
## 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

| Category      | SPA           | MPA   |
| ------------- |:-------------:| -----:|
| SEO           | Nope          | Already Set up |
| Page Load     | Good for simple apps, But not for complicated apps without SSR      |  Good if you have good infra  |
| Rendering Perf. | Big No!      |    Good |
| Development Time | Better for complicated UI (Assuming back-end is already made)      |    Good for simple UIs (aka 90% of the cases) |
| UX | Website doesn't reload on navigation |Reloads on navigation |

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:

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

### Options

| Option | Type | Explanation | Default |
---------|------|-------------|----------|
| loaderDelay | number (ms) | number of milliseconds to wait before hiding the loader (in case of lazy loading) | 500 |
| eagerLoading | boolean | Whether the links should be loaded once they appear or load them only when the user clicks on them. | true |
| loaderElement | HTMLElement/Node/undefined | The element that will be used when the contents of a link is still loading and the user has clicked on it | undefined |

## Notes

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


{% github atwamahmoud/MPADiff %}