Che cos’è un’applicazione a pagina singola ? Architettura, vantaggi e sfide

Un’applicazione a pagina singola (SPA) è un’app Web che viene presentata all’utente tramite una singola pagina HTML per essere più reattiva e per replicare più fedelmente un’applicazione desktop o un’app nativa.

Una SPA viene talvolta definita interfaccia a pagina singola (SPI).

Un’applicazione a pagina singola può recuperare tutto il codice HTML, JavaScript e CSS dell’applicazione durante il caricamento iniziale o può caricare le risorse in modo dinamico per l’aggiornamento in risposta all’interazione dell’utente o ad altri eventi.

Altre applicazioni Web, presentano all’utente una pagina iniziale collegata a parti dell’applicazione su pagine HTML separate, il che significa che l’utente deve attendere il caricamento di una nuova pagina ogni volta che effettua una nuova richiesta.

Tecnologie

Le SPA utilizzano HTML5 e Ajax (JavaScript asincrono e XML) per consentire risposte fluide e dinamiche alle richieste degli utenti, consentendo l’aggiornamento immediato del contenuto quando un utente esegue un’azione. Una volta caricata la pagina, le interazioni con il server avvengono tramite chiamate Ajax e i dati vengono restituiti, rilevati in formato JSON (JavaScript Object Notation), per aggiornare la pagina senza richiedere ricaricamenti.

SPA in dettaglio

Le app a pagina singola si distinguono per la loro capacità di ridisegnare qualsiasi parte dell’interfaccia utente senza richiedere un roundtrip del server per recuperare l’HTML. Ciò si ottiene separando i dati dalla presentazione dei dati con un livello di modello che gestisce i dati e un livello di visualizzazione che legge dai modelli.

Un buon codice deriva dalla risoluzione dello stesso problema più volte, o da un refactoring. Di solito, questo procedimento si evolve per schemi ricorrenti, con un meccanismo che fa la stessa cosa in modo coerente.

Per scrivere codice gestibile, è necessario scrivere codice in modo semplice. Questa è una costante lotta, infatto è facile aggiungere complessità (intrecci/dipendenze) scrivendo codice per risolvere un problema; ed è facile risolvere un problema in un modo che non riduca la complessità.

I namespace ne sono un esempio.

Applicazioni a pagina singola (SPA) applicazioni a pagina multipla (MPA) a confronto

Le applicazioni a più pagine (MPA) contengono più pagine con dati statici e collegamenti ad altri siti. HTML e CSS sono le principali tecnologie utilizzate per sviluppare siti web MPA. Possono utilizzare JavaScript per ridurre il carico e aumentare la velocità. Le organizzazioni che offrono un’ampia gamma di servizi, come i negozi online, dovrebbero prendere in considerazione l’utilizzo di MPA in quanto facilitano la connessione a diversi database di utenti.

Le applicazioni a pagina singola differiscono da quelle a più pagine per i seguenti punti:

• Processo di sviluppo: durante la creazione di MPA, non è necessaria la competenza in JavaScript, a differenza delle SPA. Tuttavia, l’accoppiamento di front-end e back-end nelle MPA significa che questi siti richiedono tempi di costruzione relativamente più lunghi rispetto alle SPA.
• Velocità: gli MPA funzionano relativamente più lentamente, richiedendo il caricamento da zero di ogni nuova pagina. Tuttavia, le SPA si caricano molto più velocemente dopo il download iniziale poiché memorizzano i dati nella cache per un uso successivo.
• Ottimizzazione per i motori di ricerca: i motori di ricerca possono facilmente indicizzare i siti Web con MPA. Le MPA hanno più pagine scansionate dai motori di ricerca per generare migliori classifiche SEO. Anche il contenuto di ogni pagina è statico, rendendolo più accessibile. Al contrario, le SPA hanno una pagina con un unico URL (Uniform Resource Locator) univoco. Usano anche JavaScript, che non è adeguatamente indicizzato dalla maggior parte dei motori di ricerca. Ciò rende le classifiche SEO per le SPA più impegnative.
• Sicurezza: nelle AMP, è necessario proteggere singolarmente ogni pagina online. Tuttavia, le SPA sono più soggette agli attacchi degli hacker. Ma con il giusto approccio, i team di sviluppatori possono migliorare la sicurezza delle applicazioni.

