Applicazioni a pagina singola vs applicazioni multipagina: la battaglia delle app Web

Le app web a pagina singola esistono già da quasi vent'anni, ma la loro popolarità è relativamente nuova. La ragione di ciò è lo sviluppo tecnologico: la tecnologia attuale consente agli sviluppatori di trasformare quelli che erano i principali inconvenienti in soluzioni praticabili o addirittura vantaggi. In questo articolo parleremo delle differenze tra applicazioni a pagina singola e applicazioni multipagina e quali scegliere per la tua attività.

La battaglia tra applicazioni a pagina singola (SPA) e applicazioni a più pagine (MPA) è più complessa di quanto sembri. Diamo un'occhiata da vicino a tutti i pro e i contro di ogni tipo di applicazione web .

Contenuti:

1. Che cos'è una SPA?
2. Come sono costruite le SPA?
3. Vantaggi della SPA
4. Svantaggi della SPA
5. Che cos'è un'AMP?
6. Vantaggi dell'MPA
7. Svantaggi delle app Web multipagina
8. SPA vs MPA: quale scegliere?
9. Applicazioni web progressive
10. Quanto costa realizzare una SPA e una MPA?

Che cos'è una SPA?

In parole povere, un'applicazione a pagina singola è un'applicazione web in cui il contenuto viene caricato dinamicamente senza dover ricaricare la pagina . Ad esempio, mentre controlli il tuo feed su Facebook o Twitter o la tua posta nell'app Web Gmail, non vedi una schermata di caricamento della pagina aggravante. Si scorre e si passa da una scheda all'altra e il contenuto viene caricato istantaneamente.

In un'app Web a pagina singola, tutto il codice HTML e CSS viene caricato una volta, quando si apre la pagina. Dopodiché, mentre ti sposti nel sito, vengono caricati solo i nuovi dati; la pagina stessa non si ricarica. Ciò rende l'esperienza dell'utente più fluida: c'è poco o nessun tempo di attesa, per prima cosa, e le pagine sembrano caricarsi istantaneamente. In un mondo in cui un ritardo di 100 millisecondi può portare oltre 1,6 milioni di dollari in vendite perse, questo è un problema che gli imprenditori non possono permettersi di ignorare.

Come sono costruite le SPA?

Le applicazioni a pagina singola sono costruite con framework JavaScript e gli sviluppatori scelgono il framework in base a una serie di fattori, comprese le preferenze personali. Ecco i tre grandi framework JavaScript di oggi secondo i nostri sviluppatori di Mind Studios:

La maggior parte dei buoni sviluppatori frontend conosce più di un framework. Molti conoscono React, Angular, Vue e poi alcuni.

Vantaggi delle applicazioni a pagina singola

I vantaggi delle applicazioni a pagina singola sono numerosi, motivo per cui sono diventate così popolari nonostante diversi inconvenienti. Infatti, con la tecnologia attuale, questi inconvenienti possono essere in una certa misura affrontati, rendendo le SPA la scelta di un numero sempre maggiore di proprietari di siti web. Inizieremo con i pro delle SPA , quindi copriremo i contro.

1. Caricamento rapido della pagina

Il passaggio rapido e fluido tra le pagine, senza la necessità di ricaricare attivamente, è diventata l'arma più grande nella battaglia SPA vs MPA. Il caricamento dinamico , ovvero il caricamento di contenuti in piccole parti anziché tutto in una volta, riduce notevolmente i tempi di risposta, migliorando l'esperienza dell'utente.

Le SPA spostano parzialmente l'elaborazione del contenuto dai server al browser. In questo modo, è meno necessario che il browser invii richieste ai server e attenda risposte. Grazie a ciò, le SPA possono funzionare anche offline in una certa misura.

2. Separare la parte anteriore e quella posteriore

Uno degli altri vantaggi delle SPA è che a differenza delle MPA, in cui front-end e back-end sono strettamente collegati, in una SPA è possibile riscrivere solo il front-end, con un effetto minimo sul back-end. Ciò rende l' aggiornamento delle SPA più semplice, veloce ed economico . Ma un vantaggio più grande di front-end e back-end separati è che puoi utilizzare un back-end SPA per un'applicazione mobile se/quando decidi di crearne uno. Con un MPA, dovrai ricostruire il back-end per un'app mobile, non da zero, ma in modo significativo.

3. Sviluppo e manutenzione

La costruzione di una SPA richiede meno tempo rispetto alla costruzione di un MPA. Non è necessariamente più semplice: lo stack tecnologico di una SPA è leggermente più grande di quello di un MPA, ma richiede meno tempo, poiché non è necessario scrivere codice e creare progetti UI/UX separati per ogni pagina.

Oltre a ciò, i vantaggi delle SPA includono il debug di Chrome notevolmente semplificato grazie agli strumenti di sviluppo nativi per i tre framework JavaScript più popolari.

