PWA vs SPA: simili ma diversi

Il fascino dei siti Web standard inizia a perdere il suo fascino, cedendo il posto alle applicazioni Web. Ogni giorno che passa, le applicazioni web stanno diventando sempre più popolari grazie alla loro esperienza coinvolgente e incredibilmente veloce.

La maggior parte di questo successo tecnologico può essere ottenuto solo implementando determinate architetture nella struttura del tuo sito Web, garantendo stabilità, prestazioni e coinvolgimento del tuo sito Web.

Due approcci popolari per strutturare la tua applicazione web in questo momento sono le PWA e le SPA. Per quanto riguarda la concezione comune riguardo a questi due approcci, non sono la stessa cosa. Questo è fondamentale poiché le loro differenze trascurate spesso portano a costosi errori e opportunità perse; sicuramente tu, probabilmente il proprietario di un sito per il quale ogni millisecondo conta, non vuoi che la tua applicazione web sia in ritardo rispetto al resto del mondo.

Come funzionano?

Applicazioni a pagina singola (SPA)

SPA (Single Page Application) è un sito Web la cui pagina corrente viene aggiornata in modo dinamico anziché essere scaricata interamente da un server. In altre parole, tutto il codice dell'applicazione necessario per la tua applicazione web (HTML, CSS, JavaScript) deve essere caricato una sola volta . Mentre l'utente naviga nell'applicazione Web, tutti i contenuti e gli elementi che devono essere aggiornati vengono recuperati e visualizzati nuovamente senza richiedere all'utente di ricaricare il browser.

Ciò evita il tradizionale viaggio di andata e ritorno tra il browser e il server, consentendo così interazioni più rapide e una migliore soddisfazione dell'utente.

Probabilmente usi SPA tutto il tempo senza nemmeno accorgertene. Hai notato come la maggior parte dei siti Web di social media si sente allo stesso modo? È perché tutti utilizzano SPA per semplificare l'esperienza dell'utente e creare un feed di aggiornamento continuo delle notizie.

Ecco alcune delle SPA notevoli che probabilmente stai utilizzando regolarmente:

• Facebook
• Gmail
• Linkedin
• Netflix
• Google Maps

App Web progressive (PWA)

A differenza di SPA, Progressive Web App (PWA) è più simile a un insieme di linee guida e liste di controllo che a un'architettura specifica. Le PWA sono note e si discostano dalle ZPS per diverse caratteristiche quali:

• Operatori di servizio: gli operatori di servizio forniscono la base tecnica per molte delle principali funzionalità di PWA, in particolare la disponibilità offline e le notifiche push.
• Manifesto dell'app Web: un file JSON che contiene i metadati necessari per la tua PWA. I manifesti delle app Web possono essere generati automaticamente utilizzando il generatore di manifesti PWA.
• HTTPS: le PWA sono sempre servite da un'origine sicura.

Gli addetti ai servizi fungono da proxy tra il browser e la rete e sono responsabili della memorizzazione nella cache delle risorse del sito Web e dell'intercettazione delle richieste di rete, il che porta alla disponibilità offline del sito Web e a varie altre funzionalità, comprese le notifiche push.

Anche gli operatori di servizio aiutano enormemente in background. Oltre a offrire funzionalità offline, sono anche responsabili di gran parte dei calcoli pesanti, motivo principale per cui la maggior parte dei siti Web PWA sono così efficienti e caricano rapidamente.

Abbiamo scritto una guida approfondita su cos'è l'app Web progressiva. Quindi non puoi perderlo!

Come sono simili?

Essendo sia tecnologie nuove che rivoluzionarie, queste due architetture offrono all'utente un'esperienza coinvolgente simile a un'app che è molto diversa dai siti Web tradizionali. A prima vista, possono essere facilmente scambiati l'uno per l'altro; i processi sottostanti che rendono possibili tutte queste esperienze, tuttavia, non sono gli stessi.

Qual è la differenza?

C'è un malinteso comune sul fatto che una PWA sia quasi sempre una SPA, il che è semplicemente sbagliato. Dai requisiti PWA di cui sopra, potresti vedere che da nessuna parte viene affermato che il contenuto del suo sito Web deve essere visualizzato nel browser o che una PWA non dovrebbe richiedere pagine renderizzate dal server.

Una PWA è, in poche parole, un sito Web che ha tutte le migliori qualità che il Web ha da offrire. È affidabile, veloce e coinvolgente.

E poiché le PWA richiedono operatori di servizio che vengono eseguiti in un thread separato dall'interfaccia utente, le PWA differiscono in modo tale che i loro contenuti vengono sempre visualizzati quasi istantaneamente , a differenza delle SPA che quasi sempre accompagnano una schermata di caricamento iniziale specifica per il pre-lettura dei siti risorse. Ciò significa che la maggior parte, se non tutto, l'abbondante sovraccarico JavaScript che il framework JavaScript SPA inserisce nelle tue app Web può invece essere riallocato al lavoratore del servizio.

