Deixe-me agora dar-lhe uma breve visão geral dos Aplicativos de Página Única.
O que são aplicativos de página única?
Como eles são diferentes dos sites que você pode ter desenvolvido anteriormente?
Por exemplo, o site que você desenvolveu no curso anterior desta especialização,
onde você tinha várias páginas - por que aplicativos de página única são interessantes
e o que é que você precisa estar ciente de
quando você está projetando aplicativos de página única?
Esta palestra não se destina a ser um tratado inteiro sobre Aplicações de Página Única,
mas realmente, dar-lhe introdução o suficiente
para começar a pensar em Aplicações de Página Única,
especialmente no contexto de Angular.
Antes de entendermos Aplicativos de Página Única, vamos dar um passo atrás
e ver como os sites tradicionais funcionam.
Em sites tradicionais, até agora - se você visitar um site,
você pode estar solicitando acesso a uma página específica.
Por exemplo, você estará solicitando uma página index.html
quando você navegar para o site,
clicando em um link
ou digitando o endereço do site na barra de endereços do seu navegador.
Portanto, normalmente, a página index.html é a primeira
que você obtém quando visita um site.
E quando a página é baixada do servidor para o seu navegador -
e então isso será exibido no seu navegador.
Agora isso pode incluir não apenas a página index.html, mas também outros recursos
que podem ser necessários para ser baixado para construir a página index.html.
Nesse caso, a página index.html pode exigir recursos adicionais,
como imagens ou dados, para ser baixado antes que a página de índice possa ser construída.
Mas agora, posteriormente, se você navegar para outra página em seu site
- digamos, por exemplo, outra página como contactus.html,
isso resultará em seu navegador enviando outro pedido para o servidor
para buscar essa segunda página.
Então ele vai iniciar um pedido inteiro para o servidor
e todos os recursos necessários para construir
a segunda página terá que ser baixado do servidor.
Então, à medida que você passa de uma página para outra página,
envolverá cada nova página a ser carregada do servidor
e isso envolveria um tempo de ida e volta para o servidor
para buscar todos os recursos necessários para construir essas páginas.
Agora imagine que seu site tem muitas páginas.
Então, obviamente, cada peça que sua página web
requer para renderização exigirá um tempo completo de ida e volta para os servidores.
O que você gostaria de notar é - muitas vezes é que muitas dessas páginas têm muito em comum.
Talvez, por exemplo, o cabeçalho
e o rodapé e alguma outra informação sejam comuns em todas essas páginas.
Mas ainda assim, cada nova solicitação de página exigirá que você
- para ir e buscar a página inteira do servidor.
Agora, com o uso do cache no site do navegador, você pode mitigar alguns desses problemas
reutilizando os recursos já obtidos do seu cache; mas ainda assim,
todas as novas páginas que você navega exigirão que uma página inteira
seja recarregada do site do servidor.
Aplicativos de página única abordam esse problema de uma maneira diferente.
Em um aplicativo de página única, tipicamente desenvolvemos um aplicativo web
assim, quando o navegador navega para o site,
então isso solicitará que o aplicativo web seja baixado do site do servidor.
Então, isso será, por exemplo, contido em uma página-mestre como index.html,
que acionará um conjunto inteiro de ativos
que são necessários para renderizar seu aplicativo web para ser baixado para o site do cliente.
Agora, como esses ativos são empacotados depende de como você projeta seu aplicativo web
e também de qual estrutura você usa para projetar seu aplicativo web.
Mas, no entanto, você tem um único download grande no início do seu aplicativo web.
Alterações subsequentes no site do cliente, por exemplo, iniciadas por um clique em um link,
iniciará uma nova solicitação para o site do servidor; mas neste caso,
muitas vezes, você só está baixando alguns dados, talvez na forma de dados JSON,
do site do servidor.
Assim, neste caso, cada um deles pode exigir apenas acesso ao servidor
apenas para baixar os dados JSON, por exemplo,
que então pode permitir que você renderize completamente a nova visão
em seu aplicativo de página única.
Assim, o download inicial da página, o download inicial do aplicativo, é claro,
está sempre lá, mas a maioria das interações subsequentes com o servidor
será simplesmente para baixar dados, normalmente na forma de JSON ou XML,
dependendo de como você projeta seu formato de dados.
E uma vez que os dados são baixados,
esses dados podem ser usados para renderizar a nova visualização dentro de seu aplicativo.
Então, nessas circunstâncias,
você economizará muito tempo de ida e volta para o servidor para baixar muitos ativos.
Claro, o carregamento inicial da página requer alguma quantidade de trabalho a ser feito,
mas as solicitações subsequentes podem ser para quantidades muito pequenas de dados.
E essa, de fato, é a característica significativa dos Aplicativos de Página Única.
Agora, com a pré-renderização de algumas de suas visualizações no próprio site do servidor,
você pode até mitigar parte do tempo de download inicial para seu aplicativo web.
Então, mesmo Angular, por exemplo,
permite que você pré-renderize parte de sua primeira visualização no site do servidor
para permitir a exibição de informações para o cliente rapidamente,
enquanto o resto do aplicativo web está sendo baixado pelo seu navegador.
Assim, podemos resumir que Aplicativos de Página Única
como um aplicativo web em um site que se encaixa em uma única página - novamente,
dar ou receber - você - você sabe, não interprete muito literalmente.
Então você não precisa recarregar uma página inteira novamente.
Então essa é a característica significativa de um aplicativo de página única.
Além disso, os Aplicativos de Página Única permitem que você ofereça uma experiência de usuário
mais próxima do trabalho que eles vêem com aplicativos de desktop.
Uma vez que o aplicativo web inicial é baixado; em seguida,
a maioria das outras interações parece que você está interagindo com um aplicativo de desktop.
Então, para resumir o que acabamos de aprender, o que é um aplicativo de página única?
Um aplicativo de página única é um aplicativo web ou um site que se encaixa em uma única página.
Você não precisa recarregar a página inteira toda vez que um usuário interage
com o aplicativo.
O UX é mais como um desktop ou um aplicativo nativo.
A maioria dos recursos necessários para o aplicativo
são baixados na primeira instância, com o carregamento da primeira página.
Depois disso, apenas partes da página são redesenhadas,
com base em como a interação do usuário acontece sem exigir uma viagem completa de ida e volta do servidor,
para buscar todos os recursos que você precisa.
Claro, isso não vem sem seu próprio conjunto de problemas que precisam ser resolvidos.
Então, quando você cria Aplicativos de Página Única, uma das primeiras coisas
que as pessoas muitas vezes questionam sobre Aplicativos de Página Única
é que eles não são otimizados para mecanismos de busca.
Portanto, a otimização do mecanismo de busca é uma parte importante que precisa ser abordada.
Então, se você tem motores de busca
que rastreiam seu site para extrair dados e indexar informações,
então Aplicativos de Página Única podem não ser necessariamente cooperativos neste caso.
Mas mesmo a otimização do mecanismo de busca com os frameworks de dados atuais,
como Angular, vieram longe da estrada que, mesmo com Aplicativo de Página Única,
mecanismos de busca podem essencialmente indexar muita informação
que seu aplicativo web serve.
A segunda questão a ser abordada é quanto da construção da web deve ser descarregada
para o site do cliente em oposição ao site do servidor.
Portanto, o servidor está praticamente atuando como uma fonte de dados em Aplicativos de Página Única
e grande parte do trabalho é descarregada para o site do cliente.
De uma perspectiva,
isso oferece uma maneira muito mais escalável de entregar seu aplicativo web
para o site do cliente, porque grande parte do trabalho de renderização é feito no site do cliente.
Agora você pode otimizar isso até certo ponto para compensar o download inicial
do aplicativo web do site do servidor
fazendo parte da renderização no site do servidor.
Como eu mencionei, Angular não lhe fornece uma oportunidade
para fazer isso com a renderização parcial do site do servidor
de sua visão inicial do seu aplicativo.
O terceiro aspecto é como manter o histórico para que quando você clica em um botão de volta
ou um botão de avanço, para onde você levaria o usuário?
Você salva informações suficientes
que você será capaz de navegar entre as diferentes visualizações de seu aplicativo e assim por diante?
Então essa é uma coisa que você precisa ter em mente.
Claro, como o roteador Angular aproveita a API de histórico de cinco páginas html,
para que ele seja capaz de resolver esse problema em grande medida.
A pergunta final que temos é a análise.
Como você dá suporte à análise em sua página da web?
Como você coleta os dados analíticos e assim por diante?
E também, como já mencionei anteriormente, acelerar o carregamento inicial da página
é algo que é preocupante quando você está projetando seu aplicativo web.
Agora com Angular, como eu disse,
fazendo renderização parcial no lado do servidor acelerará o carregamento inicial da página
no site do seu cliente enquanto o resto do aplicativo web
está sendo baixado para o site do cliente.
Assim, você pode mascarar um pouco do tempo de download inicial para o aplicativo web
fazendo a renderização parcial do próprio site do servidor.
Com estas ideias básicas em mente,
vamos agora explorar como o Angular suporta Aplicações de Página Única.
Nós já incorporamos o Roteador Angular
em nossa aplicação Angular no exercício anterior.
Nos exercícios subsequentes desta lição
e tarefa, concluiremos o desenvolvimento do Aplicativo de Página Única
em que temos trabalhado até agora neste curso.