Man mano che sempre più aziende migrano per utilizzare le SPA, i crawler e i motori di ricerca si evolveranno per indicizzarli meglio. Data la sua velocità, è solo questione di quando le SPA diventeranno l’opzione di riferimento per lo sviluppo di applicazioni web. Quindi i vantaggi di MPA rispetto a SPA inizieranno a svanire.

Quando utilizzare le applicazioni a pagina singola?

Esistono cinque scenari in cui tali applicazioni sono le più rilevanti:

• Gli utenti che desiderano sviluppare un sito Web con una piattaforma dinamica e volumi di dati inferiori possono utilizzare le SPA.
• Gli utenti che intendono creare un’applicazione mobile per il proprio sito Web possono anche prendere in considerazione l’utilizzo di SPA. Possono utilizzare l’API (Application Programming Interface) di back-end per il sito e l’applicazione mobile.
• L’architettura delle SPA è adatta alla creazione di social network come Facebook, piattaforme SaaS e comunità chiuse in quanto richiedono meno SEO.
• Anche gli utenti che desiderano offrire ai propri consumatori un’interazione continua dovrebbero utilizzare le SPA. I consumatori possono anche accedere agli aggiornamenti in tempo reale per lo streaming di dati e grafici in tempo reale.
• Utenti che desiderano offrire un’esperienza utente coerente, nativa e dinamica per vari dispositivi, sistemi operativi e browser.

Un buon team dovrebbe avere il budget, gli strumenti e il tempo per creare un’applicazione a pagina singola di alta qualità. Ciò garantirà una SPA affidabile ed efficiente che non subisca tempi di inattività dovuti al traffico.

Architettura dell’applicazione a pagina singola

Le app a pagina singola interagiscono con i visitatori caricando e lavorando sulla pagina corrente, ovviando all’obbligo di caricare più pagine web dal server.

I siti Web con SPA sono costituiti da un singolo collegamento URL. Il contenuto viene scaricato e i componenti specifici dell’interfaccia utente (UI) vengono aggiornati quando si fa clic. L’esperienza utente è migliorata in quanto l’utente può interagire con la pagina corrente mentre il nuovo contenuto viene recuperato dal server. Quando si verifica un aggiornamento, parti della pagina corrente vengono aggiornate con il nuovo contenuto.

La richiesta iniziale del client in SPA carica l’applicazione e tutti i suoi asset rilevanti, come HTML, CSS e JavaScript. Il file di caricamento iniziale potrebbe essere significativo per applicazioni complesse e comportare un tempo di caricamento più lento. Un’interfaccia di programmazione dell’applicazione (API) recupera nuovi dati mentre l’utente naviga all’interno di una SPA. il server risponde solo con i dati in formato JSON (JavaScript Object Notation). Alla ricezione di questi dati, il browser aggiorna la vista dell’applicazione che l’utente vede senza ricaricare una pagina.

L’architettura delle applicazioni a pagina singola include tecnologie di rendering lato server e lato client. Il sito viene visualizzato e presentato all’utente tramite rendering lato client (CSR, Client Side Rendering), rendering lato server (SSR, Server Side Rendering) o generatori di siti statici (SSG, Static Site Generator).

