1
00:00:03,609 --> 00:00:09,108
Consentitemi ora di darvi una breve panoramica delle applicazioni a pagina singola.

2
00:00:09,108 --> 00:00:11,415
Cosa sono le applicazioni a pagina singola? In che

3
00:00:11,415 --> 00:00:16,080
modo sono diversi dai siti web che potresti aver sviluppato in precedenza?

4
00:00:16,080 --> 00:00:21,405
Ad esempio, il sito web che hai sviluppato nel corso precedente di questa specializzazione,

5
00:00:21,405 --> 00:00:26,854
dove avevi più pagine - perché le applicazioni a pagina singola sono interessanti

6
00:00:26,854 --> 00:00:29,300
e di cosa devi essere consapevole

7
00:00:29,300 --> 00:00:32,548
quando stai progettando applicazioni a pagina singola?

8
00:00:32,548 --> 00:00:37,606
Questa lezione non è destinata ad essere un intero trattato sulle Applicazioni a Pagina Singola,

9
00:00:37,606 --> 00:00:40,159
ma in realtà, ti dà abbastanza introduzione

10
00:00:40,159 --> 00:00:44,375
per iniziare a pensare alle Applicazioni a Pagina Singola,

11
00:00:44,375 --> 00:00:47,509
specialmente nel contesto di Angular.

12
00:00:47,509 --> 00:00:53,409
Prima di comprendere le applicazioni a pagina singola, facciamo un passo indietro

13
00:00:53,409 --> 00:00:56,335
e vediamo come funzionano i siti Web tradizionali.

14
00:00:56,335 --> 00:00:59,695
Nei siti web tradizionali, finora - se visiti un sito web,

15
00:00:59,695 --> 00:01:02,774
potresti richiedere l'accesso a una pagina particolare.

16
00:01:02,774 --> 00:01:06,691
Ad esempio,

17
00:01:06,691 --> 00:01:10,600
quando si accede al sito Web verrà richiesta una pagina index.html,

18
00:01:10,600 --> 00:01:12,879
facendo clic su un link

19
00:01:12,879 --> 00:01:19,855
o digitando l'indirizzo del sito Web nella barra degli indirizzi del browser.

20
00:01:19,855 --> 00:01:23,950
Quindi, in genere, la pagina index.html è la prima

21
00:01:23,950 --> 00:01:27,140
che si recupera quando si visita un sito Web.

22
00:01:27,140 --> 00:01:30,894
E quando la pagina viene scaricata dal server al tuo browser -

23
00:01:30,894 --> 00:01:33,989
e quindi questo verrà visualizzato nel tuo browser.

24
00:01:33,989 --> 00:01:39,109
Ora questo potrebbe includere non solo la pagina index.html, ma anche altre risorse

25
00:01:39,109 --> 00:01:44,224
che potrebbero essere necessarie per essere scaricate per costruire la pagina index.html.

26
00:01:44,224 --> 00:01:49,239
In questo caso, la pagina index.html potrebbe richiedere ulteriori risorse,

27
00:01:49,239 --> 00:01:57,935
come immagini o dati, da scaricare prima che la pagina indice possa essere costruita.

28
00:01:57,935 --> 00:02:02,980
Ma ora, successivamente, se navighi su un'altra pagina del tuo sito web

29
00:02:02,980 --> 00:02:07,073
- ad esempio, un'altra pagina come contactus.html,

30
00:02:07,073 --> 00:02:14,259
ciò comporterà il tuo browser invierà un'altra richiesta

31
00:02:14,259 --> 00:02:16,930
al server per recuperare quella seconda pagina.

32
00:02:16,930 --> 00:02:19,960
Quindi avvierà un'intera richiesta al server

33
00:02:19,960 --> 00:02:22,479
e tutte le risorse necessarie per costruire

34
00:02:22,479 --> 00:02:27,560
la seconda pagina dovranno essere scaricate dal server.

35
00:02:27,560 --> 00:02:30,745
Quindi, mentre ti sposti da una pagina all'altra,

36
00:02:30,745 --> 00:02:34,819
coinvolgerà ogni nuova pagina da caricare dal server

37
00:02:34,819 --> 00:02:37,705
e ciò comporterebbe un tempo di andata e ritorno

38
00:02:37,705 --> 00:02:42,099
al server per recuperare tutte le risorse necessarie per costruire quelle pagine.

39
00:02:42,099 --> 00:02:45,025
Ora immagina che il tuo sito web abbia molte pagine.

40
00:02:45,025 --> 00:02:48,310
Quindi, ovviamente, ogni singolo pezzo che la tua

