1
00:00:03,609 --> 00:00:09,108
Deixe-me agora dar-lhe uma breve visão geral dos Aplicativos de Página Única.

2
00:00:09,108 --> 00:00:11,415
O que são aplicativos de página única?

3
00:00:11,415 --> 00:00:16,080
Como eles são diferentes dos sites que você pode ter desenvolvido anteriormente?

4
00:00:16,080 --> 00:00:21,405
Por exemplo, o site que você desenvolveu no curso anterior desta especialização,

5
00:00:21,405 --> 00:00:26,854
onde você tinha várias páginas - por que aplicativos de página única são interessantes

6
00:00:26,854 --> 00:00:29,300
e o que é que você precisa estar ciente de

7
00:00:29,300 --> 00:00:32,548
quando você está projetando aplicativos de página única?

8
00:00:32,548 --> 00:00:37,606
Esta palestra não se destina a ser um tratado inteiro sobre Aplicações de Página Única,

9
00:00:37,606 --> 00:00:40,159
mas realmente, dar-lhe introdução o suficiente

10
00:00:40,159 --> 00:00:44,375
para começar a pensar em Aplicações de Página Única,

11
00:00:44,375 --> 00:00:47,509
especialmente no contexto de Angular.

12
00:00:47,509 --> 00:00:53,409
Antes de entendermos Aplicativos de Página Única, vamos dar um passo atrás

13
00:00:53,409 --> 00:00:56,335
e ver como os sites tradicionais funcionam.

14
00:00:56,335 --> 00:00:59,695
Em sites tradicionais, até agora - se você visitar um site,

15
00:00:59,695 --> 00:01:02,774
você pode estar solicitando acesso a uma página específica.

16
00:01:02,774 --> 00:01:06,691
Por exemplo, você estará solicitando uma página index.html

17
00:01:06,691 --> 00:01:10,600
quando você navegar para o site,

18
00:01:10,600 --> 00:01:12,879
clicando em um link

19
00:01:12,879 --> 00:01:19,855
ou digitando o endereço do site na barra de endereços do seu navegador.

20
00:01:19,855 --> 00:01:23,950
Portanto, normalmente, a página index.html é a primeira

21
00:01:23,950 --> 00:01:27,140
que você obtém quando visita um site.

22
00:01:27,140 --> 00:01:30,894
E quando a página é baixada do servidor para o seu navegador -

23
00:01:30,894 --> 00:01:33,989
e então isso será exibido no seu navegador.

24
00:01:33,989 --> 00:01:39,109
Agora isso pode incluir não apenas a página index.html, mas também outros recursos

25
00:01:39,109 --> 00:01:44,224
que podem ser necessários para ser baixado para construir a página index.html.

26
00:01:44,224 --> 00:01:49,239
Nesse caso, a página index.html pode exigir recursos adicionais,

27
00:01:49,239 --> 00:01:57,935
como imagens ou dados, para ser baixado antes que a página de índice possa ser construída.

28
00:01:57,935 --> 00:02:02,980
Mas agora, posteriormente, se você navegar para outra página em seu site

29
00:02:02,980 --> 00:02:07,073
- digamos, por exemplo, outra página como contactus.html,

30
00:02:07,073 --> 00:02:14,259
isso resultará em seu navegador enviando outro pedido para o servidor

31
00:02:14,259 --> 00:02:16,930
para buscar essa segunda página.

32
00:02:16,930 --> 00:02:19,960
Então ele vai iniciar um pedido inteiro para o servidor

33
00:02:19,960 --> 00:02:22,479
e todos os recursos necessários para construir

34
00:02:22,479 --> 00:02:27,560
a segunda página terá que ser baixado do servidor.

35
00:02:27,560 --> 00:02:30,745
Então, à medida que você passa de uma página para outra página,

36
00:02:30,745 --> 00:02:34,819
envolverá cada nova página a ser carregada do servidor

37
00:02:34,819 --> 00:02:37,705
e isso envolveria um tempo de ida e volta para o servidor

38
00:02:37,705 --> 00:02:42,099
para buscar todos os recursos necessários para construir essas páginas.

39
00:02:42,099 --> 00:02:45,025
Agora imagine que seu site tem muitas páginas.

40
00:02:45,025 --> 00:02:48,310
Então, obviamente, cada peça que sua página web

41
00:02:48,310 --> 00:02:54,025
requer para renderização exigirá um tempo completo de ida e volta para os servidores.