Passiamo ora agli inconvenienti.

Svantaggi delle applicazioni web a pagina singola (e come superarli)

Secondo una ricerca del 2018 di Unbound, quasi il 70% degli utenti afferma che la velocità di caricamento della pagina influisce sulla loro decisione di acquistare o non acquistare da un sito. Tuttavia, la maggior parte dei mercati sono costruiti come MPA più lenti, poiché gli svantaggi delle SPA sono particolarmente scomodi per i grandi negozi online. Gli sviluppatori hanno spinto lo sviluppo di SPA per risolvere i problemi che impediscono ai proprietari di negozi online di creare i loro siti Web come SPA. Di seguito sono riportati gli svantaggi delle applicazioni a pagina singola e come possono essere superati con la tecnologia odierna.

1. JavaScript disabilitato

Le app a pagina singola vengono sviluppate utilizzando framework JavaScript: React, Vue, Angular e talvolta altri. Pertanto, se gli utenti hanno disabilitato JavaScript nei loro browser, vedranno una pagina vuota. Questo problema può essere parzialmente risolto utilizzando il rendering lato server (SSR), nel qual caso l'app viene elaborata sul server anziché nel browser. Non è una soluzione perfetta, ma in una certa misura funziona. Fortunatamente, non troppi utenti disabilitano JavaScript nei loro browser in primo luogo.

2. Ottimizzazione per i motori di ricerca

Poiché le app Web a pagina singola caricano il contenuto tramite AJAX , ciò che un bot di ricerca ottiene, essenzialmente, è un elemento DOM (Document Object Model), una struttura dell'app Web senza contenuto. Significa che non ci sono parole chiave da acquisire subito.

Questo, di conseguenza, porta a un basso posizionamento nei motori di ricerca per le SPA. E quando è fondamentale che un sito abbia un posizionamento elevato per essere trovato dagli utenti, una corretta SEO è un must . Pertanto, per tali siti Web, gli sviluppatori di solito consigliano applicazioni multipagina.

Tuttavia, il problema SEO è un altro risolvibile con il rendering lato server . Il rendering lato server invia (su richiesta) una pagina completamente caricata mentre viene visualizzata sul server invece di caricare il contenuto mentre l'utente naviga nella pagina. Ciò consente ai crawler di funzionare meglio con le SPA.

Un altro modo per migliorare il gioco SEO della tua app web è che i tuoi sviluppatori codifichino il sito con tag appropriati per la navigazione tra le pagine web per aiutare i bot di ricerca a coprire l'intero sito web.

3. Scalabilità

Le SPA non sono molto scalabili in termini di aggiunta di nuove funzionalità e funzionalità completamente nuove. Questo perché con tutto scritto come una singola pagina, l'inserimento di nuove funzionalità può interrompere il codice, quindi gli sviluppatori devono stare attenti. Inoltre, troppo codice extra può far caricare la tua singola pagina troppo lentamente, poiché l'intera base di codice viene caricata immediatamente.

Fortunatamente , i framework JavaScript hanno i cosiddetti router per la suddivisione del codice , noti anche come pacchetti di caricamento pigro a blocchi. Questi consentono di caricare il codice in blocchi (da cui il nome) per velocizzare il caricamento di un sito.

4. Problemi di sicurezza

Le app a pagina singola sono soggette ad attacchi di scripting cross-site (XSS). Questa è una vulnerabilità che consente agli hacker di iniettare codice dannoso in un'app Web basata su JavaScript. Tuttavia, React.js ha una protezione XSS integrata e ci sono altri modi per uno sviluppatore web esperto per proteggere un'app web da qualsiasi tipo di attacco.

5. Navigazione

Un'app Web a pagina singola è esattamente questo: una singola pagina. Ciò significa che esiste un solo URL per l'intero sito. Ciò rende difficile la navigazione: i pulsanti avanti e indietro di solito non funzionano e il collegamento a una parte specifica del contenuto è impossibile.

Questo problema può essere risolto con un'API. Esistono API che aggiungono prefissi di percorso a valori dinamici, rendendo possibile il collegamento a parti specifiche della pagina, solitamente intestazioni.

Che cos'è un'AMP?

Un'app Web multipagina è ciò che consideriamo un sito Web tradizionale : quando ci si sposta da una pagina all'altra, il sito si ricarica completamente. Con questo tipo di sito Web, il caricamento a volte può essere un fastidio, soprattutto se la velocità di connessione è lenta e devi visitare più pagine con contenuti multimediali.

Senza dare un'occhiata troppo da vicino, potrebbe sembrare che le AMP siano una reliquia del passato e presto saranno quasi estinte. Sicuramente, un caricamento più veloce della pagina è sempre meglio per le vendite. Tuttavia, non è così semplice e ci sono casi in cui un MPA è la scelta migliore .

