Articles

Angular Single Page Applications (SPA): Quali sono i vantaggi?

Ottobre 13, 2020 by admin

In questo post, tratteremo i principali vantaggi dell’adozione di un’architettura SPA durante la costruzione delle nostre applicazioni angolari e risponderemo ad alcune domande molto comuni riguardanti le SPA in generale.

Questo post fa parte della serie Angular for Beginners in corso, ecco la serie completa:

Angular For Beginners Guide – Getting Started (Setup Environment)
Angular For Beginners Guide: Why Angular?, I principali vantaggi
Angolare per principianti Guida-Componenti vs direttive
Perché una singola applicazione pagina, Quali sono i vantaggi? Che cos’è una SPA?

Perché l’architettura SPA?

Iniziamo con la prima domanda: perché le applicazioni a pagina singola (SPA)? Questo tipo di applicazioni sono stati intorno per anni, ma non sono ancora diventati diffusi in Internet pubblica.

E perché?

C’è sia una buona ragione per questo che una ragione ancora migliore sul perché ciò potrebbe cambiare nel prossimo futuro.,

Le SPA sono state adottate molto negli ultimi anni per la creazione della parte dashboard privata delle piattaforme SaaS (Software as a Service) o dei servizi Internet in generale, nonché per la creazione di applicazioni aziendali basate sui dati e ad alta intensità di moduli.

Ma Angular applica quindi la creazione delle nostre applicazioni come SPA?

La risposta è no, non lo fa, ma questa è una possibilità interessante che porta, dati i molti vantaggi di costruire un’applicazione in quel modo. Il che ci porta a una domanda chiave:

Perché vorresti creare un’applicazione come SPA?,

Questo è qualcosa che viene spesso dato per scontato. Tutti stanno costruendo applicazioni in questo modo, ma qual è il grande vantaggio di questo? Ci devono essere almeno un paio di caratteristiche killer, giusto?

Iniziamo con una caratteristica che non viene menzionata molto spesso: la distribuzione della produzione.

Comprendere i vantaggi dell’uso SPA in produzione risponderà anche alla domanda chiave:

Cos’è un’applicazione a pagina singola?

A volte i nomi nello sviluppo del software non sono ben scelti e ciò può portare a molta confusione., Questo non è certamente il caso del termine SPA: un’applicazione a pagina singola ha letteralmente una sola pagina !! 😊

Se vuoi vedere un’applicazione a pagina singola in azione, ti invito a dirigerti verso AngularUnivhttps://angular-university.io e inizia a fare clic sulla home page nell’elenco degli ultimi corsi e nel menu in alto.

Se inizi a navigare, vedrai che la pagina non si ricarica completamente – solo i nuovi dati vengono inviati via cavo mentre l’utente naviga attraverso l’applicazione – questo è un esempio di un’applicazione a pagina singola.,

Lascia che ti spieghi qual è il vantaggio di creare un’applicazione del genere e come funziona.

Usando gli strumenti di sviluppo di Chrome, ispezioniamo l’indice.html del sito web AngularUniv che viene scaricato sulla home page (o qualsiasi altra pagina, se si naviga e ha colpito aggiorna).

La pagina che viene scaricata è la prima richiesta che vedrai nel pannello della scheda Chrome Network – che è letteralmente la singola pagina della nostra applicazione.

Notiamo una cosa: questa pagina è quasi vuota! Fatta eccezione per il tag, non c’è molto da fare qui.,

Nota: sul sito la pagina scaricato dispone inoltre di HTML che è stato pre-renderizzati sul server, utilizzando Angolare Universale

si Noti anche i nomi dei CSS e Javascript bundle: Tutti i CSS e anche tutto il codice Javascript dell’applicazione (che comprende Angolare) non è nemmeno venuta dallo stesso server come il index.html questo è venuta da un altro server statico:

In questo caso, i due fasci sono in realtà provenienti da un secchio Amazon S3!,

Inoltre, si noti che il nome dei bundle è versioned: contiene il timestamp in cui è stata eseguita la build di distribuzione che ha distribuito questa particolare versione dell’applicazione.

I vantaggi della distribuzione di produzione delle applicazioni a pagina singola

Lo scenario che abbiamo visto sopra è in realtà un vantaggio piuttosto interessante delle applicazioni a pagina singola:

Le applicazioni a pagina singola sono super facili da implementare in produzione e persino da versione nel tempo!,

Un’applicazione a pagina singola è semplicissima da distribuire rispetto alle più tradizionali applicazioni renderizzate lato server: in realtà è solo un file index.html, con un bundle CSS e un bundle Javascript.

Questi 3 file statici possono essere caricati su qualsiasi server di contenuto statico come Apache, Nginx, Amazon S3 o Firebase Hosting.

