A crescente procura pelo desenvolvimento de SPA esta cada dia maior, desde o final de 2013 acompanho de perto esta vertente em constante crescimento. Então, agora é o momento para falar sobre o assunto.

Aplicações de uma única página, do Inglês Single-Page Applications (SPA). São aplicativos Web que carregam uma única página HTML e atualizam dinamicamente essa página conforme acontece iterações do usuário com o aplicativo.

SPAs usa AJAX e HTML5 para criar aplicativos WEB fluido e responsivo, sem a necessidade de recarregar a página sempre que precisamos de informações atualizadas.Quando queremos atualizar uma página WEB presionamos a tecla F5 não é? A ideia central do conceito de SPA é que um aplicativo WEB seja fluido, assim como uma aplicação Desktop. Você nunca precisou presionar F5 para atualizar informações em uma aplicação desktop correto? Acredito que não!.

As atualizações de páginas, no entanto, significa processamento sob responsabilidade do navegador, ou seja, acontece no lado do cliente(front-end) através do famoso e temido por alguns, o Java Script. Para desenvolvedores Java tradicional no qual eu me incluo, pode ser difícil a mudança. Felizmente existem vários frameworks JavaScript open source que tornam mais fácil a tarefa de criar SPA.

Os frameworks mais evidentes para desenvolvimento de SPAs são:

  • Ember
  • Backbone
  • Knockout
  • Angular
  • Batman
  • Meteor
  • CanJS
  • Spine

Qual é a diferença entre os ciclos de vida das abordagens(Aplicativo WEB Convencional x SPA)?

Em um aplicativo WEB convencional, sempre que o aplicativo envia uma requisição para o servidor(back-end), o servidor processa a requisição e retorna uma página HTML e isso desencadeia uma atualização de página no navegador. Se você já implementou um aplicativo Web Forms ou uma aplicação JSP, este ciclo de vida das páginas deve parecer familiar. Em um SPA, após a primeira carga de página, toda e qualquer interação com o servidor acontece por meio de requisições AJAX. Estas requisições retorna dados geralmente em formato JSON, então o aplicativo utiliza estes dados em formato JSON para atualizar a página dinamicamente somente onde se deseja a atualização, ou seja, sem precisar recarregar toda a página para atualizar somente uma pequena área.

A Figura “Página Tradicional Ciclo de Vida vs. SPA Ciclo de Vida” mostra a diferença entre as abordagens.

Página Tradicional Ciclo de Vida vs. SPA Ciclo de Vida

Página Tradicional Ciclo de Vida vs. SPA Ciclo de Vida

O primeiro benefício do conceito de SPA é que os aplicativos são mais fluidos, responsivo e sem o efeito sanfona que recarrega e re-processa toda a página. Outro benefício pode ser de menor percepção e de maior impacto que diz respeito de como você arquiteta um aplicativo WEB. Enviar dados de aplicativos em formato JSON cria uma separação lógica entre a camada de apresentação(front-end em HTML5) e a lógica do aplicativo no back-end, por exemplo: Serviço em REST com respostas em formato JSON.

Esta separação torna mais fácil prover o desenvolvimento separado das camadas. Em um aplicativo SPA bem arquitetado, você é capaz de mudar a camada de front-end e não precisará refatorar a implementação do back-end, esta é a ideia e seria um caminho magnífico. Mas esta ação, talvez o desenvolvedor veja somente com a experiência.

Ao contrário de anos atrás, quando nos desenvolvedores delegávamos todo o processamento para os servidores, fazíamos isso porque as máquinas eram menos potentes ao contrário dos computadores atuais que estão cada dia mais potentes, e os navegadores mais inteligentes. Em um aplicativo SPA toda a iteração do Usuário com a Interface ocorre no front-end que é executado pelo navegador através do JavaScript e CSS. Após o navegador carregar a página inicial, o servidor trabalha apenas na camada dos serviços (SOAP e REST). A camada cliente somente precisa ter conhecimento das requisições HTTP que ele deve fazer para iteração com os serviços. Isso torna independente as camadas.

Esta independência em desenvolver a camada do cliente e a camada do servidor de maneira isolada, é um sonho que eu tenho desde 2006 quando iniciei no desenvolvimento WEB no primeiro ano da faculdade incentivado pela professora Helen de Freitas Santos. Lembro dela falar, precisamos ter uma arquitetura independente. Parece que esta hora chegou. É claro que trabalhar assim sempre foi possível, porem é necessário que Analistas, Desenvolvedores e Arquitetos olharem pros projetos de fora da caixa e não se limite ao ambiente que estão. Este foi mais um desabafo, ufa. :D. Voltando ao assunto, com esta proposta da arquitetura SPA estas atividades se tornam mais intuitivas.

Esta arquitetura deixa o front-end e o back-end independentes. Você poderia substituir todo o back-end que executa os serviços, desde que não altere a API, você não vai quebrar o cliente. O inverso também é verdadeiro, você pode substituir todo o aplicativo cliente sem alterar a camada de serviço. Por exemplo, você pode desenvolver um aplicativo nativo para dispositivos móveis que consome os mesmos serviços de um aplicativo SPA.

Estou escrevendo uma aplicação SPA de exemplo com o framework AngulaJs para mostrar na prática alguns recursos deste paradigma. Então pra este conteúdo não ficar muito extenso vou disponibilizar a aplicação em um próximo post.

Qualquer dúvida estou a disposição.

Por enquanto é isso, até o próximo post.

5 comentários para “Single-Page Applications (SPA)

  1. Fala Ednei, tudo bem? Muito bom o artigo, parabéns!

    Só pra complementar, senti falta de você mencionar o React Js (que não é um framework, é apenas o V de um MV*). Uma outra library que vale a pena olhar chama-se Vue.js.

    Para referência, vou deixar aqui uma apresentação feita por um brasileiro que eu considero a melhor (por todo cuidado e simplicidade de entendimento) apresentação de React Js.

    https://speakerdeck.com/pedronauck/reactjs-keep-simple-everything-can-be-a-component

    Site do Vue.js: http://www.vuejs.org

    🙂

    • Tudo bem Vitor, obrigado por sua visita e feedback sobre o conteúdo.
      Conheço um pouco sobre o Vue, e acredito que a dinâmica dele seja outra, vou vou estudar um pouco mais, tanto ele quanto o ReactJs, com certeza.

      Obrigado pelo retorno, e mais uma vez agradeço sua visita e feedback.

      Grande abraço.

  2. Éderson Monteiro on 31 de julho de 2015 at 12:16 said:

    Parabéns pelo excelente post!

  3. Charles Eduardo on 7 de agosto de 2015 at 21:40 said:

    Excelente forma na descrição! Show!

  4. Iran Marcius on 14 de março de 2018 at 21:44 said:

    Ótimo artigo. Sugestão para um próximo tópico: quando é que uma aplicação se torna grande demais para ser uma aplicação SPA? Questão difícil de responder pois dependemos das especificações do cliente, seja ele um navegador de desktop ou um dispositivo móvel. A solução seria uma aplicação híbrida? Grande abraço!

Deixe um comentário

Campos obrigatórios são marcados *

Post Navigation