Ovviamente, le differenze tra questi due non sono solo quelle, ce ne sono molte altre da analizzare:

In termini di velocità

Per quanto riguarda la velocità, queste due architetture sono abbastanza simili poiché sono entrambe tecnologie all'avanguardia. Il vantaggio, tuttavia, potrebbe andare a PWA qui.

La ragione di ciò è perché, mentre sia le SPA che le PWA utilizzano JavaScript per i loro sviluppi, PWA è in grado di sfruttare i suoi addetti ai servizi per eseguire alcuni dei lavori. In altre parole, gran parte dell'eccessivo sovraccarico JavaScript che le SPA aggiungono alle app Web può invece essere delegato agli addetti ai servizi, riducendo così notevolmente l'impronta JavaScript.

Ciò consente ai siti PWA di memorizzare nella cache molte risorse del sito: script, CSS, immagini e markup prima che siano richiesti. Grazie a queste pre-cache, la rete dell'utente viene alleggerita dalle sollecitazioni aggiuntive che derivano dal rendering e può lavorare offline.

In termini di Costo

Ecco dove PWA perde contro SPA. Possedendo una tecnologia all'avanguardia, PWA ha di conseguenza un costo aggiuntivo. Questo per non parlare del fatto che lo sviluppo di PWA spesso dura settimane o addirittura mesi, poiché non è un processo così snello rispetto agli SPA.

PWA : $ 2000 – $ 20.000

SPA : $ 1500 – $ 12.000

Ci sono molti fattori in gioco che influenzano i tuoi costi di costruzione, come la tariffa del tuo sviluppatore, la complessità del lavoro, le tue preferenze e personalizzazioni... tutti elementi che dovrebbero essere presi in considerazione quando si effettua una stima dei costi.

 Letture consigliate: Quanto costa costruire una PWA Magento?

In termini di esperienza utente/interfaccia utente

Mentre le SPA avevano avuto il loro posto in passato, le persone stanno iniziando a convertirsi alle PWA poiché offrono una migliore esperienza utente (UX).

Entrambi dotati di un'interfaccia simile a un'app, PWA offre maggiore coinvolgimento e affidabilità anche in condizioni di connessione offline o lenta. Per questi motivi, marchi influenti come Twitter hanno avviato il movimento The PWA rilasciando la propria versione PWA del loro sito, che è Twitter Lite.

E non è solo Twitter. Il movimento PWA dovrebbe essere qui per restare; in più con la recente partecipazione di Spotify, il movimento non sembra mostrare alcun segno di rallentamento a breve.

L'applicazione a pagina singola ha il suo limite di non essere in grado di fornire un'esperienza utente soddisfacente su grandi siti, motivo per cui funziona meglio per i siti orientati ai dati e non necessariamente visivamente sbalorditivi come Gmail e Facebook.

In termini di sicurezza

La sicurezza è un argomento delicato. Sebbene sia PWA che SPA utilizzino JavaScript come libreria principale per gli sviluppi, i loro problemi relativi alla sicurezza differiscono molto, la maggior parte dei quali proviene da SPA e dal suo problema XSS (cross-site scripting).

Alla PWA vengono sollevate molte meno preoccupazioni relative alla sicurezza poiché è nella natura dell'app Web progressiva che tutte le connessioni debbano passare attraverso un'origine HTTPS sicura. Come le PWA, anche HTTPS è il futuro del Web, attraverso il quale funzionalità all'avanguardia come gli operatori dei servizi sono rese accessibili e possibili.

In termini di Accessibilità

Rispetto alle SPA, le PWA sono generalmente più accessibili, soprattutto con il recente supporto di Chrome per le PWA desktop. Gli utenti che interagiscono con le PWA possono avere la possibilità di aggiungere un collegamento dell'app che stanno utilizzando alla schermata iniziale o al desktop.

Le SPA sono in realtà terribili quando si tratta di accessibilità poiché hanno la tendenza a lasciare il proprio utente in mezzo al nulla ogni volta che viene eseguita una transizione di pagina. Ciò è particolarmente frustrante per gli utenti con disabilità poiché nessun attributo aria o ruolo sarà in grado di aiutarli se la pagina continua a cambiare completamente la sua struttura DOM (Document Object Model).

Avvolgendo

Per quanto rivoluzionarie potessero essere le SPA, il tempo sembra aver lentamente recuperato. Sebbene le SPA e le PWA siano più o meno la stessa cosa, sempre più persone scelgono le PWA rispetto alle SPA e questo è comprensibile, dati i vantaggi che le PWA apportano.

Con SimiCart, offriamo la migliore soluzione PWA per i commercianti Magento.