Patrícia Pereira

Single-page applications

These days, web applications are taking over old desktop applications, and bringing with them advantages such as decoupling from any device, and convenience of use. The demand of rich, complex and yet user-friendly web applications is growing every day. Along with this demand and also gaining more and more popularity in web development trends are single-page applications.

A single-page application (SPA) is a web application that interacts with the user by dynamically rewriting the current page rather than loading an entire new page from a server. This results in a more comfortable experience for the user, and one that is not continually interrupted with successive page navigations.

Background – traditional multi-page applications

Multi-page applications (MPA) are the ‘traditional’ web applications that reload and render an entire new page as the result of an interaction between the user and the web app. Every user interaction – like clicking a link or changing the URL – and every data exchange from and to the server will make another request for the new page to be rendered. This process takes time and can have a not-so-positive effect on user experience if you’re aiming for an interactive, responsive application.

This default behaviour from MPAs can be worked around by taking advantage of AJAX, which allows refreshing just part of a page. However, we have to be aware of the complexity added to the development process by this solution.

An MPA will most likely use JavaScript (JS) at the front end to add some interactivity to the application, but does not depend on it for the rendering and delivery of the page content. This makes MPA an architecture that is well suited to supporting legacy browsers that usually offer more limited JS functionality.

MPA’s big advantage relies on search engine optimisation (SEO). When a request is made to the server to render a new page, the response is the final content for that page. Search engine crawlers will be able to see exactly what the user sees, so the application will perform well on the search engine. This is one of the big reasons why some major web sites, like Amazon and The New York Times, are still using this architecture.

On the other hand, applications built using this architecture tend to be bigger and slower, constantly loading pages from the server, which affects the user experience negatively. From the development perspective, the process tends to be more complex and will result in a coupled back and front end.

The rise of single-page applications

Like the name says, an SPA has only a single page. All the necessary code to render the application is retrieved in a single page load. After this initial load, no page reload is triggered, there is no new html file being fetched from the server. Instead, the application re-renders parts of the page as a result of any navigation in the browser. All the following communications between the application and the server are aimed at retrieving or posting data from and to the server and occur behind the scenes using well defined APIs from the back-end services.

SPAs rely heavily on JS to be able to listen to events and re-render parts of the page. Everything happens through JS, this kind of architecture is dependent on it and there is no way around it. Because of this, SPAs favour modern browsers that offer vast, more up-to-date JS support.

The behaviour from an SPA makes it a super-fast, responsive application, offering the user an interactive experience resembling that using a mobile or desktop. From the development perspective, we achieve a decoupled back and front end. The back end will no longer be responsible for rendering the view and the communication between the two modules will only comprise of data exchanges. We also simplify the deployment process greatly.

The problem with SPAs resides in the challenge posed by making the application SEO friendly. Given that most of the page content is loaded asynchronously, search engine crawlers have no way of knowing that more data is coming to the page. There is no single standard solution to handle this drawback, but there are some tools that can be used to create an SEO-friendly SPA. It is also probable that in time SPA frameworks will evolve to make it easier for search engines to crawl and index application content.

Are single-page applications the future of the web?

These type of applications have been around for years, but they are only now becoming widespread in the developer world. This is mainly due to the appearance and increasing popularity of web frameworks and libraries that allow developing SPAs out of the box quickly and efficiently, such as Angular and React. If we compare the trend evolution in these terms, we can see that the popularity of SPAs, Angular and React evolved proportionately over time.

SPAs have been getting more and more popular and it looks as if they are not going anywhere in the near future. The technical and functional benefits of SEO-friendly SPAs cannot be ignored and it is expected these type of applications will become available more frequently, especially with the evolution of the technologies involved and hopefully the resolution of some of the SPA pitfalls. However, we need to acknowledge that right now a SPA may not be the correct solution to every project.

Some MPA characteristics make this approach best suited to applications that serve a lot of content in different categories, and where search engine performance is highly important, such as online stores or marketplaces. SPAs are a good fit for dynamic platforms, possibly with a mobile component where a complex interface and a satisfying and reactive user experience are key factors to be considered, such as social networks or closed communities. A third possibility exists for those who like SPAs and their characteristics but cannot fit the application onto a single page: by considering an hybrid application you can make the best of both approaches.

No architecture is super right or super wrong, you just need to know your necessities and choose the best solution for you and your application.

Patrícia PereiraSingle-page applications
read more

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