Single Page Application (SPA) - Portal GSTI
O que é Single Page Application (SPA)
SPA significa Aplicação de Página Única, e trata-se de um método - relativamente novo - para o desenvolvimento web baseado em técnicas de front-end, usando sobretudo de #JavaScript e seus frameworks.
As praticas baseadas em SPA envolvem codificar menos no server-side e mais no client-side, proporcionando ao usuário uma aplicação dinâmica, que carrega recursos conforme necessário. Quando um usuário acessa um site construído dentro do conceito de SPA, a aplicação e seus componentes são armazenados no lado cliente, diferente da forma tradicional, quando o usuário precisa vistar várias páginas diferentes e recarregá-las para visualizar atualizações.
A ideia de uma página SPA é desenvolver uma em sua totalidade (ou quase totalidade) no cliente-side. É praticamente uma aplicação Desktop rodando no navegador / App. O server-side muitas vezes se encarrega apenas das funções de comunicação com o banco de dados
O que Significa SPA na Prática?
Em termos práticos, SPA trata-se de adotar padrões de desenvolvimento tais como:
Priorizar e técnicas que incrementem a performance dos scripts
Construir aplicações inteiramente contidas no browser que não façam requisições de novas páginas no servidor
"Usar e abusar" de JavaScript e seus frameworks
Usar padrões como Model-View-Controller (MVC), Model-View-Presenter (MVP) ou ou Model-View-ViewModel (MVVM)
Criar diversas Views (camada de interface) para um mesmo modelo de dados (camada de manipulação dos dados)
Separar de forma bem clara a interface visual e persistência de dados
Conforme imagem a seguir, através uma simples busca no Google Trends pela expressão Single Page Application (SPA), já é possível ter uma noção do crescimento de sua popularidade.
Pesquisa "Single Page Application (SPA)" no Google Trends
O Papel do JavaScript, dos Navegadores e do HTML no Single Page Application (SPA)
Pode-se dizer que a evolução do JavaScript teve um papel fundamental na chegada do conceito de SPA. Inicialmente, esta linguagem tinha um uso bastante restrito às poucas funções dentro da camada de interação com o usuário (view), tais como habilitar botões, validar preenchimento de campos em formulários e desenvolver menus. Hoje, assumiu um papel mais significante no #Desenvolvimento web.
Para termos uma ideia desta evolução - de qual falo no parágrafo anterior - o ranking de linguagens da TIOBE aponta que o Javascript pulou da 12ª para a 6ª posição entre 2001 e 2016, e hoje está na 8ª colocação (Agosto/2017).
Navegadores e o HTML
A evolução dos browsers e do #HTML, por sua vez, deram espaço para que o JavaScript desenvolvesse poder de processamento necessário para oferecer mais recursos aos programadores front-end. Hoje, navegadores web deixaram de ser uma simples janela para a visualização da aplicação, e se comportam como uma parte essencial no processamento, manipulação e controle das informações.
Pioneiros no Uso de SPA
O que Não é Single Page Application (SPA)
O conceito de SPA pode ser confundido com outros ligados a programação. Para que isso não aconteça com você, seguem dois outros conceitos com os respectivos pontos que os distinguem de SPA.
É um efeito essencialmente gráfico, muito usado em em sites de uma única página que disponibiliza um conteúdo que você vê parte a parte, à medida em que rolar a página, enquanto o fundo é fixado. O parallax é, portanto, uma técnica que gera como resultado um conteúdo estático, ao contrário do SPA que disponibiliza recursos de forma dinâmica, à medida em que o usuário cria necessidade. Veja aqui um exemplo de página que usa o efeito Parallax.
Muito menos o SPA pode ser comparado a um simples Scroll infinito. O Infinite Scroll já é utilizado para reduzir o tempo de carregamento de páginas na web, fracionado-o à medida em que você navega top-down.
A grande diferença para estas duas técnicas, é que em uma SPA o que irá ou não ser carregado, a medida em que você navega em uma página, é disponibilizado de forma dinâmica.
Além do mais, uma SPA possui diversas outras propriedades de dinamicidade, que vão além de uma simples disponibilização de conteúdo a partir da navegação de Scroll.
A timeline no Facebook é um exemplo legítimo de uso de práticas de SPA.
Tomando a mesma rede social como exemplo, um comentário novo que surge em sua publicação - sem que você tenha precisado carregar a página - é um exemplo de uso das propriedades do conceito de SPA.
Se você digita caracteres em um campo de pesquisa (em um determinado site / sistema web) e o site exibe os resultados à medida que você digita, então este site está usando uma técnica de busca que se enquadra nas boas práticas de Single Page Application (SPA)
Navegando no próprio Portal GSTI, você poderá identificar algumas técnicas que se enquadram nas práticas de uma SPA: atualizações, inserção dinâmica de comentários, alertas, dentre outras ações que ocorrem no cliente-side dinamicamente, sem que você precise dar um refresh na página.
Vantagens do Single Page Application (SPA)
O usuário vive uma experiência muito parecida com a de utilizar um sistema desktop, já que não precisa realizar refreshs na página.
O conteúdo é carregado de forma faseada, sem que o usuário tenha que aguardar pelo carregamento completo de uma página.
As divisões em camadas, aplicadas por práticas de SPA, facilitam a manutenção de sistemas / websites.
Menor consumo de banda
As cargas de dados são realizadas conforme a necessidade, o que economiza o carregamento de informações que não são / seriam utilizadas pelo usuário.
Problemas Comuns com o Single Page Application (SPA)
Assim como toda nova tendência, a utilização das práticas extremamente voltadas para front-end requer aprendizado. Exige um bom conhecimento de JavaScript e de seus Frameworks.
Esta é uma provável desvantagem para quem mantém sites e/ou blogs: apesar do Google já ter um sistema que indexa o retorno das requisições AJAX, há dúvidas com relação a sua eficácia de indexação.