42
00:02:54,025 --> 00:02:58,685
O que você gostaria de notar é - muitas vezes é que muitas dessas páginas têm muito em comum.

43
00:02:58,685 --> 00:03:00,444
Talvez, por exemplo, o cabeçalho

44
00:03:00,444 --> 00:03:05,275
e o rodapé e alguma outra informação sejam comuns em todas essas páginas.

45
00:03:05,275 --> 00:03:09,875
Mas ainda assim, cada nova solicitação de página exigirá que você

46
00:03:09,875 --> 00:03:15,051
- para ir e buscar a página inteira do servidor.

47
00:03:15,051 --> 00:03:22,150
Agora, com o uso do cache no site do navegador, você pode mitigar alguns desses problemas

48
00:03:22,150 --> 00:03:28,740
reutilizando os recursos já obtidos do seu cache; mas ainda assim,

49
00:03:28,740 --> 00:03:33,189
todas as novas páginas que você navega exigirão que uma página inteira

50
00:03:33,189 --> 00:03:35,830
seja recarregada do site do servidor.

51
00:03:35,830 --> 00:03:40,240
Aplicativos de página única abordam esse problema de uma maneira diferente.

52
00:03:40,240 --> 00:03:44,289
Em um aplicativo de página única, tipicamente desenvolvemos um aplicativo web

53
00:03:44,289 --> 00:03:49,955
assim, quando o navegador navega para o site,

54
00:03:49,955 --> 00:03:55,384
então isso solicitará que o aplicativo web seja baixado do site do servidor.

55
00:03:55,384 --> 00:03:59,472
Então, isso será, por exemplo, contido em uma página-mestre como index.html,

56
00:03:59,472 --> 00:04:02,860
que acionará um conjunto inteiro de ativos

57
00:04:02,860 --> 00:04:09,553
que são necessários para renderizar seu aplicativo web para ser baixado para o site do cliente.

58
00:04:09,553 --> 00:04:14,199
Agora, como esses ativos são empacotados depende de como você projeta seu aplicativo web

59
00:04:14,199 --> 00:04:18,439
e também de qual estrutura você usa para projetar seu aplicativo web.

60
00:04:18,439 --> 00:04:26,805
Mas, no entanto, você tem um único download grande no início do seu aplicativo web.

61
00:04:26,805 --> 00:04:32,020
Alterações subsequentes no site do cliente, por exemplo, iniciadas por um clique em um link,

62
00:04:32,020 --> 00:04:36,160
iniciará uma nova solicitação para o site do servidor; mas neste caso,

63
00:04:36,160 --> 00:04:42,550
muitas vezes, você só está baixando alguns dados, talvez na forma de dados JSON,

64
00:04:42,550 --> 00:04:45,745
do site do servidor.

65
00:04:45,745 --> 00:04:52,060
Assim, neste caso, cada um deles pode exigir apenas acesso ao servidor

66
00:04:52,060 --> 00:04:54,839
apenas para baixar os dados JSON, por exemplo,

67
00:04:54,839 --> 00:05:00,009
que então pode permitir que você renderize completamente a nova visão

68
00:05:00,009 --> 00:05:03,240
em seu aplicativo de página única.

69
00:05:03,240 --> 00:05:07,329
Assim, o download inicial da página, o download inicial do aplicativo, é claro,

70
00:05:07,329 --> 00:05:11,218
está sempre lá, mas a maioria das interações subsequentes com o servidor

71
00:05:11,218 --> 00:05:17,050
será simplesmente para baixar dados, normalmente na forma de JSON ou XML,

72
00:05:17,050 --> 00:05:20,930
dependendo de como você projeta seu formato de dados.

73
00:05:20,930 --> 00:05:22,720
E uma vez que os dados são baixados,

74
00:05:22,720 --> 00:05:27,865
esses dados podem ser usados para renderizar a nova visualização dentro de seu aplicativo.

75
00:05:27,865 --> 00:05:29,259
Então, nessas circunstâncias,

76
00:05:29,259 --> 00:05:33,870
você economizará muito tempo de ida e volta para o servidor para baixar muitos ativos.

77
00:05:33,870 --> 00:05:38,680
Claro, o carregamento inicial da página requer alguma quantidade de trabalho a ser feito,

78
00:05:38,680 --> 00:05:44,394
mas as solicitações subsequentes podem ser para quantidades muito pequenas de dados.

