O documento apresenta um histórico da web, como evoluiu a arquitetura de sites e a introdução do AJAX. Explica que AJAX utiliza tecnologias já existentes como JavaScript, XML e HTTP para permitir atualizações assíncronas na página e maior interatividade. Também destaca os desafios do desenvolvimento com AJAX, como compatibilidade entre navegadores e a necessidade de implementar mecanismos como histórico de navegação.

1. AJAX
Paradigma e Técnicas
para Programação de
Interfaces WEB
Miguel Galves
UNESP - 2006

2. 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

3. 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

4. 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

5. 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”

6. Anatomia simplificada de um
sistema HTTP/HTML
Fonte: “Ajax: A New Approach to Web Applications”

7. Panorama inicial
● HTML ● Apache
● CGI
● C e Perl
HTTP 1.0

8. 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

9. Mas a interação...
...continua a
mesma !!!

10. 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

11. 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.

12. 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...

13. Mas peraí...
Qual o motivo doQual o motivo do
sucesso repentinosucesso repentino
??

14. Motivo número 1
● Marketing é a alma do negócio!!!
● Nome AJAX criado em 18 de fevereiro de
2005
– Jesse James Garret
– “Ajax: ANew Approach to Web Applications”
● Artigo propõe um novo paradigma de
interação entre usuário e sites web.

15. 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.

16. Motivo número 2
● Britannica Online → Wikipedia
● CMS → Wikis
● mp3.com → Napster
● Sites pessoais → Blogs
● Diretórios (taxonomia) → Etiquetas (tags)
● Akamai → BitTorrent

17. Motivo número 3
● Popularização da banda larga
● Maior poder de processamento dos
computadores

18. Last but not least, motivo 4
● Killer app !!!
● Gmail

19. Resumindo
● Infraestrutura disponível.
● Nome criado.
● Momento de reflexão sobre web = ambiente
favorável.
● Aplicativo de sucesso mostrando as
possibilidades existentes.

20. Modelo de comunicação
cliente/servidor
Fonte: “Ajax: A New Approach to Web Applications”

21. Elementos chave
● Utiliza HTTP para comunicação
cliente/servidor.
● Resposta enviada em diversos formatos:
– XML
– JSON
– HTML
– Texto

22. 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.

23. 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.

24. Engine AJAX
Fonte: “Ajax: A New Approach to Web Applications”

25. 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.

26. 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.

27. 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

28. 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.

29. 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

30. 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.

31. 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.

32. 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

33. 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.

34. Condições de Contorno
● Compatibilidade de browser
● Concorrência
● Modelo de interação usuário/site
– Amnésia
– Feedback
● Ferramentas de desenvolvimento

35. 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.

36. 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.

37. 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.

38. 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.

39. 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.

40. Modelo de Interação:
Feedback
● Em site comum, o navegador exibe status
quando se carrega uma página.

41. Modelo de Interação:
Feedback
● Este feedback não acontece quando a
requisição é assíncrona.
● Desenvolvedor deve prover o feedback.

42. 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

43. 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.

44. 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 !!!).

45. 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

46. That's all folks !
DUVIDAS ?

47. Muito obrigado !
Log4Dev
Meu Blog de Tecnologia:
http://log4dev.wordpress.com