O que são Single Page Applications
SPA, ou Single Page Application, é uma aplicação em que todas as funcionalidades estão em uma única página
Ao invés de recarregar a página toda, só uma parte do conteúdo muda
Single Page Applications (SPA) são aplicações cuja funcionalidade está concentrada em uma única página. Ao invés de recarregar toda a página ou redirecionar o usuário para uma página nova, apenas o conteúdo principal é atualizado de forma assíncrona, mantendo toda a estrutura da página estática.
Imagine um dashboard, em que os menus lateral e superior são os mesmos para todas as telas da aplicação. Ao clicar em uma opção como “Cadastro de produtos”, o usuário não precisaria recarregar toda a página para ver que no fim apenas o conteúdo central mudou. Para evitar isso, mantemos os menus fixos e alteramos apenas a parte do meio, em que estarão os formulários, tabelas, etc.
Além de otimizar a performance da aplicação, reduzindo o conteúdo a ser carregado, as SPAs têm foco na experiência do usuário, que lida com uma interface mais rápida.
Exemplos de Single Page Applications
As SPA estão presentes no nosso dia a dia já há algum tempo. Grandes exemplos disso são o Gmail, o Outlook e outras aplicações (web) de e-mail. Na mesma página temos a possibilidade de abrir uma mensagem, excluí-la, respondê-la, etc, sem que toda a estrutura seja recarregada (apenas a parte central muda).
Também há cenários híbridos, ou seja, em partes da aplicação o conceito de SPA é aplicado, enquanto em outros continua a navegação síncrona convencional. Um exemplo disso é o site Airbnb. No primeiro momento fazemos uma busca e somos direcionados para outra página. Nesse segundo ambiente temos o comportamento do tipo SPA: fazemos filtros e apenas os resultados são recarregados. Ao clicar em um dos resultados, porém, somos novamente enviados para outra página, ocorrendo a mudança de contexto.
O que usar para construir Single Page Applications?
Há atualmente no mercado diversos frameworks/bibliotecas que facilitam a criação de aplicações seguindo esse modelo. Entre os principais estão: Angular, React e Vue.js, frameworks JavaScript que trabalham com o conceito de componentes, ilustrado na Figura 1.
Nessa imagem podemos ver que a página é formada por vários componentes: menu, barra de navegação, lista de tarefas e cada tarefa são elementos construídos separadamente para funcionar em conjunto.
Quando necessário, apenas uma tarefa ou a lista delas é atualizada, mantendo o restante da página estático e evitando carregamento desnecessário.
Quando não usar Single Page Applications
Quando a navegação representa uma “mudança de contexto”, ou seja, quando as características das páginas de origem e destino são muito distintas, não é adequado usar o conceito de SPA. Nesses casos a navegação síncrona convencional faz mais sentido, pois o usuário realmente está saindo de um ambiente e indo para outro.
Um exemplo disso pode ser visto nas imagens abaixo. Note que da página de resultados da busca (Figura 2) para a página do curso (Figura 3) há muitas diferenças, ou seja, são ambientes realmente distintos. Logo, não seria adequado carregar tudo na mesma página.
Sugestão de conteúdo
- Curso O que é Angular?
- Curso O que é Vue.js?