41
00:02:48,310 --> 00:02:54,025
pagina web richiede per il rendering richiederà un tempo di andata e ritorno completo ai server.

42
00:02:54,025 --> 00:02:58,685
Quello che vorresti notare è - spesso è che molte di queste pagine hanno molto in comune.

43
00:02:58,685 --> 00:03:00,444
Forse, ad esempio, l'intestazione

44
00:03:00,444 --> 00:03:05,275
e il piè di pagina e qualche altra informazione sono tutti comuni in tutte queste pagine.

45
00:03:05,275 --> 00:03:09,875
Tuttavia, ogni singola nuova richiesta di pagina richiederà

46
00:03:09,875 --> 00:03:15,051
di andare a recuperare l'intera pagina dal server.

47
00:03:15,051 --> 00:03:22,150
Ora con l'uso della memorizzazione nella cache sul sito del browser, è possibile mitigare alcuni di questi problemi

48
00:03:22,150 --> 00:03:28,740
riutilizzando le risorse già recuperate dalla cache; tuttavia,

49
00:03:28,740 --> 00:03:33,189
ogni nuova pagina che si naviga richiederà un'intera pagina

50
00:03:33,189 --> 00:03:35,830
per essere ricaricata dal sito server.

51
00:03:35,830 --> 00:03:40,240
Le applicazioni a pagina singola affrontano questo problema in un modo diverso.

52
00:03:40,240 --> 00:03:44,289
In un'applicazione a pagina singola, in genere abbiamo sviluppato un'applicazione web in

53
00:03:44,289 --> 00:03:49,955
modo che quando il browser naviga al sito web,

54
00:03:49,955 --> 00:03:55,384
allora questo richiederà per l'applicazione web da scaricare dal sito server.

55
00:03:55,384 --> 00:03:59,472
Quindi questo sarà, ad esempio, contenuto in una pagina master come index.html,

56
00:03:59,472 --> 00:04:02,860
che attiverà un intero set di risorse

57
00:04:02,860 --> 00:04:09,553
che sono necessari per il rendering dell'app Web da scaricare sul sito client.

58
00:04:09,553 --> 00:04:14,199
Ora il modo in cui queste risorse sono confezionate dipende da come si progetta l'applicazione Web

59
00:04:14,199 --> 00:04:18,439
e anche da quale framework si utilizza per progettare l'applicazione Web.

60
00:04:18,439 --> 00:04:26,805
Tuttavia, hai un singolo download di grandi dimensioni all'inizio della tua applicazione web.

61
00:04:26,805 --> 00:04:32,020
Le modifiche successive al sito client, ad esempio,

62
00:04:32,020 --> 00:04:36,160
avviate con un clic su un link, avvieranno una nuova richiesta al sito server; ma in questo caso,

63
00:04:36,160 --> 00:04:42,550
molto spesso, si scaricano solo alcuni dati, forse sotto forma di dati JSON,

64
00:04:42,550 --> 00:04:45,745
dal sito server.

65
00:04:45,745 --> 00:04:52,060
Quindi, in questo caso, ognuno di questi potrebbe richiedere solo l'accesso al server

66
00:04:52,060 --> 00:04:54,839
solo per scaricare i dati JSON, ad esempio,

67
00:04:54,839 --> 00:05:00,009
che potrebbero consentire di eseguire completamente il rendering della nuova vista

68
00:05:00,009 --> 00:05:03,240
nell'applicazione a pagina singola.

69
00:05:03,240 --> 00:05:07,329
Quindi il download della pagina iniziale, il download iniziale dell'applicazione, ovviamente,

70
00:05:07,329 --> 00:05:11,218
è sempre lì, ma la maggior parte delle interazioni successive con il server

71
00:05:11,218 --> 00:05:17,050
sarà semplicemente per il download dei dati, in genere sotto forma di JSON o XML,

72
00:05:17,050 --> 00:05:20,930
a seconda di come si progetta il formato dei dati.

73
00:05:20,930 --> 00:05:22,720
E una volta scaricati i dati,

74
00:05:22,720 --> 00:05:27,865
questi dati possono essere utilizzati per rendere la nuova vista all'interno dell'applicazione.

75
00:05:27,865 --> 00:05:29,259
Quindi, in queste circostanze,

76
00:05:29,259 --> 00:05:33,870
risparmierai un sacco di tempo di andata e ritorno al server per scaricare molte risorse.

77
00:05:33,870 --> 00:05:38,680
Naturalmente, il caricamento iniziale della pagina richiede una certa quantità di lavoro da eseguire,

