Publicação

Single Page Application (SPA)

foto de
Jorge Massari CONTEÚDO EM DESTAQUE

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.

Comentários