Ovviamente l’applicazione dovrà effettuare chiamate al backend per ottenere i suoi dati, ma questo è un server separato che può essere costruito se necessario con una tecnologia completamente diversa: come Node, Java o PHP.,

In realtà, se costruissimo la nostra API REST o un altro tipo di backend nel nodo, potremmo persino costruirlo anche in Typescript, e quindi essere in grado di usare la stessa lingua sia sul server che sul client, e persino condividere del codice tra di loro.

Versioning dell’applicazione a pagina singola in produzione

Un altro vantaggio della distribuzione del nostro frontend come applicazione a pagina singola è il versioning e il rollback. Tutto quello che dobbiamo fare è la versione del nostro output di build (che produce i bundle CSS e JS evidenziati in giallo sopra).,

Possiamo configurare il server che serve la nostra SPA con un parametro che specifica quale versione dell’applicazione frontend costruire: è così semplice!

Questo tipo di distribuzione scala molto bene: i server di contenuti statici come Nginx possono scalare per un numero molto elevato di utenti.

Naturalmente, questo tipo di distribuzione e versioning è valido solo per la parte frontend della nostra applicazione, questo non si applica al server backend. Ma ancora, è un vantaggio importante avere.

Ma la distribuzione della produzione è l’unico vantaggio delle applicazioni a pagina singola?, Certamente no, qui è un altro vantaggio importante:

Singola Pagina Applicazioni E l’Esperienza Utente

Se avete mai usato un applicazione web che è sempre ricaricare tutto dal server su quasi ogni interazione dell’utente, è possibile sapere che tipo di applicazione che fornisce un’esperienza utente scarsa a causa di:

la costante a piena pagina di ricarica
anche grazie alla rete e indietro trip al server per recuperare tutto ciò che HTML.,

In un’applicazione a pagina singola, abbiamo risolto questo problema, utilizzando un approccio architettonico fondamentalmente diverso:

Su una SPA, dopo il caricamento iniziale della pagina, non viene inviato più HTML attraverso la rete. Invece, solo i dati vengono richiesti dal server (o inviati al server).

Quindi, mentre una SPA è in esecuzione, solo i dati vengono inviati sul filo, il che richiede molto meno tempo e larghezza di banda rispetto all’invio costante di HTML. Diamo un’occhiata al tipo di carico utile che va oltre il filo tipicamente in una SPA.,

Ad esempio, nel AngularUniv SPA, se si fa clic su un corso, nessun HTML verrà inviato sul filo. Invece, otteniamo una richiesta Ajax che riceve un payload JSON con tutti i dati:

Come si può vedere, la versione HTML di un corso sarebbe molto più grande di dimensioni rispetto ad un normale oggetto JSON a causa di tutti i tag di apertura e chiusura, ma c’è anche un sacco di duplicati HTML, se siamo costantemente il caricamento di pagine simili più e più volte.

Ad esempio, cose come le intestazioni e i piè di pagina di una pagina vengono costantemente inviate al browser ma non sono realmente cambiate.,

Quindi, con questo, abbiamo qui un secondo grande vantaggio di un’applicazione a pagina singola: un’esperienza utente molto migliorata a causa di meno ricariche a pagina intera e di prestazioni complessive migliori perché è necessaria meno larghezza di banda.

Quindi perché non usiamo le SPA ovunque allora?

Se le SPA hanno così tanti vantaggi, perché non sono state adottate su scala più ampia su Internet pubblico? C’è una buona ragione per questo.

Fino a tempi relativamente recenti, i motori di ricerca come Google avevano difficoltà a indicizzare correttamente un’applicazione a pagina singola. Ma che dire di oggi?,

In passato, c’erano alcune raccomandazioni per utilizzare uno speciale schema di scansione Ajax che è stato nel frattempo deprecato. Quindi Google ora è in grado di rendere completamente Ajax?

In un annuncio ufficiale, abbiamo le informazioni che Google search è ora generalmente in grado di eseguire la scansione Ajax, ma ci sono alcuni rapporti che non è ancora completamente in grado di farlo.

E la raccomandazione è di utilizzare invece il miglioramento progressivo. Quindi cosa significa, in questa fase è possibile utilizzare le SPA nell’Internet pubblico o non ancora?

Motore di ricerca Centri benessere?,

È possibile avere le prestazioni e l’esperienza utente di un centro BENESSERE con buona SEO proprietà: l’uso della Angolare Universale pre-rendering engine permette di:

il pre-rendering di un’applicazione sul backend
nave HTML al browser insieme con Angolare
e hanno Angolare di bootstrap sul lato client e prendere in consegna la pagina di un centro BENESSERE

Sarà Terme Diventare sempre Più Frequenti In Futuro?,

