Patrícia Pereira

Single Page Applications

Atualmente, as aplicações web estão a tomar conta das velhas aplicações de ambiente de trabalho e trazem consigo vantagens, tais como a dissociação de qualquer dispositivo e a conveniência de utilização. A procura de aplicações web ricas, complexas, mas de fácil utilização, cresce todos os dias. Em par com esta procura e também a ganhar cada vez mais popularidade nas tendências de desenvolvimento web estão as aplicações de página única.

Uma aplicação de página única (sigla em inglês: SPA) é uma aplicação que interage com o utilizador ao reescrever a página atual de forma dinâmica em vez de carregar uma página completamente nova a partir de um servidor. Tal resulta numa experiência mais confortável para o utilizador e que não é constantemente interrompida pela sucessiva navegação entre páginas.

Contexto – aplicações tradicionais de várias páginas

As aplicações de várias páginas (sigla em inglês: MPA) são as aplicações web “tradicionais” que recarregam e apresentam uma página completamente nova como o resultado de uma interação entre o utilizador e a app. Todas as interações do utilizador – tais como clicar num link ou trocar um URL – e todas as trocas de dados de e para o servidor formam um novo pedido para uma nova página a ser apresentada. Este processo demora tempo e pode ter efeitos pouco positivos na experiência de utilização, se pretender uma aplicação interativa e de rápida resposta.

Este comportamento predefinido das MPA pode ser resolvido ao tirar partido do AJAX, que permite que apenas uma parte da página seja atualizada. No entanto, temos de ter em atenção a complexidade adicionada por esta solução ao processo de desenvolvimento.
Uma MPA costuma utilizar JavaScript (JS) em front end para adicionar interatividade à aplicação, mas não depende de JS para apresentar o conteúdo da página. Tal torna uma MPA numa arquitetura que é adequada ao suporte de navegadores legados que costumam oferecer uma funcionalidade de JS mais limitada.

A grande vantagem de uma MPA assenta na otimização de motores de busca (sigla em inglês: SEO). Quando um pedido é feito ao servidor para apresentar uma nova página, a resposta é o conteúdo final para essa página. As ferramentas dos motores de busca conseguem ver exatamente o que o utilizador vê, por isso, a aplicação vai ter um bom desempenho no motor de busca. Esta é uma das grandes razões para alguns dos grandes websites, como a Amazon e o The New York Times, ainda utilizarem esta arquitetura.

Por outro lado, as aplicações desenvolvidas com esta arquitetura tendem a ser maiores e mais lentas, ao carregar constantemente páginas a partir do servidor, o que afeta a experiência de utilização de forma negativa. De uma perspetiva de desenvolvimento, o processo tende a ser mais complexo e pode resultar numa dissociação entre back end e front end.

O crescimento das aplicações de página única

Como o nome indica, uma SPA só tem uma única página. O Código necessário para apresentar a aplicação é encontrado em apenas um carregamento. Após este carregamento inicial, não é acionada qualquer atualização da página, não existem novos ficheiros HTML a serem transferidos do server. Em vez disso, a aplicação reapresenta partes da página enquanto resultado de qualquer navegação no navegador. Toda a comunicação que se segue entre a aplicação e o servidor tem apenas o objetivo de encontrar e publicar dados de e no servidor, e acontece tudo nos bastidores utilizando API bem definidos dos serviços de back end.

As SPA assentam fortemente em JS para conseguirem ouvir os eventos e reapresentar partes da página. Acontece tudo através de JS. Este tipo de arquitetura é dependente de JS e não há volta a dar. Por causa disto, as SPA privilegiam navegadores modernos que oferecem um suporte de JS mais vasto e atualizado.

O comportamento de uma SPA torna uma aplicação muito rápida e de rápida resposta, oferecendo ao utilizador uma experiência interativa semelhante utilizando um dispositivo móvel ou um computador. Da perspetiva do desenvolvimento, conseguimos dissociar o back end e o front end. O back end já não é responsável por apresentar a visão, e a comunicação entre os dois módulos abrange apenas as trocas de dados. O processo de deploy também é muito mais simplificado.

O problema com as SPA prende-se no desafio colocado ao desenvolver a aplicação SEO-friendly. Dado que a maioria do conteúdo da página é carregado assincronamente, as ferramentas dos motores de busca não têm maneira de saber que mais dados vão ser adicionados à página. Não existe uma única solução predefinida para resolver este obstáculo, mas existem algumas ferramentas que podem ser utilizadas para criar uma SPA que seja SEO-friendly. Também é provável que as estruturas de SPA vão evoluir com o tempo para que seja mais fácil para as ferramentas dos motores de busca encontrarem e organizarem o conteúdo da aplicação.

As aplicações de página única são o futuro da web?

Este tipo de aplicações existe há anos, mas só agora está a tornar-se mais comum do mundo dos programadores. Isto deve-se principalmente à aparência e à crescente popularidade das estruturas e bibliotecas web que permitem desenvolver SPA fora do comum de forma rápida e eficiente, tais como Angular e React. Se compararmos a evolução de tendências nestes termos, é possível ver que a popularidade das SPA, Angular e React, evoluíram proporcionalmente ao longo do tempo.

As SPA têm vindo a tornar-se cada vez mais populares, e parece que não vão desaparecer tão cedo. As vantagens técnicas e funcionais das SPA serem SEO-friendly não podem ser ignoradas, e espera-se que este tipo de aplicações se torne disponível mais frequentemente, especialmente com a evolução das tecnologias envolvidas e, com sorte, a resolução de alguns dos obstáculos das SPA. No entanto, precisamos de reconhecer que, de momento, uma SPA pode não ser a solução certa para todos os projetos.

Algumas características das MPA tornam este método mais adequado para aplicações que tenham muito conteúdo em categorias diferentes e onde o desempenho de um motor de busca seja muito importante, tal como em lojas online ou marketplaces. As SPA são adequadas para plataformas dinâmicas, possivelmente com uma componente móvel onde uma interface complexa e uma experiência de utilização satisfatória e reativa sejam fatores essenciais a ser considerados, tais como em redes sociais ou comunidades fechadas. Existe uma Terceira possibilidade para quem gosta das SPA e das suas características, mas não consegue encaixar a sua aplicação uma só página: considerando uma aplicação híbrida, pode tirar o melhor dos dois métodos.

Nenhuma arquitetura é certa ou errada. Só precisa de saber as suas necessidades e escolher a melhor solução para si e para a sua aplicação.

Patrícia PereiraSingle Page Applications
read more