1. Rendering lato client (CSR)
   Con il rendering lato client, il browser effettua una richiesta al server per un file HTML e riceve un file HTML di base con script e stili collegati. Durante l’esecuzione di JavaScript, l’utente vede una pagina vuota o un’immagine del caricatore. La SPA recupera i dati, produce visualizzazioni e inserisce i dati nel Document Object Model (DOM). La SPA viene quindi preparata per l’utilizzo. CSR è spesso la più lunga delle tre alternative e può occasionalmente sopraffare il browser a causa del suo ampio utilizzo delle risorse del dispositivo durante la visualizzazione del contenuto. Inoltre, CSR è una valida alternativa per i siti Web ad alto traffico poiché presenta informazioni ai consumatori senza un’eccessiva comunicazione con il server, risultando in un’esperienza utente più rapida.

2. Rendering lato server (SSR)
   Durante il rendering lato server, i browser richiedono un file HTML al server, che recupera i dati richiesti, esegue il rendering della SPA e crea il file HTML per l’applicazione in movimento. All’utente viene quindi presentato materiale accessibile. L’architettura SPA è necessaria per allegare eventi, produrre un DOM virtuale ed eseguire ulteriori operazioni. La SPA viene quindi preparata per l’utilizzo. SSR rende il programma veloce poiché unisce la velocità di una SPA al fatto di non sovraccaricare il browser dell’utente.

3. Generatore di siti statici (SSG)
   All’interno del generatore di siti statici, i browser effettuano immediatamente una richiesta al server per un file HTML. La pagina viene mostrata all’utente. La SPA recupera i dati, genera visualizzazioni e li inserisce nel modello a oggetti documento (DOM). Quindi, la SPA è pronta per l’uso. Deducendo dal nome, gli SSG sono principalmente adatti per pagine statiche. Forniscono pagine statiche con un’opzione buona e veloce. Per i siti Web con contenuto dinamico, si consiglia agli utenti di scegliere una delle altre due opzioni di rendering delle informazioni.

Vantaggi delle applicazioni a pagina singola

Grandi aziende come Meta, YouTube e Netflix sono passate da applicazioni multipagina ad applicazioni a pagina singola. Le SPA offrono un’esperienza utente più fluida, prestazioni più elevate e reattività. Di seguito sono riportati i vantaggi dell’utilizzo di applicazioni a pagina singola.

1. Funzionalità di memorizzazione nella cache
   Un’applicazione a pagina singola esegue una singola richiesta al server al download iniziale e salva tutti i dati che riceve. I consumatori possono utilizzare i dati ricevuti per lavorare offline, se necessario, il che lo rende più conveniente per gli utenti in quanto consente loro di consumare meno risorse di dati. Inoltre, quando un client ha una cattiva connessione Internet, è possibile sincronizzare i dati locali con il server se la connessione LAN lo consente.
2. Veloce e reattivo
   L’utilizzo delle SPA può migliorare la velocità di un sito Web in quanto aggiorna solo il contenuto richiesto invece di aggiornare l’intera pagina. Le SPA caricano un file JSON minore anziché una nuova pagina. Il file JSON garantisce maggiore velocità di caricamento ed efficienza. Si traduce in un accesso istantaneo a tutte le caratteristiche e le funzioni di una pagina senza ritardi. Questo è un enorme vantaggio, dato che il tempo di caricamento di un sito Web può influire in modo significativo sui ricavi e sulle vendite.

Le SPA consentono transizioni fluide fornendo istantaneamente tutte le informazioni sulla pagina. Il sito Web non ha bisogno di essere aggiornato, quindi i suoi processi sono più efficienti delle tipiche app online.

Inoltre, con le SPA, risorse come script HTML, CSS e Java verranno recuperate solo una volta nel corso della vita di un’applicazione. Solo i dati necessari vengono scambiati avanti e indietro.

Le pagine con SPA consentono inoltre agli utenti di effettuare navigazioni più veloci grazie alla memorizzazione nella cache e ai volumi di dati ridotti. Solo i dati necessari vengono trasmessi avanti e indietro e vengono scaricate solo le parti mancanti del contenuto aggiornato.