Immagina una versione SEO friendly di Amazon che non si aggiornerebbe ad ogni ricarica di pagina e con prestazioni e esperienza utente molto migliorate: ciò avrebbe probabilmente un enorme impatto positivo sul tempo che i clienti trascorrono sul sito!

Quindi i vantaggi tecnici delle SPA SEO-friendly sono significativi e ancora di più su mobile, e ci aspetteremmo che questo tipo di applicazioni SPA SEO friendly diventino più frequenti in futuro anche su Internet pubblico.

Ma questo lascia l’ultima domanda di questa sezione ancora senza risposta., Devi pensare in questa fase dopo aver letto le ultime sezioni:

Se solo HTML minimo viene caricato dal server al momento dell’avvio, allora come cambia la pagina nel tempo?

Che ci porta all’ultima domanda di questa sezione, e forse la più importante:

Come funziona anche l’applicazione a pagina singola?

In effetti, come possono funzionare perché abbiamo caricato solo pochissimo HTML dal server? Una volta avviata l’applicazione, solo i dati passano oltre il filo. Quindi, come viene il nuovo HTML?,

Perché ci deve essere un nuovo HTML generato da qualche parte, in quanto è l’unico modo in cui il browser cambierà ciò che sta visualizzando, giusto?

La risposta è semplice e ha a che fare con il modo in cui le applicazioni a pagina singola funzionano effettivamente rispetto alle tradizionali applicazioni basate su server.

Su un’applicazione tradizionale (che include la stragrande maggioranza di Internet pubblico di oggi), la trasformazione dei dati in HTML (o rendering) viene eseguita sul lato server.,

d’altra parte, Singola pagina applicazioni di farlo in un modo molto diverso:

In una vasca dopo l’avvio dell’applicazione, i dati in formato HTML processo di trasformazione è stato spostato dal server al client Terme sono l’equivalente di un motore di template in esecuzione nel browser!

E così con queste informazioni in mano, concludiamo questa sezione riassumendo i punti chiave sulle applicazioni a pagina singola.,– Vantaggi di Terme e il Concetto Chiave Su Come Funzionano

Costruire la nostra applicazione come una SPA ci darà un significativo numero di vantaggi:

Si sarà in grado di portare una migliore esperienza per l’utente
L’applicazione si sentirà più veloce perché meno larghezza di banda viene utilizzata, e non full refresh di pagina, si stanno verificando che l’utente passa attraverso l’applicazione
L’applicazione sarà molto più facile da distribuire in produzione, almeno certamente la parte client: tutti abbiamo bisogno è un server statico per servire un minimo di 3 file: la nostra singola pagina di indice.,html, un pacchetto CSS e un pacchetto Javascript.
Possiamo anche dividere i bundle in più parti, se necessario, utilizzando la divisione del codice.
La parte frontend dell’applicazione è molto semplice per la versione in produzione, consentendo la distribuzione semplificata e il rollback alla versione precedente del frontend se necessario

E questo solo un possibile scenario di distribuzione delle SPA in produzione.,

Altri scenari di produzione

Altri scenari includono il pre-rendering di grandi parti dell’applicazione e il caricamento di tutto su un server di hosting statico, il caching in memoria sul server di solo alcune pagine, il controllo delle versioni tramite DNS, ecc.

Oggi è più semplice che mai rendere le SPA SEO-friendly, quindi probabilmente avranno una maggiore adozione in futuro, in scenari in cui le SPA non sono state utilizzate frequentemente.,

Il modo in cui funzionano le SPA

Il modo in cui le applicazioni a pagina singola apportano questi vantaggi è legato al modo in cui funzionano internamente:

Dopo l’avvio, solo i dati vengono inviati sul filo come payload JSON o qualche altro formato. Ma nessun HTML o CSS viene inviato più sul filo dopo che l’applicazione è in esecuzione.,

Il punto chiave per capire come funzionano le applicazioni a pagina singola è il seguente:

invece di convertire i dati in HTML sul server e quindi inviarli via cavo, in una SPA abbiamo ora spostato quel processo di conversione dal server al client.

La conversione avviene all’ultimo secondo sul lato client, il che ci consente di offrire all’utente un’esperienza utente molto migliore.

Spero che questo ti convinca dei vantaggi delle SPA., In caso contrario, per favore fatemelo sapere e perché non è così, quindi posso sviluppare meglio alcuni dei punti.

Inoltre, in questa fase voglio mostrarti subito del codice. Costruiamo una piccola SPA Hello World in Angular, e prendiamola da lì. Stiamo andando a vedere come i concetti che abbiamo introdotto mappa per la piccola applicazione che stiamo per costruire.

Spero che questo post abbia aiutato a capire i principali vantaggi delle SPA e che ti sia piaciuto!,