Um aplicativo de página única (SPA) é um aplicativo da web que é apresentado ao usuário por meio de uma única página HTML para ser mais responsivo e replicar mais de perto um aplicativo de desktop ou aplicativo nativo.
Um SPA vem às vezes defiinterface de página única (SPI).
Um aplicativo de página única pode buscar todo o HTML, JavaScript e CSS do aplicativo durante o carregamento inicial ou pode carregar recursos dinamicamente para atualização em resposta à interação do usuário ou outros eventos.
Outros aplicativos da Web apresentam ao usuário uma página inicial vinculada a partes do aplicativo em páginas HTML separadas, o que significa que o usuário precisa aguardar o carregamento de uma nova página sempre que faz uma nova solicitação.
Tecnologias
Os SPAs usam HTML5 e Ajax (JavaScript e XML assíncronos) para permitir respostas fluidas e dinâmicas às solicitações do usuário, permitindo que o conteúdo seja atualizado imediatamente quando um usuário executa uma ação. Após o carregamento da página, as interações com o servidor ocorrem por meio de chamadas Ajax e os dados são retornados, detectados no formato JSON (JavaScript Object Notation), para atualizar a página sem a necessidade de recarregamentos.
SPA em detalhe
Os aplicativos de página única são notáveis por sua capacidade de redesenhar qualquer parte da interface do usuário sem exigir uma ida e volta do servidor para buscar o HTML. Isso é feito separando os dados da apresentação de dados com uma camada de modelo que gerencia os dados e uma camada de exibição que lê os modelos.
Um bom código vem da solução do mesmo problema várias vezes ou de sua refatoração. Normalmente, esse processo evolui em padrões recorrentes, com um mecanismo fazendo a mesma coisa de forma consistente.
Para escrever código sustentável, você precisa escrever código de maneira simples. Esta é uma luta constante, na verdade é fácil adicionar complexidade (entanças/dependências) escrevendo código para resolver um problema; e é fácil resolver um problema sem reduzir a complexidade.
Namespaces são um exemplo disso.
Aplicativos de página única (SPA) Aplicativos de várias páginas (MPA) comparados
Aplicativos de várias páginas (MPAs) contêm várias páginas com dados estáticos e links para outros sites. HTML e CSS são as principais tecnologias usadas para desenvolver sites da MPA. Eles podem usar JavaScript para reduzir a carga e aumentar a velocidade. As organizações que oferecem uma ampla gama de serviços, como lojas online, devem considerar o uso do MPA, pois facilita a conexão com diferentes bancos de dados de usuários.
Os aplicativos de página única diferem dos aplicativos de várias páginas das seguintes maneiras:
- Processo de desenvolvimento: Ao criar MPAs, você não precisa de proficiência em JavaScript, ao contrário dos SPAs. No entanto, o acoplamento de front-ends e back-ends em AMPs significa que esses locais requerem tempos de construção relativamente mais longos do que os SPAs.
- Velocidade: os MPAs são executados relativamente mais lentos, exigindo que cada nova página seja carregada do zero. No entanto, os SPAs carregam muito mais rápido após o download inicial, pois armazenam dados em cache para uso posterior.
- Otimizazione para i motori di cerca: os mecanismos de pesquisa podem facilmente indexar sites com MPA. Os MPAs têm mais páginas rastreadas pelos mecanismos de pesquisa para gerar melhores classificações de SEO. O conteúdo de cada página também é estático, tornando-o mais acessível. Por outro lado, os SPAs têm uma página com um único URL exclusivo (Uniform Resource Locator). Eles também usam JavaScript, que não é indexado corretamente pela maioria dos mecanismos de pesquisa. Isso torna as classificações de SEO para SPAs mais desafiadoras.
- segurança: No MPA, você precisa proteger cada página online individualmente. No entanto, os SPAs são mais propensos a ataques de hackers. Mas com a abordagem certa, as equipes de desenvolvimento podem melhorar a segurança do aplicativo.
À medida que mais empresas migram para usar SPAs, rastreadores e mecanismos de pesquisa evoluem para melhor indexá-los. Dada a sua velocidade, é apenas uma questão de quando os SPAs se tornarão a opção ideal para o desenvolvimento de aplicativos da web. Então as vantagens do MPA sobre o SPA começarão a desaparecer.
Quando usar aplicativos de página única?
Existem cinco cenários em que tais aplicações são mais relevantes:
- Os usuários que desejam desenvolver um site com plataforma dinâmica e menor volume de dados podem utilizar os SPAs.
- Os usuários que planejam criar um aplicativo móvel para seu site também podem considerar o uso do SPA. Eles podem usar a API de back-end (Application Programming Interface) para o site e o aplicativo móvel.
- A arquitetura SPA é adequada para a construção de redes sociais como Facebook, plataformas SaaS e comunidades fechadas, pois exigem menos SEO.
- Os usuários que desejam oferecer aos seus consumidores uma interação perfeita também devem usar SPAs. Os consumidores também podem acessar atualizações ao vivo para dados e gráficos de transmissão ao vivo.
- Usuários que desejam oferecer uma experiência de usuário consistente, nativa e dinâmica em vários dispositivos, sistemas operacionais e navegadores.
Uma boa equipe deve ter orçamento, ferramentas e tempo para criar um aplicativo de página única de alta qualidade. Isso garantirá um SPA confiável e eficiente que não sofrerá tempo de inatividade relacionado ao tráfego.
Arquitetura de aplicativo de página única
Os aplicativos de página única interagem com os visitantes carregando e trabalhando na página atual, eliminando a necessidade de carregar várias páginas da Web do servidor.
Sites com SPA consistem em um único link de URL. O conteúdo é baixado e os componentes específicos da interface do usuário (IU) são atualizados quando clicados. A experiência do usuário é aprimorada, pois o usuário pode interagir com a página atual conforme o novo conteúdo é obtido do servidor. Quando ocorre uma atualização, partes da página atual são atualizadas com o novo conteúdo.
A solicitação inicial do cliente no SPA carrega o aplicativo e todos os seus recursos relevantes, como HTML, CSS e JavaScript. O arquivo de carregamento inicial pode ser significativo para aplicativos complexos e resultar em um tempo de carregamento mais lento. Uma interface de programação de aplicativos (API) busca novos dados enquanto o usuário navega por um SPA. o servidor responde apenas com dados no formato JSON (JavaScript Object Notation). Ao receber esses dados, o navegador atualiza a visualização do aplicativo que o usuário visualiza sem recarregar uma página.
A arquitetura de aplicativo de página única inclui tecnologias de renderização do lado do servidor e do lado do cliente. O site é exibido e apresentado ao usuário por meio de Client Side Rendering (CSR), Server Side Rendering (SSR) ou Static Site Generator (SSG).
- Renderização do lado do cliente (CSR)
Com a renderização do lado do cliente, o navegador solicita um arquivo HTML ao servidor e recebe um arquivo HTML básico com scripts e estilos anexados. Ao executar o JavaScript, o usuário vê uma página em branco ou uma imagem do carregador. O SPA busca os dados, produz visualizações e envia os dados para o Document Object Model (DOM). O SPA é então preparado para uso. O CSR geralmente é a mais longa das três alternativas e pode ocasionalmente sobrecarregar o navegador devido ao uso intenso de recursos do dispositivo ao visualizar o conteúdo. Além disso, o CSR é uma ótima alternativa para sites de alto tráfego, pois apresenta informações aos consumidores sem comunicação excessiva com o servidor, resultando em uma experiência de usuário mais rápida.
- Renderização do lado do servidor (SSR)
Durante a renderização do lado do servidor, os navegadores solicitam um arquivo HTML do servidor, que busca os dados solicitados, renderiza o SPA e cria o arquivo HTML para o aplicativo em trânsito. O material acessível é então apresentado ao usuário. A arquitetura SPA é necessária para anexar eventos, produzir um DOM virtual e realizar outras operações. O SPA é então preparado para uso. O SSR torna o programa rápido, pois combina a velocidade de um SPA com a não sobrecarga do navegador do usuário.
- Gerador de Site Estático (SSG)
No construtor de sites estáticos, os navegadores solicitam imediatamente ao servidor um arquivo HTML. A página é exibida para o usuário. O SPA busca os dados, gera exibições e preenche o modelo de objeto de documento (DOM). Em seguida, o SPA está pronto para uso. Deduzindo do nome, os SSGs são mais adequados para páginas estáticas. Eles fornecem páginas estáticas com opção boa e rápida. Para sites com conteúdo dinâmico, os usuários são aconselhados a escolher uma das outras duas opções de renderização de informações.
Vantagens de aplicativos de página única
Grandes empresas como Meta, YouTube e Netflix passaram de aplicativos de várias páginas para aplicativos de página única. Os SPAs oferecem uma experiência de usuário mais suave, maior desempenho e capacidade de resposta. Abaixo estão os benefícios de usar aplicativos de página única.
- Recurso de cache
Um aplicativo de página única faz uma única solicitação ao servidor no download inicial e salva todos os dados recebidos. Os consumidores podem usar os dados recebidos para trabalhar offline, se necessário, o que torna mais conveniente para os usuários, pois permite que consumam menos recursos de dados. Além disso, quando um cliente tem uma conexão ruim com a Internet, os dados locais podem ser sincronizados com o servidor se a conexão LAN permitir.
- Rápido e responsivo
O uso de SPAs pode melhorar a velocidade de um site, pois atualiza apenas o conteúdo solicitado em vez de atualizar a página inteira. Os SPAs carregam um arquivo JSON secundário em vez de uma nova página. O arquivo JSON garante velocidade e eficiência de carregamento mais rápidas. Isso resulta em acesso instantâneo a todos os recursos e funções de uma página sem atrasos. Esta é uma grande vantagem, pois o tempo de carregamento de um site pode afetar significativamente a receita e as vendas.
Os SPAs permitem transições suaves, fornecendo todas as informações na página instantaneamente. O site não precisa ser atualizado, então seus processos são mais eficientes do que os aplicativos online típicos.
Além disso, com SPAs, recursos como HTML, CSS e scripts Java eles serão buscados apenas uma vez durante o tempo de vida de um aplicativo. Apenas os dados necessários são trocados de um lado para o outro.
As páginas com SPA também permitem que os usuários naveguem mais rapidamente graças ao cache e volumes de dados reduzidos. Apenas os dados necessários são transmitidos de um lado para o outro e apenas as partes que faltam do conteúdo atualizado são baixadas.
- Depurando com o Chrome
A depuração detecta e remove bugs, erros e vulnerabilidades de segurança de aplicativos da web que diminuem o desempenho. A depuração de SPAs é facilitada com as ferramentas de desenvolvedor do Chrome. Os desenvolvedores podem controlar a renderização do código JS a partir do navegador, depurar SPAs sem examinar muitas linhas de código.
Os SPAs são criados com base em estruturas JavaScript, como ferramentas de desenvolvedor AngularJS e React, tornando-os mais fáceis de depurar usando navegadores Chrome.
As ferramentas do desenvolvedor permitem que os desenvolvedores entendam como o navegador solicitará dados dos servidores, os armazenará em cache e como exibirá os elementos da página. Além disso, essas ferramentas permitem que os desenvolvedores monitorem e analisem elementos de página, operações de rede e dados associados.
- Desenvolvimento rápido
Durante o processo de desenvolvimento, o front-end e o back-end de um SPA podem ser separados, permitindo que dois ou mais desenvolvedores trabalhem em paralelo. Alterar o front-end ou back-end não afeta a outra ponta, promovendo assim um desenvolvimento mais rápido.
Os desenvolvedores podem reutilizar o código do lado do servidor e separar os SPAs da interface do usuário front-end. A arquitetura desacoplada em SPAs separa exibições de front-end e serviços de back-end. Isso permite que os desenvolvedores mudem as perspectivas, criem e experimentem sem afetar o conteúdo ou se preocupar com a tecnologia de back-end. Os clientes podem então ter uma experiência consistente usando esses aplicativos.
- Experiência do usuário aprimorada
Com os SPAs, os usuários obtêm acesso às páginas visualizadas instantaneamente com todo o conteúdo de uma só vez. Isso é mais conveniente, pois os usuários podem rolar confortavelmente e sem problemas. É como usar um desktop nativo ou um aplicativo móvel.
Os SPAs fornecem um UX positivo com começo, meio e fim distintos. Além disso, os usuários podem acessar o conteúdo desejado sem clicar em vários links, como nos MPAs. Você experimenta taxas de rejeição mais baixas quando os usuários obtêm acesso instantâneo às informações, ao contrário dos MPAs, em que os usuários ficam frustrados porque as páginas levam um tempo significativo para carregar. A navegação também é mais rápida porque os elementos da página são reutilizados.
- Conversão em aplicativos IOS e Android
Os desenvolvedores que desejam fazer a transição para aplicativos iOS e Android devem usar SPAs, pois são relativamente mais fáceis de converter. Eles podem usar o mesmo código para mudar de SPA para aplicativos móveis. Como todo o código é fornecido em uma única instância, os SPAs são fáceis de navegar, tornando-os ideais para aplicativos móveis.
- Compatibilidade entre plataformas
Os desenvolvedores podem usar uma única base de código para criar aplicativos que podem ser executados em qualquer dispositivo, navegador e sistema operacional. Isso melhora a experiência do consumidor, pois ele pode usar o SPA em qualquer lugar. Ele também permite que desenvolvedores e engenheiros de DevOps criem aplicativos ricos em recursos, incluindo análises em tempo real, enquanto desenvolvem aplicativos de edição de conteúdo.
Aspectos negativos
Apesar de todas as vantagens dos aplicativos de página única, algumas desvantagens surgem ao usar estruturas SPA. Felizmente, o trabalho está em andamento para superar esses problemas com SPAs. Abaixo estão algumas desvantagens;
- Otimização para mecanismos de busca (SEO)
Acredita-se amplamente que aplicativos de página única não são adequados para SEO. A maioria dos mecanismos de pesquisa, como Google ou Yahoo, não conseguiu rastrear sites SPA com base em interações Ajax com servidores por um tempo. Como resultado, a maioria desses sites SPA permaneceu não indexada. Atualmente, os bots do Google foram ensinados a usar JavaScript em vez de HTML regular para indexar sites SPA, o que prejudica as classificações.
Tentar encaixar o SEO em um site SPA pronto é desafiador e caro. Os desenvolvedores precisam criar um site separado, renderizado pelo servidor do mecanismo de pesquisa, o que é ineficiente e envolve muito código adicional. Outras técnicas, como detecção de recursos e pré-renderização, também podem ser usadas. Nas instalações do SPA, um único URL para cada página limita os recursos de SEO para SPAs.
- Botão de navegação para trás e para a frente
Os navegadores salvam informações para ajudar as páginas da Web a carregar rapidamente. Quando os consumidores pressionam o botão Voltar, a maioria espera que a página esteja em um estado semelhante à última vez que a visualizaram e que a transição acontecerá rapidamente. Arquiteturas web tradicionais permitem isso usando cópias em cache do site e recursos relacionados. No entanto, em uma implementação ingênua de um SPA, pressionar o botão Voltar tem o mesmo efeito de clicar em um link. Causa uma solicitação do servidor, maior atraso e alterações de dados visíveis.
Para atender às expectativas do usuário e fornecer uma experiência mais rápida, os desenvolvedores do SPA devem imitar a funcionalidade dos navegadores nativos usando JavaScript.
- Local de rolagem
Os navegadores armazenam informações como a última posição de rolagem das páginas visitadas. No entanto, os usuários podem descobrir que as posições de rolagem foram alteradas ao navegar em SPAs usando os botões Voltar e Avançar do navegador. Por exemplo, no Facebook, às vezes os usuários voltam para suas últimas posições de rolagem, mas às vezes não. Isso resulta em uma experiência de usuário abaixo do ideal, pois eles precisam retomar manualmente a rolagem de volta à posição de rolagem anterior.
Para resolver esse problema, os desenvolvedores precisam fornecer um código que salve, recupere e solicite a posição de rolagem correta conforme o usuário rola para frente e para trás.
- análise do site
Ao adicionar o código analítico a uma página, os usuários podem rastrear o tráfego para a página. No entanto, os SPAs dificultam a determinação de quais páginas ou conteúdos são mais populares, já que se trata de uma única página. Você precisa fornecer código adicional para que a análise rastreie as pseudopáginas conforme elas são visualizadas.
- Problemas de segurança
SPAs são mais propensos a serem comprometidos por meio de script entre sites. Eles permitem que os consumidores baixem o aplicativo inteiro, expondo-os a mais oportunidades de encontrar vulnerabilidades por meio de engenharia reversa. Para resolver esse problema, os desenvolvedores devem garantir que toda a lógica do lado do cliente relacionada à segurança do aplicativo da Web, como autenticação e validação de entrada, seja duplicada no servidor para verificação. Além disso, os desenvolvedores devem fornecer acesso limitado baseado em função.
Concluindo
Os aplicativos de página única marcam o próximo passo na evolução das experiências de aplicativos. Eles são mais rápidos, mais intuitivos e podem ser integrados a recursos avançados, como personalização. É por isso que as melhores empresas com muitos usuários simultâneos, como Gmail, Netflix ou feed de notícias do Facebook, contam com uma arquitetura de página única. Ao implementar essa tecnologia, as empresas podem obter mais valor de suas propriedades on-line e fazer novas incursões como negócios digitais.
Ercole Palmeri