3. Debug con Chrome
   Il debugging consente di rilevare e rimuovere bug, errori e vulnerabilità di sicurezza delle applicazioni Web che rallentano le prestazioni. Il debug delle SPA è semplificato dagli strumenti per sviluppatori di Chrome. Gli sviluppatori possono controllare il rendering del codice JS dal browser, eseguire il debug delle SPA senza passare al setaccio molte righe di codice.

Le SPA sono sviluppate su framework JavaScript come gli strumenti di sviluppo AngularJS e React, rendendo così più semplice il loro debug utilizzando i browser Chrome.

Gli strumenti per sviluppatori consentono agli sviluppatori di capire come il browser richiederà i dati dai server, li memorizzerà nella cache e come visualizzerà gli elementi della pagina. Inoltre, questi strumenti consentono agli sviluppatori di monitorare e analizzare elementi della pagina, operazioni di rete e dati associati.

4. Sviluppo rapido
   Durante il processo di sviluppo, il front-end e il back-end di una SPA possono essere separati, consentendo a due o più sviluppatori di lavorare in parallelo. La modifica del front-end o del back-end non influisce sull’altra estremità, favorendo così uno sviluppo più rapido.

Gli sviluppatori possono riutilizzare il codice lato server e separare le SPA dall’interfaccia utente front-end. L’architettura disaccoppiata nelle SPA separa i display front-end e i servizi back-end. Ciò consente agli sviluppatori di modificare le prospettive, creare e sperimentare senza influire sul contenuto o preoccuparsi della tecnologia di back-end. I clienti possono quindi avere un’esperienza coerente utilizzando queste applicazioni.

5. Esperienza utente migliorata
   Con le SPA, gli utenti ottengono l’accesso alle pagine visualizzate istantaneamente con tutto il contenuto in una volta. Questo è più conveniente in quanto gli utenti possono scorrere comodamente e senza interruzioni. Sembra di utilizzare un’app mobile o desktop nativa.

Le SPA forniscono una UX positiva con un inizio, una parte centrale e una conclusione distinti. Inoltre, gli utenti possono raggiungere il contenuto desiderato senza fare clic su più collegamenti, come negli MPA. Si verificano frequenze di rimbalzo inferiori quando gli utenti ottengono l’accesso istantaneo alle informazioni, a differenza degli MPA, dove gli utenti si sentono frustrati poiché le pagine impiegano una notevole quantità di tempo per caricarsi. La navigazione è anche più veloce perché gli elementi della pagina vengono riutilizzati.

6. Conversione in applicazioni IOS e Android
   Gli sviluppatori che desiderano passare alle applicazioni Ios e Android dovrebbero utilizzare le SPA poiché sono relativamente più facili da convertire. Possono utilizzare lo stesso codice per passare dalla SPA alle applicazioni mobili. Poiché l’intero codice viene fornito in un’unica istanza, le SPA sono facili da scorrere, il che le rende ideali per le applicazioni mobili.
7. Compatibilità multipiattaforma
   Gli sviluppatori possono utilizzare un’unica base di codice per creare applicazioni che possono essere eseguite su qualsiasi dispositivo, browser e sistema operativo. Ciò migliora l’esperienza del consumatore in quanto può utilizzare la SPA ovunque. Consente inoltre agli sviluppatori e agli ingegneri DevOps di creare applicazioni ricche di funzionalità, inclusa l’analisi in tempo reale, mentre sviluppano applicazioni di modifica dei contenuti.

Aspetti negativi

Nonostante tutti i vantaggi delle applicazioni a pagina singola, quando si utilizzano i framework SPA sorgono alcuni svantaggi. Fortunatamente, sono in corso lavori per superare questi problemi con le SPA. Di seguito sono riportati alcuni aspetti negativi;