79
00:05:44,394 --> 00:05:52,037
E essa, de fato, é a característica significativa dos Aplicativos de Página Única.

80
00:05:52,037 --> 00:05:58,310
Agora, com a pré-renderização de algumas de suas visualizações no próprio site do servidor,

81
00:05:58,310 --> 00:06:05,925
você pode até mitigar parte do tempo de download inicial para seu aplicativo web.

82
00:06:05,925 --> 00:06:07,730
Então, mesmo Angular, por exemplo,

83
00:06:07,730 --> 00:06:13,853
permite que você pré-renderize parte de sua primeira visualização no site do servidor

84
00:06:13,853 --> 00:06:20,783
para permitir a exibição de informações para o cliente rapidamente,

85
00:06:20,783 --> 00:06:26,995
enquanto o resto do aplicativo web está sendo baixado pelo seu navegador.

86
00:06:26,995 --> 00:06:31,314
Assim, podemos resumir que Aplicativos de Página Única

87
00:06:31,314 --> 00:06:35,060
como um aplicativo web em um site que se encaixa em uma única página - novamente,

88
00:06:35,060 --> 00:06:40,805
dar ou receber - você - você sabe, não interprete muito literalmente.

89
00:06:40,805 --> 00:06:44,389
Então você não precisa recarregar uma página inteira novamente.

90
00:06:44,389 --> 00:06:49,620
Então essa é a característica significativa de um aplicativo de página única.

91
00:06:49,620 --> 00:06:54,139
Além disso, os Aplicativos de Página Única permitem que você ofereça uma experiência de usuário

92
00:06:54,139 --> 00:06:59,435
mais próxima do trabalho que eles vêem com aplicativos de desktop.

93
00:06:59,435 --> 00:07:02,930
Uma vez que o aplicativo web inicial é baixado; em seguida,

94
00:07:02,930 --> 00:07:11,475
a maioria das outras interações parece que você está interagindo com um aplicativo de desktop.

95
00:07:11,475 --> 00:07:15,959
Então, para resumir o que acabamos de aprender, o que é um aplicativo de página única?

96
00:07:15,959 --> 00:07:21,069
Um aplicativo de página única é um aplicativo web ou um site que se encaixa em uma única página.

97
00:07:21,069 --> 00:07:26,670
Você não precisa recarregar a página inteira toda vez que um usuário interage

98
00:07:26,670 --> 00:07:28,362
com o aplicativo.

99
00:07:28,362 --> 00:07:34,574
O UX é mais como um desktop ou um aplicativo nativo.

100
00:07:34,574 --> 00:07:37,199
A maioria dos recursos necessários para o aplicativo

101
00:07:37,199 --> 00:07:42,699
são baixados na primeira instância, com o carregamento da primeira página.

102
00:07:42,699 --> 00:07:45,720
Depois disso, apenas partes da página são redesenhadas,

103
00:07:45,720 --> 00:07:53,540
com base em como a interação do usuário acontece sem exigir uma viagem completa de ida e volta do servidor,

104
00:07:53,540 --> 00:07:58,889
para buscar todos os recursos que você precisa.

105
00:07:58,889 --> 00:08:04,644
Claro, isso não vem sem seu próprio conjunto de problemas que precisam ser resolvidos.

106
00:08:04,644 --> 00:08:07,740
Então, quando você cria Aplicativos de Página Única, uma das primeiras coisas

107
00:08:07,740 --> 00:08:11,609
que as pessoas muitas vezes questionam sobre Aplicativos de Página Única

108
00:08:11,609 --> 00:08:14,444
é que eles não são otimizados para mecanismos de busca.

109
00:08:14,444 --> 00:08:19,225
Portanto, a otimização do mecanismo de busca é uma parte importante que precisa ser abordada.

110
00:08:19,225 --> 00:08:20,579
Então, se você tem motores de busca

111
00:08:20,579 --> 00:08:24,795
que rastreiam seu site para extrair dados e indexar informações,

112
00:08:24,795 --> 00:08:28,889
então Aplicativos de Página Única podem não ser necessariamente cooperativos neste caso.

113
00:08:28,889 --> 00:08:33,230
Mas mesmo a otimização do mecanismo de busca com os frameworks de dados atuais,

114
00:08:33,230 --> 00:08:40,680
como Angular, vieram longe da estrada que, mesmo com Aplicativo de Página Única,

