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
Tendência
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)
JavaScript
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.
Efeito Parallax
É 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.
Infinite Scroll
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.
Ficou confuso?
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.
Exemplos:
- 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)
Melhor experiência do usuário
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.
Melhor Performance
O conteúdo é carregado de forma faseada, sem que o usuário tenha que aguardar pelo carregamento completo de uma página.
Sustentabilidade
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)
Curva de Aprendizado
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.
#SEO
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.