78
00:05:38,680 --> 00:05:44,394
ma le richieste successive possono riguardare quantità molto piccole di dati.

79
00:05:44,394 --> 00:05:52,037
E questa, infatti, è la caratteristica significativa delle applicazioni a pagina singola.

80
00:05:52,037 --> 00:05:58,310
Ora con il pre-rendering di alcune delle loro viste sul sito del server stesso,

81
00:05:58,310 --> 00:06:05,925
è anche possibile mitigare parte del tempo di download iniziale per la vostra applicazione web.

82
00:06:05,925 --> 00:06:07,730
Così anche Angular, per esempio,

83
00:06:07,730 --> 00:06:13,853
consente di pre-rendering parte della prima vista sul sito server

84
00:06:13,853 --> 00:06:20,783
per consentire la visualizzazione delle informazioni al client rapidamente,

85
00:06:20,783 --> 00:06:26,995
mentre il resto dell'applicazione web viene scaricato dal browser.

86
00:06:26,995 --> 00:06:31,314
Quindi possiamo riassumere che Single Page Applications

87
00:06:31,314 --> 00:06:35,060
come applicazione web su un sito web che si inserisce in una singola pagina - ancora una volta,

88
00:06:35,060 --> 00:06:40,805
dare o prendere - voi - sapete, non interpretare troppo letteralmente.

89
00:06:40,805 --> 00:06:44,389
Quindi non è necessario ricaricare nuovamente un'intera pagina.

90
00:06:44,389 --> 00:06:49,620
Quindi questa è la caratteristica significativa di un'applicazione a pagina singola.

91
00:06:49,620 --> 00:06:54,139
Inoltre, le applicazioni a pagina singola consentono di offrire un'esperienza utente

92
00:06:54,139 --> 00:06:59,435
più vicina al lavoro che vedono con le applicazioni desktop.

93
00:06:59,435 --> 00:07:02,930
Una volta scaricata l'app Web iniziale; in seguito, la

94
00:07:02,930 --> 00:07:11,475
maggior parte delle altre interazioni sembrerebbe che tu stia interagendo con un'applicazione desktop.

95
00:07:11,475 --> 00:07:15,959
Quindi, per riassumere ciò che abbiamo appena imparato, cos'è un'applicazione a pagina singola?

96
00:07:15,959 --> 00:07:21,069
Un' applicazione a pagina singola è un'applicazione web o un sito Web che si inserisce in una singola pagina.

97
00:07:21,069 --> 00:07:26,670
Non è necessario ricaricare l'intera pagina ogni volta che un utente interagisce

98
00:07:26,670 --> 00:07:28,362
con l'applicazione.

99
00:07:28,362 --> 00:07:34,574
L' UX è più simile a un desktop o un'applicazione nativa.

100
00:07:34,574 --> 00:07:37,199
La maggior parte delle risorse necessarie per l'applicazione

101
00:07:37,199 --> 00:07:42,699
viene scaricata alla prima istanza stessa, con il caricamento della prima pagina.

102
00:07:42,699 --> 00:07:45,720
Successivamente, vengono ridisegnate solo parti della pagina, in

103
00:07:45,720 --> 00:07:53,540
base a come avviene l'interazione dell'utente senza richiedere un round trip completo del server,

104
00:07:53,540 --> 00:07:58,889
per recuperare tutte le risorse necessarie.

105
00:07:58,889 --> 00:08:04,644
Naturalmente, questo non arriva senza la propria serie di problemi che devono essere affrontati.

106
00:08:04,644 --> 00:08:07,740
Quindi, quando si progettano applicazioni a pagina singola, una delle prime cose

107
00:08:07,740 --> 00:08:11,609
che le persone spesso interrogano sulle applicazioni a pagina singola

108
00:08:11,609 --> 00:08:14,444
è che non sono ottimizzate per i motori di ricerca.

109
00:08:14,444 --> 00:08:19,225
Quindi l'ottimizzazione dei motori di ricerca è una parte importante che deve essere affrontata.

110
00:08:19,225 --> 00:08:20,579
Quindi, se hai motori di ricerca

111
00:08:20,579 --> 00:08:24,795
che eseguono la scansione del tuo sito web per estrarre dati e informazioni

112
00:08:24,795 --> 00:08:28,889
indicizzate, le applicazioni a pagina singola potrebbero non essere necessariamente cooperative in questo caso.

113
00:08:28,889 --> 00:08:33,230
Ma anche l'ottimizzazione dei motori di ricerca con gli attuali framework di dati,

114
00:08:33,230 --> 00:08:40,680
come Angular, sono arrivati lungo la strada che anche con Single Page Application,

