Você ainda não é assinante?

O que são Single Page Applications

Você sabe o que é SPA SPA concentram seu funcionamento em uma única página O conteúdo é carregado de forma assíncrona (Ajax)

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.

Conceito de componentes
Figura 1. Conceito de componentes

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.

Página de resultados da busca
Figura 2. Página de resultados da busca
Página inicial do curso
Figura 3. Página inicial do curso

Sugestão de conteúdo