AJAX

Paradigma e Técnicaspara Programação de

Interfaces WEB

Miguel GalvesUNESP - 2006

Agenda

● Pequeno histórico da Web● Modelo de funcionamento de um site● Evolução da arquitetura de sites● AJAX: Definição● Motivo do sucesso● Modelo de funcionamento● Vantagens● Problemas● Ferramentas e libs de suporte

Recapitulando...

● 1969: Criação da ARPANET

● 1981: Criação da rede BITNET– Rede de comunicação universitária

● 1983: Primeira rede TCP/IP operacional nos EUA.

● Killer App dos primórdios da rede mundial de computadores: e-mail

WWW

● 1991: Tim Berners Lee, do CERN, propõe um protocolo para acesso e visualização de arquivos baseado em Hipertexto.

● HTML

● HTTP

● Killer app: NCSA MosaicNCSA Mosaic

Anatomia simplificada de um sistema HTTP/HTML

● Arquivos de texto formatados por meio de tags (HTML).

● Sistema de localização de recursos padronizado (URL).

● Links que permitem ir de um arquivo para o outro (HTTP).– “Navegação”

Anatomia simplificada de um sistema HTTP/HTML

Fonte: “Ajax: A New Approach to Web Applications”

Panorama inicial

● HTML ● Apache● CGI● C e Perl

HTTP 1.0

Evoluções do panorama

● DHTML● CSS● JavaScript● VBScript● XHTML● XML● Applets● Flash● Shockwave

● Linguagens– Python– Ruby– Java

● Servidores de aplicação– Zope– Tomcat– Jboss

● CMS

HTTP 1.1

Mas a interação...

...continua a mesma !!!

AJAX

● Asynchrounous JavaScript XML● Paradigma de desenvolvimento de interfaces

Web● Conjunto de tecnologias bem conhecidas

– Javascript + DOM– XML– CSS + HTML

● O elemento responsável pela mágica:– XMLHTTPRequest

Quebrando alguns mitos

● AJAX não é uma tecnologia !● AJAX não necessita de lib !● AJAX não é dependente de tecnologia no

servidor !● AJAX não modifica o protocolo de

comunicação entre cliente e servidor !● Todas as tecnologias necessárias para

desenvolvimento AJAX estão embutidas nos navegadores.

Mas peraí...

● HTML foi criado em 1991● CSS foi proposto em 1994● Javascript foi criado em 1995● XML foi proposto em 1997● XMLHTTPRequest foi adicionado ao IE 5.0

em 1999● AJAX foi “criado” em 2005...

Mas peraí...

Qual o motivo do Qual o motivo do sucesso repentinosucesso repentino

??

Motivo número 1

● Marketing é a alma do negócio!!!

● Nome AJAX criado em 18 de fevereiro de 2005– Jesse James Garret– “Ajax: A New Approach to Web Applications”

● Artigo propõe um novo paradigma de interação entre usuário e sites web.

Motivo número 2

● Web 2.0– Termo proposto pro Tim O'Reilly

● Web como plataforma de serviços e não apenas como plataforma de conteúdo.– Sistemas que agreguem valor ao usuário

● Maior interação do usuário com os sites.– Usuário deixa de ser mero espectador.

Motivo número 2

● Britannica Online → Wikipedia

● CMS → Wikis

● mp3.com → Napster

● Sites pessoais → Blogs

● Diretórios (taxonomia) → Etiquetas (tags)

● Akamai → BitTorrent

Motivo número 3

● Popularização da banda larga

● Maior poder de processamento dos computadores

Last but not least, motivo 4

● Killer app !!!

● Gmail

Resumindo

● Infraestrutura disponível.

● Nome criado.

● Momento de reflexão sobre web = ambiente favorável.

● Aplicativo de sucesso mostrando as possibilidades existentes.

Modelo de comunicaçãocliente/servidor

Fonte: “Ajax: A New Approach to Web Applications”

Elementos chave

● Utiliza HTTP para comunicação cliente/servidor.

● Resposta enviada em diversos formatos:– XML – JSON – HTML– Texto

Elementos chave

● Permite atualizar apenas uma parte da página, via Javascript.

● Executa conexões assíncronas (background)– Interface continua funcional entre envio de

requisição e recepção da resposta.

● Aumento do número de conexões, com transferência de quantidade menor de dados por conexão.

Elementos chave

● Requer uma camada extra para processamento:Engine AJAX.

● Engine “tradicionalmente” escrito em Javascript.

● Engine executa boa parte do processamento antes delegados ao servidor e ao navegador.

Engine AJAX

Fonte: “Ajax: A New Approach to Web Applications”

Engine AJAX: Atribuições

● Pré-processamento de dados.● Registro de handler de recepção.● Envio da requisição.● Pooling para verificar se processamento foi

efetuado.● Recepção e processamento dos dados

recebidos, caso necessário.● Rendering do resultado no navegador.

Engine AJAX:Pré-Processamento

● Fase tradicionalmente de responsabilidade do navegador.

● Coleta os dados a serem enviados ao servidor:– Dados de formulário– Informações processadas pelo script.

Engine AJAX:Pré-Processamento

● Converte os dados para o formato apropriado para requisição.– Substitui espaços por símbolo +– Substitui acentos e símbolos especiais como

