Ajax Design Patterns no ASP.NET MVC

As aplicações web tendem a lidar com dados assincronamente, devido ao grande número de acessos e também à natureza de seu funcionamento. Assim, precisamos de um meio para lidar com essa assincronia, e o AJAX desponta como uma das melhores e mais utilizadas alternativas. As aplicações que utilizam AJAX vão desde chats até transmissão de esportes no formato “minuto a minuto”, muito comum atualmente.

Por natureza, aplicações assíncronas são mais complexas e difíceis de entender. Logo, precisamos de padrões de projeto para garantir que o código não se torne completamente impossível de ser entendido. Ao longo desse artigo, veremos alguns dos principais design patterns para utilização do AJAX. O primeiro deles é o Periodic Refresh, que é utilizado para controlar a atualização periódica dos dados da página. O padrão Timeout é utilizado em conjunto com o primeiro para garantir que as chamadas periódicas não fiquem sendo executadas indefinidamente. Outro padrão que veremos é o Unique URL, para garantir que nossas páginas, mesmo assíncronas, tenham URLs diferentes baseadas em estados da aplicação. Por fim, veremos o Predictive Fetch, que permite que façamos o fetch dos dados que serão provavelmente mais buscados pelo usuário, acelerando assim o processo.

Os padrões que veremos são extremamente úteis e compõem o que é conhecida como a Camada de Experiência do Usuário. Essa camada transcende o que vemos na Camada de Apresentação para garantir uma experiência ao usuário com ações e respostas eficiente, não se limitando àquilo que ele está visualizando na página.

Ao longo desse artigo vamos lidar com várias bibliotecas que vão além do JavaScript comum. Existem várias bibliotecas desse tipo que podem ser utilizadas para facilitar o desenvolvimento das aplicações AJAX. A Microsoft possui uma biblioteca específica para utilização do AJAX juntamente com o AJAX Control Kit, embora também suporte a jQuery. Esta última é uma das mais utilizadas bibliotecas JavaScript do mercado, bastante simples e que costuma facilitar bastante a vida dos desenvolvedores web sem prejudicar o desempenho de forma significativa.

O que é o AJAX?

AJAX é um acrônimo e significa Asynchronous JavaScript and XML. Embora muitos desenvolvedores e pessoas comuns acreditam que se trate de um recurso, biblioteca ou tecnologia, o AJAX é mais do que isso. É um modo de programação que surge para nos ensinar a lidar com chamadas assíncronas utilizando tecnologias que conhecemos bem e são suportadas em todos os navegadores do mercado: JavaScript e XML. Ele permite que o cliente da aplicação faça call-backs assincronamente do navegador para o servidor.

O funcionamento do AJAX é relativamente simples: os dados retornados pelo servidor estão serializados em XML. Logo, é preciso algum tipo de manipulação para lidarmos com esses dados. Atualmente, é mais interessante utilizarmos JSON (BOX 1) ao invés de XML, devido ao JSON ser mais leve e, portanto, mais rápido em termos de desempenho.

BOX 1. JSON – JavaScript Object Notation

JSON é um formato de troca de dados extremamente leve. Devido à sua simplicidade, se tornou a escolha dos desenvolvedores para utilização com AJAX e outras chamadas assíncronas. Além disso, é fácil para pessoas entenderem e escreverem e também para as máquinas transformarem e gerarem, o que o torna melhor que XML nesse tipo de aplicações.

A tecnologia utilizada por baixo do AJAX é um objeto: XMLHttpRequest. Esse objeto permite que o código do cliente, em JavaScript, envie requisições HTTP e lide com as respostas. A habilidade de requerer dados de forma assíncrona é apenas metade da funcionalidade do AJAX, visto que é necessário atualizar a página com os novos dados que foram recuperados. É aí que entra o DOM (Document Object Model). Ele permite que a página seja atualizada com os novos dados recuperados pelo objeto XMLHttpRequest. Esses dois pedaços de tecnologia, em conjunto, tornam possível o funcionamento do AJAX.

Essa tecnologia irá normalmente ser executada por “baixo dos panos”, ou seja, não veremos que ela está executando dessa forma. Isso porque as bibliotecas que utilizaremos cuidam da parte complexa que envolve esses objetos e a implementação do DOM entre os diferentes navegadores, evitando que precisemos nos preocupar com esses detalhes.

Apresentando os Design Patterns do AJAX

Os Design Patterns são muito comuns em código do lado do servidor, que em geral é muito maior e por isso necessita de maior organização. Entretanto, também existem padrões preparados para o cliente, e é aí que entram os que veremos ao longo do nosso artigo. A ideia é que esses padrões auxiliem com as melhores práticas no desenvolvimento de software com AJAX.

O primeiro dos padrões que veremos neste artigo, o Periodic Refresh, é facilmente identificável pelo próprio nome. Ele irá nos permitir preparar uma atualização, ou refresh, periódica de nossa página. Essa ação nos permite trazer dados de forma assíncrona para a página, algo muito comum em chats ou feeds de notícias. Falando em termos técnicos, faremos uma chamada a XMLHttpRequest periodicamente, recuperando informações novas ou atualizadas e atualizando a visualização. Outra aplicação bastante comum desse padrão é em contas de e-mail baseadas no navegador: automaticamente, o navegador checa por novos e-mails e atualiza a página conforme esses e-mails vão chegando. "