115
00:08:40,680 --> 00:08:47,940
i motori di ricerca possono essenzialmente indicizzare molte delle informazioni

116
00:08:47,940 --> 00:08:50,621
che la tua applicazione web serve.

117
00:08:50,621 --> 00:08:59,009
Il secondo problema da risolvere è quanto della costruzione web dovrebbe essere scaricata

118
00:08:59,009 --> 00:09:02,750
sul sito client anziché sul sito server.

119
00:09:02,750 --> 00:09:07,500
Quindi il server agisce praticamente come origine dati nelle applicazioni a pagina singola

120
00:09:07,500 --> 00:09:10,644
e gran parte del lavoro viene scaricato sul sito client.

121
00:09:10,644 --> 00:09:11,840
Da un punto di vista,

122
00:09:11,840 --> 00:09:18,782
questo ti dà un modo molto più scalabile di consegnare la

123
00:09:18,782 --> 00:09:24,037
tua applicazione web al tuo sito client, perché gran parte del lavoro di rendering viene eseguito sul sito client.

124
00:09:24,037 --> 00:09:31,649
Ora è possibile ottimizzare questo in una certa misura per compensare

125
00:09:31,649 --> 00:09:34,399
il download iniziale dell'applicazione Web

126
00:09:34,399 --> 00:09:37,034
dal sito server eseguendo parte del rendering sul sito server.

127
00:09:37,034 --> 00:09:40,559
Come ho detto, Angular ti offre l'opportunità

128
00:09:40,559 --> 00:09:45,120
di farlo con il rendering parziale del sito server

129
00:09:45,120 --> 00:09:48,889
della tua vista iniziale della tua applicazione.

130
00:09:48,889 --> 00:09:53,460
Il terzo aspetto è come mantenere la cronologia, quindi quando fai clic su un pulsante Indietro

131
00:09:53,460 --> 00:09:56,789
o su un pulsante Avanti, dove porteresti l'utente?

132
00:09:56,789 --> 00:09:59,759
Salvate abbastanza informazioni

133
00:09:59,759 --> 00:10:06,083
che sarete in grado di navigare tra le diverse viste della vostra applicazione e così via?

134
00:10:06,083 --> 00:10:08,985
Quindi questa è una cosa che devi tenere a mente.

135
00:10:08,985 --> 00:10:16,975
Naturalmente, poiché il router angolare sfrutta l'API della cronologia di cinque pagine html,

136
00:10:16,975 --> 00:10:21,649
quindi è in grado di risolvere questo problema in larga misura.

137
00:10:21,649 --> 00:10:25,139
L' ultima domanda che abbiamo è l'analisi.

138
00:10:25,139 --> 00:10:29,804
In che modo supportate le analisi sulla vostra pagina web?

139
00:10:29,804 --> 00:10:33,850
Come si raccolgono i dati analitici e così via?

140
00:10:33,850 --> 00:10:39,235
E anche, come ho accennato in precedenza, accelerare il caricamento iniziale

141
00:10:39,235 --> 00:10:44,924
della pagina è qualcosa che preoccupa quando si progetta la propria applicazione web.

142
00:10:44,924 --> 00:10:46,764
Ora con Angular, come ho detto,

143
00:10:46,764 --> 00:10:52,449
eseguire il rendering parziale sul lato server accelererà il caricamento iniziale della pagina

144
00:10:52,449 --> 00:10:57,610
sul sito client mentre il resto dell'applicazione Web

145
00:10:57,610 --> 00:11:00,735
viene scaricato sul sito client.

146
00:11:00,735 --> 00:11:07,120
Quindi puoi mascherare un po 'del tempo di download iniziale per l'applicazione web

147
00:11:07,120 --> 00:11:10,730
eseguendo il rendering parziale dal sito del server stesso.

148
00:11:10,730 --> 00:11:13,701
Con queste idee di base in mente,

149
00:11:13,701 --> 00:11:19,120
andiamo ora ad esplorare come Angular supporta le applicazioni a pagina singola.

150
00:11:19,120 --> 00:11:22,450
Abbiamo già incorporato il router angolare

151
00:11:22,450 --> 00:11:25,375
nella nostra applicazione Angular nell'esercizio precedente.

152
00:11:25,375 --> 00:11:28,879
Negli esercizi successivi di questa lezione

153
00:11:28,879 --> 00:11:34,315
e assegnazione, completeremo lo sviluppo dell'applicazione a pagina singola

154
00:11:34,315 --> 00:11:41,139
su cui abbiamo lavorato finora in questo corso.