Una Single Page Application (SPA) è un’applicazione o un sito web che interagisce con l’utente riscrivendo dinamicamente l’attuale pagina, invece di caricare intere nuove pagine dal server. Questa azione porta ad una miglior esperienza dell’utente perché l’applicazione o il sito web avranno una velocità di risposta molto più alta.
Il framework JavaScript più utilizzato per la creazione di SPA è Angular, ma ci sono anche altri come React e Vue.js. Omessa app e altri particolari interessi, userò JavaScript puro per spiegare come creare una single page application (SPA).
Seguire questi step:
1. Definisci una struttura HTML base
```
```
function homePage(){
document.getElementById(‘app’).innerHTML = `
Welcome to my SPA
`;function aboutPage(){ document.getElementById(‘app’).innerHTML = `
This is my SPA
`;// all’inizio, mostra la homepage
homePage();
```
1. Ora, avrai bisogno di un sistema di routing per mostrare diverse pagine a seconda dell’URL. Puoi farlo ascoltando l’evento `“hashchange”`.
```
window.addEventListener(‘hashchange’, function(){
if(window.location.hash === ‘#about’){
aboutPage();
} else {
homePage();
}
});
```
1. Infine, avrai bisogno di qualche link per navigare tra le tue pagine. Gli URL inizieranno con `#` per affermare che si sta utilizzando un hash URL.
E questo è tutto quel che serve per una Single Page Application di base. Da qui, puoi iniziare ad aggiungere più pagine, stili CSS, interattività con JavaScript e molto di più.
Ricorda, ciò è solo una struttura di base, per progetti più grandi e complessi è consigliato l’uso di un framework o una libreria come React, Angular o Vue.js.
