Che cos’è una Single Page Application (SPA)

La differenza tra una SPA e il classico sito Internet

Se ti trovi qui probabilmente hai sentito parlare di SPA, ma hai capito che non si parlava di centri benessere. Di cosa si tratta dunque? Delle Single Page Applications, web app organizzate attorno a una pagina sola. Per saperne di più leggi questo articolo!

Prima di addentrarci nel tema principale forse vuoi rinfrescarti la memoria sul mondo delle applicazioni in generale. Spesso si fa confusione perché è un settore complesso e pieno di sfumature. Se sei di fretta, salta pure l’introduzione altrimenti dedica un minuto per capire meglio il contesto.

Software, applicazioni, apps e web apps

Un’applicazione è un software, ma il termine è molto generico. Infatti esistono diversi tipi di applicazioni (o applicativi, se preferisci) che si distinguono in base ai criteri scelti e alle tecnologie utilizzate per crearli.

La distinzione attuale più evidente è tra le app che puoi scaricare e installare sul tuo smartphone o su tablet (da App Store di iOS o Play Store di Android) e quelle che sono accessibili anche da browser desktop come Google Chrome o Safari, senza bisogno di installazione. Questi due tipi di applicazioni possono essere definite rispettivamente app mobile e web app.

Esistono anche le applicazioni installate in locale, che funzionano senza connessione Internet e si trovano sul tuo laptop o sul tuo desktop. Per fare due esempi banali che conoscono tutti: Microsoft Word e Microsoft Paint. Non c’è molto da aggiungere, sono i software “classici” che esistono fin dagli anni 90, anche se negli ultimi tempi si sta assistendo a una crescente migrazione online di tools e servizi. Questa migrazione consiste nella creazione di web apps che offrono le stesse funzionalità (a volte una selezione di queste o con nuove integrazioni) delle applicazioni vecchio stile.

Una menzione particolare va fatta per i siti Internet. Si distinguono dalle web apps per le tecnologie usate per crearli ma più in generale per la loro diversa complessità e per il loro scopo. Un sito Internet tende ad essere un portale informativo di contenuti con strumenti limitati (es. un modulo di contatto) mentre una app più spesso serve per svolgere determinate attività e operazioni complesse.

I siti di ecommerce sono un buon esempio di come questi due aspetti possono convivere: il sistema di gestione degli acquisti via browser è assimilabile ad una web app, ma può essere accompagnato da aree informative che raccontano l’identità e la realtà imprenditoriale del brand proprietario.

In tutto questo dove si posizionano le Single Page Applications?

Cos’è una Single Page Application (SPA)

Innanzitutto è bene sapere che una SPA è un tipo di web app, quindi si parla di un’applicazione accessibile da browser con connessione Internet. Cos’ha di diverso dalle altre? Come suggerisce il nome si tratta di un’applicazione basata su un’unica pagina, ma cosa significa esattamente?

Applicazioni come Facebook, Twitter, Netflix, Google Docs, Gmail e Google Drive sono tutte SPA. Per capirlo meglio facciamo un passo indietro e confrontiamo la SPA con il classico sito Internet aziendale fatto con Wordpress.

Le differenze tra una Single Page Application e un sito Internet

Un sito Internet è organizzato in pagine e ogni volta che ne visualizzi una il tuo browser chiede al server che ospita il sito di scaricare tutti gli elementi che la compongono. Testi, immagini e contenuti “bruciano” parte del tuo traffico dati (in base a quanti megabyte pesano questi elementi) e vengono mostrati sul tuo schermo. Ogni volta che cambi pagina viene eseguita questa procedura. Più questi dati sono pesanti più traffico utilizzano e più vengono caricati lentamente.

schema funzionamento sito internet classico

Uno schema riassuntivo del funzionamento di un sito Internet classico.

Una Single Page Application è organizzata in una sola pagina che non segue questa modalità. Questo non significa che una SPA non dispone di una navigazione classica con diverse sezioni contenenti informazioni e funzionalità specifiche. La differenza tra SPA e le altre applicazioni riguarda il modo in cui gli sviluppatori organizzano il codice del software e non il modo in cui lo vedono gli utenti sui loro devices!

Le Single Page Applications scaricano tutti i componenti comuni alle loro diverse sezioni una sola volta e questi restano disponibili a prescindere dalla sezione che vuoi visualizzare. Quando devi consultare alcuni dati – ad esempio i prodotti di un sito di ecommerce – vengono scaricati dal database che li contiene senza bisogno di effettuare alcun refresh globale della pagina.
A questo punto è lecito chiedersi: che vantaggi porta sviluppare una Single Page Application? Scopriamolo.

schema funzionamento single page application

Uno schema riassuntivo del funzionamento di una SPA.
I vantaggi di una Single Page Application (SPA)

Certo le SPA permettono di risparmiare traffico dati, ma il vero vantaggio è un altro.

Le SPA garantiscono infatti una navigazione molto più fluida, come se stessi usando un’applicazione installata in locale sul tuo desktop. Fino a qualche anno fa si poteva parlare anche di effettiva velocità di caricamento ma grazie al miglioramento delle policy di caching dei browser (sempre più aggressive e standard) oggi la differenza di tempo rispetto a molti siti classici è andata diminuendo.

Benché in modo molto sottile, le SPA godono di una maggiore rapidità percepita, un elemento molto importante per la user experience (UX). Com’è risaputo ormai da anni, performance e accessibilità sono due elementi fondamentali per migliorare la user experience e per rendere più efficienti le mansioni sul posto di lavoro che si basano sull’uso di software.

Avrai sicuramente notato quanto questo blog è rapido a caricare gli articoli. Di solito la maggior parte dei siti è lenta e impiega anche alcuni secondi per mostrarti i contenuti. Il segreto? Il nostro sito Internet Dreamonkey è una Single Page Application! Ecco una delle nostre specialità: saper creare piattaforme stabili, veloci e facili da navigare. Se ti interessa svilupparne una contattaci.