O que é uma Single Page Aplication?

Introdução

No passado, quando os navegadores eram muito menos capazes do que hoje e o desempenho do JavaScript era ruim, todas as páginas vinham de um servidor. Sempre que você clicava em algo, uma nova solicitação era feita ao servidor e o navegador carregava a nova página posteriormente.

Somente produtos muito inovadores funcionaram de maneira diferente e experimentaram novas abordagens.

Hoje, popularizado pelos modernos frameworks de JavaScript, como o React, um aplicativo geralmente é criado como uma single page aplication: você carrega o código do aplicativo (HTML, CSS, JavaScript) apenas uma vez e, quando você interage com ele, o que geralmente acontece é que o JavaScript intercepta os eventos do navegador e, em vez de fazer uma nova solicitação ao servidor, o qual retornaria um novo documento, o cliente solicita algum JSON ou executa uma ação no servidor, mas a página que o usuário vê não é completamente apagada e se comporta como um aplicativo de desktop. Ou quase isso.

Single page aplication

Single page aplications são desenvolvidas em JavaScript (ou pelo menos compiladas para JavaScript) e funcionam no browser.

A tecnologia é sempre a mesma, mas alguns pontos sobre como a aplicação funciona são diferentes.

Exemplos de Single Page Applications

• Gmail
• Google Maps
• Facebook
• Twitter
• Google Drive

Prós e constras das SPA'S

• Uma SPA é muito mais rápido para o usuário, porque, em vez de esperar que o navegador renderize novamente a página, agora você pode obter retorno instantâneo. Isso é de responsabilidade do desenvolvedor da aplicação, mas você pode ter transições, spinners e qualquer tipo de aprimoramento de UX que seja certamente melhor do que o fluxo de trabalho tradicional.
• Além de tornar a experiência mais rápida para o usuário, o servidor consumirá menos recursos, porque você pode se concentrar em fornecer uma API eficiente em vez de criar layouts do lado do servidor.
• Isso tornas as SPA's ideais para criar um aplicativo móvel, pois com elas você poderá reutilizar completamente o código existente do lado do servidor.
• As SPAs são fáceis de transformar em Progressive Web Apps, que, por sua vez, permitem fornecer armazenamento em cache local e oferecer suporte a experiências offline para seus serviços (ou simplesmente uma mensagem de erro se seus usuários precisarem estar online).
• As SPAs são mais utilizados quando não há necessidade de SEO (otimização de mecanismos de busca). Por exemplo, para aplicativos que funcionam atrás de um login.
• Os mecanismos de pesquisa, embora melhorem a cada dia, ainda têm problemas para indexar sites criados com uma abordagem de SPA, em vez das páginas tradicionais renderizadas por servidor. Este é o caso dos blogs. Se você vai contar com os mecanismos de pesquisa, não se preocupe em criar uma single page application sem que um servidor também seja processado.
• Ao codificar um SPA, você escreverá bastante JavaScript. Como o aplicativo pode ser demorado, você precisará prestar muito mais atenção a possíveis vazamentos de memória - se no passado sua página tinha uma vida útil contada em minutos, agora uma SPA pode ficar aberto por horas a fio.
• As SPAs são ótimas quando se trabalha em equipe. Os desenvolvedores de back-end podem se concentrar apenas na API, e os desenvolvedores de front-end podem se concentrar na criação da melhor experiência do usuário, fazendo uso da API criada no back-end.

Por isso, as single page applications dependem muito do JavaScript. Isso pode tornar o uso de um aplicativo executado em dispositivos de baixa potência uma experiência ruim em termos de velocidade. Além disso, alguns de seus visitantes podem ter o JavaScript desabilitado, e você não deve deixar a acessibilidade de lado.

Substituindo a navegação

Como você se livra da navegação padrão do navegador, os URLs devem ser gerenciadas manualmente.

Essa parte de um aplicativo é chamada de roteador. Algumas estruturas já cuidam delas para você (como o Ember), enquanto outras exigem bibliotecas que farão esse trabalho (como o React Router).

Qual é o problema? No começo, isso era uma reflexão tardia para os desenvolvedores que criam SPAs. Isso causou o problema comum de "botão quebrado": ao navegar no aplicativo, a URL não foi alterada (desde que a navegação padrão do navegador foi invadida) e ao pressionar o botão voltar, você pode ser redirecionado para um site que visitou há muito tempo.

Agora, esse problema pode ser resolvido usando a History API, oferecida pelos navegadores, mas na maioria das vezes você usa uma biblioteca que usa internamente essa API, como o React Router.

Conclusão

Por hoje é isso galera, espero que tenham curtido o assunto.

Se vocês tiverem quaisquer dúvidas relacionadas a SPA's, ou algo a adicionar, deixem aqui nos comentários.