&,%,=,+ e outros pelo código UTF-8

● Monta String de requisição– Formato de URL– Par (chave, valor)– Exemplo: nome=Miguel&sobrenome=Galves

Engine AJAX:Registro de handler e envio de requisição

● Define uma função handler, que irá tratar a resposta assim que esta estiver disponível.

● Define o objeto que será utilizado para envio da requisição:– IE: ActiveXObject(“Microsoft.XMLHTTP”)– Firefox: XMLHTTPRequest()

● Define o método de envio (POST ou GET).● Define cabeçalhos opcionais.● Executa o envio.

Engine AJAX: Pooling

● Servidor não envia sinais ao navegador.● Cliente tem que ficar em pooling, verificando

se resposta já foi enviada.● Processo de pooling ocorre em background

– Thread separada, gerenciada pelo navegador.● A cada ciclo de verificação, a função handler

é chamada.– Handler deve verificar se a notificação

corresponde ao final do processamento, ou a eventuais erros de envio/recepção

Engine AJAX: Recepção e processamento dos dados

● Resposta pode vir em diversos formatos:XML, HTML, JSON, ...

● XML e JSON: necessário extrair os dados da árvore para uso pelo script.

● Decodificação de strings.● Eventuais processamentos não efetuados

pelo servidor podem ser executados nesta fase, com javascript.

Engine AJAX: Rendering

● Modifica a página exibida no navegador.

● Utiliza a interface de Javascript com CSS para mexer em estilos.

● Utiliza a interface de Javascript com DOM HTML para remover e inserir novos elementos na página.

Vantagens de AJAX

● Transição entre estados mais leve e eficiente.

● Aprimora a interatividade entre o usuário e o site:– Google Calendar

● Permite oferecer funcionalidades próximas às funcionalidades oferecidas por aplicações desktop.– Yahoo! Mail = Outlook– Google Spreadsheets = Microsoft Excel

Mas nem tudo são flores...

● Desenvolvimento de sites utilizando AJAX podem ser muito trabalhosos.

● Existe uma série de condições de contorno que devem ser levadas em conta quando se desenvolve um site em AJAX.

Condições de Contorno

● Compatibilidade de browser● Concorrência● Modelo de interação usuário/site

– Amnésia– Feedback

● Ferramentas de desenvolvimento

Compatibilidade de browser

● Navegadores apresentam incompatibilidades em vários aspectos:– Registro e tratamento de eventos– Manipulação de DOM– Manipulação do objeto de requisição– CSS

● Desenvolvimento de sites compatíveis com qualquer browser requerem uma boa quantidade de testes e códigos específicos.

Concorrência

● XMLHTTPRequest permite a criação de chamadas assíncronas concorrentes.

● Script deve ser capaz de tratar problemas de concorrência:– Por exemplo: um link clicado duas vezes por

enganos disparando duas requisições para um mesmo evento.

Modelo de interação usuário/site

● Modelo mental é muito importante na interação de uma pessoa com um software, site ou objeto.

● Modelo mental relacionado à navegação na internet bem conhecido:– Links, progressão darequisição, espera da

resposta, histórico.● AJAX pode modificar alguns desses

modelos.

Modelo de Interação:Amnésia

● Modelo de navegação web: páginas com links, levando de uma para outra.

● Cria-se um histórico de páginas visitadas. – Página visitada = URL único.

● Botões Back e Forward permitem voltar para página anterior.

Modelo de Interação:Amnésia

● Com Ajax, desenvolvedores tendem a criar sites com uma página só.

● Navegador não mantém histórico de navegação. Site com amnésia.– Back e forward inúteis.– Fonte de erros de navegação.

● Desenvolvedores tem que implementar o mecanismo de histórico manualmente.

Modelo de Interação:Feedback

● Em site comum, o navegador exibe status quando se carrega uma página.

Modelo de Interação:Feedback

● Este feedback não acontece quando a requisição é assíncrona.

● Desenvolvedor deve prover o feedback.

Ferramentas de desenvolvimento

● Por ser uma metodologia nova, não existem ferramentas que abrangem todo o fluxo de trabalho de forma adequada.

● Ferramentas necessárias:– Design– Programação Javascript– Debbuger

Debuggers: Firebug

● Plugin para Firefox● Exibe mensagens de erros de execução

Javascript.● Permite executar passo-a-passo scripts

carregados no navegador.● Permite analisar DOM, Eventos, Layout e

CSS da página.● Mostra a String de requisição enviada ao

servidor e o XML recebido.

Debuggers: Webdeveloper

● Plugin para Firefox● Permite analisar formulários, e modificar

modo de envio de requisição (POST/GET).● Permite análise de CSS, destaca elementos

na página, e suporta edição de CSS online.● Exibe código HTML gerado em runtime por

scripts (extremamente útil !!!).

Bibliotecas

● Existe uma grande quantidade de bibliotecas sendo desenvolvidos para facilitar o desenvolvimento de aplicações web.

● Bibliotecas oferecem tipos de funcionalidades diferentes:– Dojo e Rialto– OpenRico e Prototype– Google Web Toolkit– OpenLaszlo, TurboGears, Ruby On Rails

That's all folks !

DUVIDAS ?

Muito obrigado !

Log4DevMeu Blog de Tecnologia:

http://log4dev.wordpress.com