Vantaggi delle app multipagina

1. Navigazione

Il più grande vantaggio delle app Web multipagina è che consentono la navigazione tradizionale. Con ciò intendiamo che ogni pagina di un MPA ha il proprio URL che gli utenti possono copiare e incollare, aggiungere ai segnalibri, condividere, ecc. Anche i pulsanti indietro e avanti nei browser funzionano senza intoppi. In una SPA, per creare URL separati e consentire agli utenti di saltare avanti e indietro tra le "pagine" interne tramite pulsanti, i tuoi sviluppatori dovranno utilizzare un'API.

2. Scalabilità

Ecco un innegabile vantaggio delle app Web multipagina: con un MPA, il tuo sito Web è scalabile come desideri. Puoi creare decine e decine di pagine, dividendo i contenuti per una navigazione più semplice e un caricamento più rapido. Poiché le SPA di solito caricano l'intera struttura del sito Web, il DOM, una volta, se il tuo sito Web ha molto codice (se hai un negozio online, ad esempio), la creazione di una SPA richiederà tecnologie aggiuntive nel tuo stack. Questo è il motivo per cui non è raro che gli sviluppatori web suggeriscano invece MPA per i negozi online.

3. SEO

Se la tua attività fa molto affidamento sui risultati dei motori di ricerca, prendi in considerazione un'app Web multipagina, poiché di solito si posizionano meglio. Il caricamento dinamico dei contenuti di una SPA ostacola i crawler dei motori di ricerca, un problema che gli MPA non devono affrontare. Mentre le SPA richiedono ancora una volta ai tuoi sviluppatori di impiegare una tecnologia SEO aggiuntiva, un MPA è naturalmente in buoni rapporti con i motori di ricerca.

4. Stack tecnologico

Essendo il più vecchio dei due tipi di app Web, le MPA hanno uno stack tecnologico più sviluppato e una comunità di sviluppatori un po' più grande. Inoltre, sebbene richiedano più tempo per lo sviluppo a causa delle numerose pagine, le app Web multipagina sono costruite con uno stack tecnologico più semplice e più piccolo rispetto alle SPA.

Svantaggi delle app Web multipagina

1. Il problema con la velocità di caricamento non è in bianco e nero

Prima di tutto, le MPA non sono esattamente più lente delle SPA. Ciò in cui sono più lenti, rispetto alle SPA, è passare da una pagina all'altra. Questo perché con un MPA, ogni volta che un utente prova a cambiare pagina (vai al suo profilo o procedi al checkout, per esempio), il sito invia una richiesta al server per il codice della nuova pagina. La richiesta stessa e la risposta richiedono tempo per l'elaborazione, quindi il tempo di caricamento.

Il tempo necessario per caricare una nuova pagina dipende da molteplici fattori:

• La velocità della connessione Internet dell'utente
• La quantità e il tipo di contenuto da caricare
• Quanti utenti stanno visitando il sito contemporaneamente
• Quanto sono potenti i server del sito
• La tecnologia su cui è costruito il sito
• Le competenze e l'esperienza dei tuoi sviluppatori frontend

D'altra parte, le SPA caricano l'intero codice nel momento in cui un utente apre il sito. Dopodiché, passa semplicemente tra le "schede" interne sulla stessa pagina, mostrando dinamicamente il contenuto richiesto dalla cache completamente caricata. E quando c'è molto codice, questo caricamento iniziale può richiedere molto più tempo con una SPA che con un MPA. Quindi quando devi scegliere tra un MPA e una SPA, come si suol dire, tutto dipende.

2. Sviluppo

La creazione di un'applicazione Web multipagina richiede più tempo rispetto alla creazione di un'app a pagina singola. Questo perché ogni pagina della tua app web avrà bisogno di un codice separato e di un design separato. A seconda del numero e della complessità delle funzionalità, il tempo potrebbe anche influire sul costo, poiché la maggior parte delle aziende e dei liberi professionisti addebitano le ore trascorse al lavoro.

3. Adattabilità

Gli MPA sono creati principalmente per i browser desktop e, sebbene oggi tutti rendano le interfacce del proprio sito Web flessibili per i browser mobili, la piena adattabilità è più difficile per gli MPA che per le SPA. Le applicazioni a pagina singola assomigliano molto alle app mobili native, mentre le app multipagina sui dispositivi mobili sembrano siti Web in modalità verticale.

E non è solo l'interfaccia utente. Se a un certo punto decidi di creare un'app mobile nativa basata sul tuo sito Web multipagina, dovrai creare l'interfaccia utente/UX, gli elementi visivi e il back-end tutto da zero. Le SPA, a loro volta, consentono di riutilizzare il back-end e spesso hanno un front-end simile a quello di un'interfaccia per app mobile.

SPA vs MPA: quale scegliere?

