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:
<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
-
MPADiffis still in its early stages, use it carefully. - For bugs, issues & Feature requests, report to the github issues page.
- Full API reference: https://github.com/atwamahmoud/MPADiff
- Having any thoughts? Add a comment below.
atwamahmoud
/
MPADiff
Get the benefits of an SPA with a single line of code.
MPADiff
Minimal Library to mimic Single page apps. behaviour in Multi page apps.
🚀 What, Why & How
MPADiff is a minimal JavaScript library written in TypeScript that prevents your website to reload when the user navigates to another page. This is the default behaviour for SPAs written React, Angulat, Vue & other SPA frameworks/libraries.
The main difference here is that MPADiff provides this functionality to multi page applications written in PHP, Node.js, ASP, or any other language/framework.
It works by sending a GET request to URIs of links to fetch HTML. Once the user clicks on such link, the head element is updated (without reloading any CSS) & the body element is swaped. Both eager & lazy loading of HTML documents are supported and can be configured accoeding to your needs.
Before
Before.mov
After
after.mov
⭐️ Features
- Custom loaders
- Eager & Lazy Loading
- Custom delays
- Doesn't reload CSS.
- 3kb…
Top comments (0)