Introdução

Nesta edição, trago até vós um artigo sobre o conceito das SPAs. Para os leitores que não estão tão familiarizados com este conceito e quais as vantagens e desvantagens no uso de uma SPA, assim como as diferenças entre ter aplicações de múltiplas páginas e de página única, permitam-me que vós conduza pelas próximas páginas.

A primeira página web surgiu em 1994, uma simples página HTML sem grandes estilos ou animações associados.

Com o passar dos anos, as pessoas foram-se tornando cada vez mais exigentes, com um aumento significativo na evolução tecnológica.

A tecnologia evoluiu, os novos dispositivos (smartphones, tablets) começaram a aparecer, obrigando as aplicações a serem suportáveis, responsivas e visíveis em cada um desses dispositivos. Cada vez mais, os utilizadores pretendem aplicações mais rápidas, fluídas, com tempos de resposta rápidos, que sejam suportadas em todos os dispositivos, que corram numa única página como se de uma aplicação desktop se tratasse. Ora tudo isto exige aos programadores que repensem a forma como constroem a arquitetura da sua aplicação. É aqui que entra o conceito das Single Page Applications também conhecido pelo acrónimo de SPA, termo que usaremos durante o artigo.

SPA é o conceito usado para aplicações web que carregam uma página HTML simples e em seguida atualiza a página dinamicamente em vez de carregar novas páginas. Após o carregamento da página inicial a aplicação SPA comunica com o servidor por meio de solicitações AJAX (Asynchronous JavaScript and XML).

Uma vez que grande parte da aplicação se centra do lado do cliente, exigiu aos programadores um maior domínio da linguagem Javascript. Esta também tem vindo a evoluir exponencialmente ao longo dos anos.

Motivações para o uso de SPAs

Existem várias motivações no uso de uma aplicação como esta, sendo algumas delas as que enumero de seguida:

1. Reach
   As aplicações SPA podem ser acessíveis em diferentes plataformas e dispositivos desde que tenha um browser.
2. Responsive
   As aplicações necessitam de ser responsivas para serem facilmente visíveis nas diferentes resoluções de ecrãs.
3. Round Trip
   Grande redução do número de pedidos efetuados entre cliente e servidor. Uma vez que a aplicação se centra maioritariamente do lado do cliente, o programador só necessita de fazer os pedidos necessários para obter, gravar e listar os dados propriamente ditos, e não páginas HTML.
4. Melhor experiência de utilização
   A experiência de utilização numa aplicação deste tipo é mais imersiva.
5. Separação de responsabilidades entre cliente e servidor
   Numa SPA a divisão de responsabilidades entre aquilo que é cliente e o que é servidor torna-se evidente. Facilmente se torna possível ter pessoas dedicadas a trabalhar do lado do cliente, focadas no HTML5, CSS3 e Javascript e outras pessoas dedicadas ao lado do servidor, implementando uma Web Api, por exemplo, expondo os recursos necessários em resposta ao cliente.
6. Offline Applications
   O HTML5 permite mecanismos de Application Cache, o que significa que a aplicação pode ficar em cache e ser acessível sem ter acesso à internet. A vantagem deste mecanismo é o facto do utilizador conseguir aceder aos dados sem estar conectado à internet. Assim o carregamento dos dados torna-se mais rápido e reduz o carregamento ao servidor uma vez que este só é recorrido para efectuar uma actualização ou alteração. Uma outra forma pode passar por usar os mecanismos de local storage e session storage fornecidos pelo HTML5.

Considerações

Apesar das inúmeras vantagens existentes na construção e uso de SPA’s existem algumas considerações em ter em conta, sendo elas:

1. O primeiro carregamento da página pode ser lento
   A primeira vez que a aplicação é carregada poderá levar algum tempo uma vez que grande parte dos dados têm que ser carregados de inicio para que toda a interação possa ser efetuada maioritariamente do lado do cliente.
2. Deep-linking
   A navegação em aplicações como estas também pode tornar-se complicada, exigindo ao programador que implemente a funcionalidade de back por exemplo, algo que nos é diretamente fornecido pelo browser.
3. SEO
   Uma vez que não existem âncoras tende-se a que ferramentas de Searching como o Google não consigam encontrar facilmente este tipo de aplicações.

Agora que enumeramos algumas das desvantagens do uso de SPAs , passo a descrever as diferentes formas de funcionamento das aplicações de múltiplas páginas (aplicação web tradicional) e as SPAs.

Posteriormente mostramos uma junção destes dois tipos de aplicações que pode ser efectuado.

Comparação entre os diferentes tipos de aplicações

Aplicações web tradicionais

Estas aplicações são baseadas em navegação via browser não necessitando de instalação no cliente.

Uma aplicação web tradicional renderiza uma página web quando recebe um pedido HTTP vindo do browser. Após renderizadas são enviados de volta como uma resposta HTTP provocando uma actualização da página no browser, sendo esta substituída. A figura 1 mostra o ciclo de vida de uma aplicação web tradicional.

Como podemos constatar o peso sobre o desenvolvimento do lado do cliente é pequeno e o Javascript é usado para realizar alterações simples, seja a nível da interface ou das animações.

Aplicações Nativas

As aplicações nativas são aplicações stand-alone que necessitam de ser instaladas em primeiro lugar. Sendo que estas só podem correr nos dispositivos para as quais foram criadas. Estas aplicações são desenhadas para tirarem maior proveito do sistema operativo e hardware para as quais foram concebidas, no entanto torna o seu desenvolvimento mais complexo. Não se esqueça que ao desenvolver nativamente para dispositivos tem que ter em conta as versões dos drivers e até mesmo do sistema operativo.

Single Page Application

Como mencionado no início do artigo, uma Single Page Application é uma aplicação web que corre numa única página HTML, não necessitando de ser refrescada no browser para mudar para uma outra página.

Um outro aspecto destas aplicações é o facto de não necessitar de ser instalada do lado do cliente uma vez que corre no browser, é cross-platform e não necessita de gerir sessão do lado do servidor.

Numa SPA são efectuados pedidos cujo retorno se trata de dados no formato JSON que serão posteriormente processados e manipulados do lado do cliente. A figura 2 mostra o ciclo de vida de uma SPA.

Tabela comparativa dos diferentes tipos de aplicações

Junção entre Aplicações web tradicionais e SPAs

Um outro tipo de aplicação que se pode ter é a junção entre uma aplicação de múltiplas páginas com aquilo a que eu chamo de Mini-SPA.

Exemplo: Se estivermos a desenvolver uma aplicação de gestão de produtos e categorias do mesmo, podemos ter diferentes páginas, uma correspondendo à página HTML dos produtos e outra à página HTML das categorias e dentro destas, uma SPA que gere a listagem, inserção, alteração e remoção (operações CRUD, por exemplo) de produtos e/ou categorias, respetivamente.

Conclusão

Para concluir deixo-vos algumas frameworks que existem actualmente e que nos auxiliam na construção de SPAs sendo elas o Angular, Ember e Aurelia. Existem também algumas bibliotecas como o Knockout, Backbone entre outras que nos auxiliam na construção das chamadas Mini SPAs que referi acima.

Para começarem a desenvolver uma SPA, pensem primeiramente na estrutura da vossa aplicação em termos de conteúdos, HTML, CSS e aconselho-vos piamente a escolher uma destas frameworks e a estudar o seu funcionamento de forma a entenderem se responde às vossas necessidades.