1. Ottimizzazione per i motori di ricerca (SEO)
   È opinione diffusa che le applicazioni a pagina singola non si adattino bene alla SEO. La maggior parte dei motori di ricerca, come Google o Yahoo, non è stata in grado di eseguire la scansione dei siti Web SPA in base alle interazioni Ajax con i server per un po’. Di conseguenza, la maggior parte di questi siti SPA è rimasta non indicizzata. Attualmente, ai robot di Google è stato insegnato come utilizzare JavaScript invece del normale HTML per indicizzare i siti Web SPA, il che danneggia le classifiche.

Cercare di adattare la SEO a un sito SPA già pronto è impegnativo e costoso. Gli sviluppatori devono costruire un sito Web distinto, reso dal server per i motori di ricerca, che è inefficiente e comporta una notevole quantità di codice aggiuntivo. Possono essere utilizzate anche altre tecniche, come il rilevamento delle caratteristiche e il pre-rendering. Nelle strutture SPA, un singolo URL per ogni pagina limita le capacità SEO per le SPA.

2. Navigazione dei pulsanti avanti e indietro
   I browser salvano le informazioni per facilitare il caricamento rapido delle pagine web. Quando i consumatori premono il pulsante Indietro, la maggior parte prevede che la pagina sarà in una condizione simile a quella dell’ultima volta che l’hanno vista e che la transizione avverrà rapidamente. Le architetture web tradizionali lo consentono utilizzando copie cache del sito e delle relative risorse. Tuttavia, in un’ingenua implementazione di una SPA, premere il pulsante Indietro ha lo stesso effetto di fare clic su un collegamento. Causa una richiesta del server, un aumento del ritardo e modifiche ai dati visibili.

Per soddisfare le aspettative degli utenti e offrire un’esperienza più rapida, gli sviluppatori SPA devono imitare la funzionalità dei browser nativi utilizzando JavaScript.

3. Scorri la posizione
   I browser memorizzano informazioni come l’ultima posizione di scorrimento delle pagine visitate. Tuttavia, gli utenti potrebbero scoprire che le posizioni di scorrimento sono cambiate durante la navigazione nelle SPA utilizzando i pulsanti avanti e indietro del browser. Ad esempio, su Facebook, a volte gli utenti tornano alle loro ultime posizioni di scorrimento, ma a volte no. Ciò si traduce in un’esperienza utente non ottimale poiché devono riprendere manualmente lo scorrimento fino alla posizione di scorrimento precedente.

Per risolvere questo problema, gli sviluppatori devono fornire un codice in grado di salvare, recuperare e richiedere la corretta posizione di scorrimento mentre l’utente scorre avanti e indietro.

4. Analisi del sito web
   Aggiungendo il codice di analisi a una pagina, gli utenti possono monitorare il traffico della pagina. Tuttavia, le SPA rendono difficile determinare quali pagine o contenuti sono più popolari, dato che si tratta solo di una singola pagina. È necessario fornire un codice aggiuntivo per consentire all’analisi di monitorare le pseudo pagine man mano che vengono visualizzate.
5. Problemi di sicurezza
   Le SPA sono più inclini a essere violate tramite attacchi di scripting cross-site. Consentono ai consumatori di scaricare l’intera applicazione, esponendola a maggiori opportunità di trovare vulnerabilità attraverso il reverse engineering. Per risolvere questo problema, gli sviluppatori devono assicurarsi che tutta la logica lato client relativa alla sicurezza delle applicazioni Web, come l’autenticazione e la convalida dell’input, sia raddoppiata sul server per la verifica. Inoltre, gli sviluppatori devono fornire un accesso limitato basato sui ruoli.

Concludendo

Le applicazioni a pagina singola segnano il passo successivo nell’evoluzione delle esperienze delle app. Sono più veloci, più intuitivi e possono essere integrati con funzionalità avanzate come la personalizzazione. Ecco perché le migliori aziende con molti utenti simultanei, come Gmail, Netflix o il feed di notizie di Facebook, si affidano a un’architettura a pagina singola. Implementando questa tecnologia, le aziende possono ottenere più valore dalle loro proprietà online e fare nuove incursioni come attività digitali.

Ercole Palmeri