Consentitemi ora di darvi una breve panoramica delle applicazioni a pagina singola.
Cosa sono le applicazioni a pagina singola? In che
modo sono diversi dai siti web che potresti aver sviluppato in precedenza?
Ad esempio, il sito web che hai sviluppato nel corso precedente di questa specializzazione,
dove avevi più pagine - perché le applicazioni a pagina singola sono interessanti
e di cosa devi essere consapevole
quando stai progettando applicazioni a pagina singola?
Questa lezione non è destinata ad essere un intero trattato sulle Applicazioni a Pagina Singola,
ma in realtà, ti dà abbastanza introduzione
per iniziare a pensare alle Applicazioni a Pagina Singola,
specialmente nel contesto di Angular.
Prima di comprendere le applicazioni a pagina singola, facciamo un passo indietro
e vediamo come funzionano i siti Web tradizionali.
Nei siti web tradizionali, finora - se visiti un sito web,
potresti richiedere l'accesso a una pagina particolare.
Ad esempio,
quando si accede al sito Web verrà richiesta una pagina index.html,
facendo clic su un link
o digitando l'indirizzo del sito Web nella barra degli indirizzi del browser.
Quindi, in genere, la pagina index.html è la prima
che si recupera quando si visita un sito Web.
E quando la pagina viene scaricata dal server al tuo browser -
e quindi questo verrà visualizzato nel tuo browser.
Ora questo potrebbe includere non solo la pagina index.html, ma anche altre risorse
che potrebbero essere necessarie per essere scaricate per costruire la pagina index.html.
In questo caso, la pagina index.html potrebbe richiedere ulteriori risorse,
come immagini o dati, da scaricare prima che la pagina indice possa essere costruita.
Ma ora, successivamente, se navighi su un'altra pagina del tuo sito web
- ad esempio, un'altra pagina come contactus.html,
ciò comporterà il tuo browser invierà un'altra richiesta
al server per recuperare quella seconda pagina.
Quindi avvierà un'intera richiesta al server
e tutte le risorse necessarie per costruire
la seconda pagina dovranno essere scaricate dal server.
Quindi, mentre ti sposti da una pagina all'altra,
coinvolgerà ogni nuova pagina da caricare dal server
e ciò comporterebbe un tempo di andata e ritorno
al server per recuperare tutte le risorse necessarie per costruire quelle pagine.
Ora immagina che il tuo sito web abbia molte pagine.
Quindi, ovviamente, ogni singolo pezzo che la tua
pagina web richiede per il rendering richiederà un tempo di andata e ritorno completo ai server.
Quello che vorresti notare è - spesso è che molte di queste pagine hanno molto in comune.
Forse, ad esempio, l'intestazione
e il piè di pagina e qualche altra informazione sono tutti comuni in tutte queste pagine.
Tuttavia, ogni singola nuova richiesta di pagina richiederà
di andare a recuperare l'intera pagina dal server.
Ora con l'uso della memorizzazione nella cache sul sito del browser, è possibile mitigare alcuni di questi problemi
riutilizzando le risorse già recuperate dalla cache; tuttavia,
ogni nuova pagina che si naviga richiederà un'intera pagina
per essere ricaricata dal sito server.
Le applicazioni a pagina singola affrontano questo problema in un modo diverso.
In un'applicazione a pagina singola, in genere abbiamo sviluppato un'applicazione web in
modo che quando il browser naviga al sito web,
allora questo richiederà per l'applicazione web da scaricare dal sito server.
Quindi questo sarà, ad esempio, contenuto in una pagina master come index.html,
che attiverà un intero set di risorse
che sono necessari per il rendering dell'app Web da scaricare sul sito client.
Ora il modo in cui queste risorse sono confezionate dipende da come si progetta l'applicazione Web
e anche da quale framework si utilizza per progettare l'applicazione Web.
Tuttavia, hai un singolo download di grandi dimensioni all'inizio della tua applicazione web.
Le modifiche successive al sito client, ad esempio,
avviate con un clic su un link, avvieranno una nuova richiesta al sito server; ma in questo caso,
molto spesso, si scaricano solo alcuni dati, forse sotto forma di dati JSON,
dal sito server.
Quindi, in questo caso, ognuno di questi potrebbe richiedere solo l'accesso al server
solo per scaricare i dati JSON, ad esempio,
che potrebbero consentire di eseguire completamente il rendering della nuova vista
nell'applicazione a pagina singola.
Quindi il download della pagina iniziale, il download iniziale dell'applicazione, ovviamente,
è sempre lì, ma la maggior parte delle interazioni successive con il server
sarà semplicemente per il download dei dati, in genere sotto forma di JSON o XML,
a seconda di come si progetta il formato dei dati.
E una volta scaricati i dati,
questi dati possono essere utilizzati per rendere la nuova vista all'interno dell'applicazione.
Quindi, in queste circostanze,
risparmierai un sacco di tempo di andata e ritorno al server per scaricare molte risorse.
Naturalmente, il caricamento iniziale della pagina richiede una certa quantità di lavoro da eseguire,
ma le richieste successive possono riguardare quantità molto piccole di dati.
E questa, infatti, è la caratteristica significativa delle applicazioni a pagina singola.
Ora con il pre-rendering di alcune delle loro viste sul sito del server stesso,
è anche possibile mitigare parte del tempo di download iniziale per la vostra applicazione web.
Così anche Angular, per esempio,
consente di pre-rendering parte della prima vista sul sito server
per consentire la visualizzazione delle informazioni al client rapidamente,
mentre il resto dell'applicazione web viene scaricato dal browser.
Quindi possiamo riassumere che Single Page Applications
come applicazione web su un sito web che si inserisce in una singola pagina - ancora una volta,
dare o prendere - voi - sapete, non interpretare troppo letteralmente.
Quindi non è necessario ricaricare nuovamente un'intera pagina.
Quindi questa è la caratteristica significativa di un'applicazione a pagina singola.
Inoltre, le applicazioni a pagina singola consentono di offrire un'esperienza utente
più vicina al lavoro che vedono con le applicazioni desktop.
Una volta scaricata l'app Web iniziale; in seguito, la
maggior parte delle altre interazioni sembrerebbe che tu stia interagendo con un'applicazione desktop.
Quindi, per riassumere ciò che abbiamo appena imparato, cos'è un'applicazione a pagina singola?
Un' applicazione a pagina singola è un'applicazione web o un sito Web che si inserisce in una singola pagina.
Non è necessario ricaricare l'intera pagina ogni volta che un utente interagisce
con l'applicazione.
L' UX è più simile a un desktop o un'applicazione nativa.
La maggior parte delle risorse necessarie per l'applicazione
viene scaricata alla prima istanza stessa, con il caricamento della prima pagina.
Successivamente, vengono ridisegnate solo parti della pagina, in
base a come avviene l'interazione dell'utente senza richiedere un round trip completo del server,
per recuperare tutte le risorse necessarie.
Naturalmente, questo non arriva senza la propria serie di problemi che devono essere affrontati.
Quindi, quando si progettano applicazioni a pagina singola, una delle prime cose
che le persone spesso interrogano sulle applicazioni a pagina singola
è che non sono ottimizzate per i motori di ricerca.
Quindi l'ottimizzazione dei motori di ricerca è una parte importante che deve essere affrontata.
Quindi, se hai motori di ricerca
che eseguono la scansione del tuo sito web per estrarre dati e informazioni
indicizzate, le applicazioni a pagina singola potrebbero non essere necessariamente cooperative in questo caso.
Ma anche l'ottimizzazione dei motori di ricerca con gli attuali framework di dati,
come Angular, sono arrivati lungo la strada che anche con Single Page Application,
i motori di ricerca possono essenzialmente indicizzare molte delle informazioni
che la tua applicazione web serve.
Il secondo problema da risolvere è quanto della costruzione web dovrebbe essere scaricata
sul sito client anziché sul sito server.
Quindi il server agisce praticamente come origine dati nelle applicazioni a pagina singola
e gran parte del lavoro viene scaricato sul sito client.
Da un punto di vista,
questo ti dà un modo molto più scalabile di consegnare la
tua applicazione web al tuo sito client, perché gran parte del lavoro di rendering viene eseguito sul sito client.
Ora è possibile ottimizzare questo in una certa misura per compensare
il download iniziale dell'applicazione Web
dal sito server eseguendo parte del rendering sul sito server.
Come ho detto, Angular ti offre l'opportunità
di farlo con il rendering parziale del sito server
della tua vista iniziale della tua applicazione.
Il terzo aspetto è come mantenere la cronologia, quindi quando fai clic su un pulsante Indietro
o su un pulsante Avanti, dove porteresti l'utente?
Salvate abbastanza informazioni
che sarete in grado di navigare tra le diverse viste della vostra applicazione e così via?
Quindi questa è una cosa che devi tenere a mente.
Naturalmente, poiché il router angolare sfrutta l'API della cronologia di cinque pagine html,
quindi è in grado di risolvere questo problema in larga misura.
L' ultima domanda che abbiamo è l'analisi.
In che modo supportate le analisi sulla vostra pagina web?
Come si raccolgono i dati analitici e così via?
E anche, come ho accennato in precedenza, accelerare il caricamento iniziale
della pagina è qualcosa che preoccupa quando si progetta la propria applicazione web.
Ora con Angular, come ho detto,
eseguire il rendering parziale sul lato server accelererà il caricamento iniziale della pagina
sul sito client mentre il resto dell'applicazione Web
viene scaricato sul sito client.
Quindi puoi mascherare un po 'del tempo di download iniziale per l'applicazione web
eseguendo il rendering parziale dal sito del server stesso.
Con queste idee di base in mente,
andiamo ora ad esplorare come Angular supporta le applicazioni a pagina singola.
Abbiamo già incorporato il router angolare
nella nostra applicazione Angular nell'esercizio precedente.
Negli esercizi successivi di questa lezione
e assegnazione, completeremo lo sviluppo dell'applicazione a pagina singola
su cui abbiamo lavorato finora in questo corso.