Per riassumere tutto ciò che abbiamo esposto sopra, guarda la seguente tabella che delinea le principali differenze tra un'applicazione web a pagina singola e multipagina.

Come puoi vedere, entrambi i tipi di app web hanno i loro punti di forza e di debolezza. E mentre la tecnologia delle applicazioni a pagina singola sta progredendo rapidamente e le SPA potrebbero presto sopraffare i siti Web tradizionali, oggi è ancora necessario valutare i pro ei contro prima di decidere quale tipo di sito Web costruire per la propria attività: una SPA o un MPA.

Un piccolo extra: applicazioni web progressive

Le app web progressive, o PWA, sono state una tendenza nello sviluppo web negli ultimi due anni. In breve, una PWA è un mix tra un'app Web e un'app nativa. Fondamentalmente, sono app Web, di solito app a pagina singola, poiché utilizzano JavaScript, HTML e CSS. Ma possono essere ancorati alla schermata iniziale di uno smartphone e in una certa misura funzionare offline, come un'app nativa.

Sai come creare collegamenti ad app e cartelle sul desktop del tuo computer? Le PWA funzionano in modo simile, ma creano collegamenti con l'aspetto di un'app a pagine Web sulla schermata iniziale del tuo smartphone. Con lo stack tecnologico e le API più recenti, caricano una certa quantità di dati nella cache dello smartphone in modo che l'app possa funzionare offline se necessario.

Le PWA non sono ancora così ricche di funzionalità come le app native: non possono utilizzare NFC, Bluetooth o funzionalità dello smartphone che richiedono determinate autorizzazioni. Non offrono nemmeno funzionalità offline complete. Ma sono flessibili, facili da costruire, economici da sviluppare e mettono un promemoria costante del tuo sito web sui telefoni degli utenti .

Quanto costa realizzare una SPA e una MPA?

Le applicazioni a pagina singola stanno guadagnando popolarità per un motivo. Come puoi vedere, la maggior parte dei problemi delle SPA può essere mitigata e quindi non sono la morte della tua app web. Vale a dire, dovrai comunque impiegare tecnologie aggiuntive per tali soluzioni e ciò può influire sul tempo e sui costi per sviluppare un'applicazione a pagina singola. Dovrai valutare tutti i lati della tua idea e prendere in considerazione l'esperienza della tua azienda di sviluppo web prima di decidere se sviluppare una SPA o un MPA.

Ecco alcuni dei parametri che possono essere aggiunti all'equazione:

• Tipo di attività
• Dimensioni del sito web
• Requisiti di scalabilità
• L'importanza della SEO per il tuo sito

Se decidi di utilizzare un'app a pagina singola, dovrai assumere una società di sviluppo con i seguenti specialisti:

• Responsabile del progetto
• Web designer UI/UX
• Sviluppatore frontend specializzato in JavaScript e suoi framework
• Sviluppatore di backend
• Ingegnere QA

Naturalmente, il costo per creare un sito Web SPA dipenderà dalle dimensioni e dal tipo del sito, dal suo set di funzionalità e dallo stack tecnologico necessario, quindi possiamo solo stimarlo approssimativamente.

Una semplice applicazione a pagina singola , ad esempio una pagina di destinazione , può essere creata in due o quattro settimane e costa fino a $ 4.200 . Una piattaforma SaaS più complessa può richiedere tre o quattro mesi per la ricerca, la creazione e il lancio. Il costo per lo sviluppo di tale SPA sarà di circa $ 29.000 e oltre . L'esperienza degli sviluppatori può anche influenzare il tempo necessario per creare un'app Web a pagina singola, poiché lo stack tecnologico per una SPA è maggiore rispetto a un MPA.

D'altra parte, la più semplice applicazione multipagina con più di una singola pagina (altrimenti, qual è il significato, giusto?) richiederà circa quattro o cinque mesi per la codifica, con un costo compreso tra $ 35.000 e $ 42.000 a seconda della complessità e del design . Più funzionalità hai bisogno, più alto è il prezzo e più lungo è il tempo di sviluppo.

Conclusione: SPA vs MPA

Le applicazioni a pagina singola stanno conquistando il mondo in questo momento. E anche se è troppo presto per mettere da parte le AMP, siamo dell'opinione che non puoi - e non dovresti - fermare i progressi. Vale a dire, a Mind Studios , teniamo gli occhi avanti e seguiamo le ultime tecnologie, che sono principalmente per lo sviluppo di SPA. I nostri sviluppatori conoscono bene sia i metodi tradizionali di sviluppo di siti Web che i framework JavaScript, quindi possiamo creare la tua app Web nel modo desiderato.

Se desideri saperne di più su come sviluppare una SPA o se desideri una consulenza, contattaci.

Scritto da Artem Chervichnik e Svitlana Varaksina.