SPA é a sigla para Single Page Application (aplicação de uma página). Este tipo de aplicação tem por característica possuir um carregamento um pouco mais demorado ao ser aberto pois ela irá trazer todos os assets (arquivos, imagens, etc..) para a máquina do usuário, mas após isso, se o sistema foi bem feito a navegação deverá ser muito rápida e fluida.
As SPA se tornaram populares graças as implementações de performance que o V8 engine da Google proporcionou ao JavaScript. Essas melhoras tornaram as páginas mais rápidas permitiram proporcionar uma agilidade antes vista apenas em aplicativos desktops. Uma das aplicações mais famosas que começaram a utilizar este conceito foi o Gmail, o qual era possível navegar entre as opções sem que a página fosse recarregada.
Todos os processos são executados no lado do cliente e a comunicação com o servidor só ocorrerá com chamadas Ajax quando a aplicação precisar enviar ou buscar novos dados. Para este tipo de aplicação não interessa qual a tecnologia, quantas aplicações ou onde o sistema está hospedado, ela precisa apenas saber os endpoints que serão consumidos. Uma desvantagem de tudo ocorrer no front é que algumas regras podem ficar fragmentadas entre o front-end e back-end.
Como é de se esperar, em aplicações SPA todo o código fonte fica no browser e para evitar que outros copiem o código, existem ferramentas que ajudam a comprimir e alterar o código de forma que ele seja praticamente impossível de ler.
Normalmente, SPAs possuem um componente chamado Router que gerencia a navegação do usuário mesmo que ele atualize a tela. SPAs trabalham muito com armazenamento local no navegador, de forma que após um refresh seja possível buscar no armazenamento as informações e remontar o estado anterior da tela.
Com o passar do tempo várias técnicas e ferramentas para dar suporte a criação de SPAs foram sendo criadas, algumas com a ideia de ser uma solução completa com tudo que o desenvolvedor precisaria para desenvolver uma aplicação, e outras que procuravam solucionar alguns problemas mais pontualmente.
O framework AngularJS criado pelo Google foi o primeiro a se destacar. Após sua primeira versão ter sofrido com problemas de performance em aplicações de grande porte, foi lançada uma nova versão do framework, bem diferente da primeira, sendo chamada agora somente de Angular.
Outra ferramenta muito utilizada é o React, criada pelo Facebook. Ao contrário do Angular, ela não é uma solução completa para toda a aplicação, ela é uma biblioteca de interface com usuário, sendo preciso conectar outras partes na aplicação para tomar conta das demais funcionalidades. Outros frameworks muito utilizados pelo mercado e pela comunidade são o Vue, Ember e Meteor.
Há muitas vantagens na utilização de SPA:
- Elas são rápidas, pois seu conteúdo é carregado apenas uma vez
- Seu desenvolvimento é mais simples, pois não há código necessário para gerar as páginas no servidor.
- Podem ser executadas diretamente através do arquivo HTML, até mesmo sem a necessidade de um servidor para desenvolvimento.
- São simples de debuggar pelo Chrome ou outro navegador moderno, que possuem ferramentas de debuggar o JavaScript, inspecionar elementos e monitorar as operações de rede.
- A utilização de SPA facilita a criação de aplicações mobile, pois elas podem compartilhar as mesmas regras de negócio do servidor, reescrevendo somente a interface.
- Uma SPA pode trabalhar offline, pois caso seja desejado o servidor pode enviar todos os dados necessários para a utilização uma única vez, e eles podem ser armazenados localmente no navegador, e assim a aplicação pode ser utilizada sem uma conexão com a internet.
A utilização de SPA também tem desvantagens:
- Em aplicações deste tipo, medidas de segurança devem ser tomadas com mais cuidado, pois a API do servidor deverá ficar exposta, e assim usuários mal-intencionados podem tentar acessá-la de forma indevida.
- O tempo de carregamento do primeiro acesso que é maior nas SPA, devido ao carregamento de todo o conteúdo de uma vez.