115
00:08:40,680 --> 00:08:47,940
mecanismos de busca podem essencialmente indexar muita informação

116
00:08:47,940 --> 00:08:50,621
que seu aplicativo web serve.

117
00:08:50,621 --> 00:08:59,009
A segunda questão a ser abordada é quanto da construção da web deve ser descarregada

118
00:08:59,009 --> 00:09:02,750
para o site do cliente em oposição ao site do servidor.

119
00:09:02,750 --> 00:09:07,500
Portanto, o servidor está praticamente atuando como uma fonte de dados em Aplicativos de Página Única

120
00:09:07,500 --> 00:09:10,644
e grande parte do trabalho é descarregada para o site do cliente.

121
00:09:10,644 --> 00:09:11,840
De uma perspectiva,

122
00:09:11,840 --> 00:09:18,782
isso oferece uma maneira muito mais escalável de entregar seu aplicativo web

123
00:09:18,782 --> 00:09:24,037
para o site do cliente, porque grande parte do trabalho de renderização é feito no site do cliente.

124
00:09:24,037 --> 00:09:31,649
Agora você pode otimizar isso até certo ponto para compensar o download inicial

125
00:09:31,649 --> 00:09:34,399
do aplicativo web do site do servidor

126
00:09:34,399 --> 00:09:37,034
fazendo parte da renderização no site do servidor.

127
00:09:37,034 --> 00:09:40,559
Como eu mencionei, Angular não lhe fornece uma oportunidade

128
00:09:40,559 --> 00:09:45,120
para fazer isso com a renderização parcial do site do servidor

129
00:09:45,120 --> 00:09:48,889
de sua visão inicial do seu aplicativo.

130
00:09:48,889 --> 00:09:53,460
O terceiro aspecto é como manter o histórico para que quando você clica em um botão de volta

131
00:09:53,460 --> 00:09:56,789
ou um botão de avanço, para onde você levaria o usuário?

132
00:09:56,789 --> 00:09:59,759
Você salva informações suficientes

133
00:09:59,759 --> 00:10:06,083
que você será capaz de navegar entre as diferentes visualizações de seu aplicativo e assim por diante?

134
00:10:06,083 --> 00:10:08,985
Então essa é uma coisa que você precisa ter em mente.

135
00:10:08,985 --> 00:10:16,975
Claro, como o roteador Angular aproveita a API de histórico de cinco páginas html,

136
00:10:16,975 --> 00:10:21,649
para que ele seja capaz de resolver esse problema em grande medida.

137
00:10:21,649 --> 00:10:25,139
A pergunta final que temos é a análise.

138
00:10:25,139 --> 00:10:29,804
Como você dá suporte à análise em sua página da web?

139
00:10:29,804 --> 00:10:33,850
Como você coleta os dados analíticos e assim por diante?

140
00:10:33,850 --> 00:10:39,235
E também, como já mencionei anteriormente, acelerar o carregamento inicial da página

141
00:10:39,235 --> 00:10:44,924
é algo que é preocupante quando você está projetando seu aplicativo web.

142
00:10:44,924 --> 00:10:46,764
Agora com Angular, como eu disse,

143
00:10:46,764 --> 00:10:52,449
fazendo renderização parcial no lado do servidor acelerará o carregamento inicial da página

144
00:10:52,449 --> 00:10:57,610
no site do seu cliente enquanto o resto do aplicativo web

145
00:10:57,610 --> 00:11:00,735
está sendo baixado para o site do cliente.

146
00:11:00,735 --> 00:11:07,120
Assim, você pode mascarar um pouco do tempo de download inicial para o aplicativo web

147
00:11:07,120 --> 00:11:10,730
fazendo a renderização parcial do próprio site do servidor.

148
00:11:10,730 --> 00:11:13,701
Com estas ideias básicas em mente,

149
00:11:13,701 --> 00:11:19,120
vamos agora explorar como o Angular suporta Aplicações de Página Única.

150
00:11:19,120 --> 00:11:22,450
Nós já incorporamos o Roteador Angular

151
00:11:22,450 --> 00:11:25,375
em nossa aplicação Angular no exercício anterior.

152
00:11:25,375 --> 00:11:28,879
Nos exercícios subsequentes desta lição

153
00:11:28,879 --> 00:11:34,315
e tarefa, concluiremos o desenvolvimento do Aplicativo de Página Única

154
00:11:34,315 --> 00:11:41,139
em que temos trabalhado até agora neste curso.