SPA, a revolução dos websites.
Quantas vezes o já tivemos que esperar o reload do navegador quando fomos trocar de uma página para outra de um mesmo site? Muitas vezes para acessar uma página com conteúdo estático.
Pois bem, esta é a forma que as aplicações web vem sendo desenvolvidas há muito tempo. Onde cada página possui um arquivo html e para cada página solicitamos ao servidor o conteúdo do html e as informações dinâmicas que serão renderizadas para a página solicitada. Este processo inclui a requisição da página para o servidor, o processamento das informações no lado do servidor e o envio do html já manipulado. E mesmo que as informações sejam estáticas, é necessária a requisição da página, pois elas não se encontram em nosso dispositivo, seja um computador ou um dispositivo mobile.
Da mesma forma quando estamos visualizando as informações de um produto, por exemplo, e decidimos visualizar outro, onde só é realizada a troca dessas informações dentro do mesmo html, aquela página é recarregada com o novo html vindo do servidor. Não seria mais fácil somente atualizar as informações no html já carregado?
Certo, mas como resolver então esse desperdício de requisições? A resposta ter somente uma página de html em sua aplicação. Mas como assim?
Você já deve conhecer a navegação por âncoras, onde os links da página são direcionados para um marcador na própria página. Ao clicar neste link a página procura onde se encontra esta âncora e assim mostra o conteúdo para o usuário. O navegador atualiza a url com o #hash que identifica a âncora, porém não é recarregada a página, pois ele entende que não foi trocada a página, somente haverá o deslocamento da página para mostrar este conteúdo. Este conceito é chamado de Hash Navigation.
Atrelado a navegação via Hash, o Javascript possui um evento chamado hashchange que dispara cada vez que é realizada uma uma navegação via hash e assim as manipulações via javascript podem ser realizadas.
As SPA (Single-Page Application) trabalham desta forma, porém de forma otimizada. Ao realizar a requisição da aplicação, vem somente uma página de html que contém toda a aplicação e quando fomos navegar entre suas páginas ocorre a troca dos templates de html que vieram junto desta página de html.
Os 3 grandes elementos de um SPA são:
- A página index.html, que é responsável pelo carregamento das bibliotecas, os estilos e os controladores;
- Os controladores Javascript, que irão realizar toda a lógica da aplicação no client-side;
- Os templates html, serão renderizados quando solicitados.
Trocando em miúdos temos o seguinte funcionamento:
- É realizada a solicitação da aplicação www.meuapp.com/ ;
- O servidor responde com o www.meuapp.com/#/ com o index.html contendo os controladores JS e templates html;
- O navegador irá realizar a renderização dos templates referentes à página que são carregados pelos controladores.
Ao realizar uma navegação para outra página da aplicação esta será realizada via hash e assim os controladores irão identificar qual template e realizar o carregamento do template.
Exemplo 1:
Da página inicial do www.meuapp.com/#/ a página www.meuapp.com/#/about que é uma página estática. Os controladores irão identificar que devem ser carregados os templates à esta página, isso sem realizar nenhuma requisição ao servidor, ou seja, carregamento instantâneo desta página.
Exemplo 2:
Da página inicial do www.meuapp.com/#/ para página que lista produtos www.meuapp.com/#/products, onde estas informações se encontram no servidor. Os controladores farão a renderização dos templates e de forma assíncrona farão uma requisição Ajax para o servidor solicitando os dados da lista de produtos e quando os dados forem recebidos serão exibidos na tela.
O mesmo acontece caso outras páginas sejam acessadas inicialmente ao invés da página inicial, os controladores irão renderizar os templates e farão as requisições ao servidor dos dados, caso seja necessário.
Conclui-se que mesmo que seja carregada toda a aplicação no primeiro acesso é muito vantajoso a velocidade em que as informações são apresentadas para o usuário, pois não realizar o reload do navegador aumenta a fluidez e a usabilidade da aplicação. Outra vantagem é diminuir o consumo de banda nas requisições, pois somente será solicitadas as informações de banco de dados e ações de lógica do server-side.
Uma observação para grandes aplicações é que em frameworks com Angular o sistema pode ser modularizado e o carregamento dos controladores destes módulos podem ser feitos por demanda, ou seja, ao acessar uma página deste módulo.
Referências:
https://www.codeschool.com/beginners-guide-to-web-development/single-page-applications
https://www.youtube.com/watch?v=qvHecQOiu8g
https://www.youtube.com/watch?v=xfGciVdbktI