O documento discute Web 2.0, aplicações ricas na Internet (RIA) e AJAX. Web 2.0 refere-se a novas formas de interação online baseadas na inteligência coletiva e experiência do usuário. RIA busca trazer a usabilidade de aplicativos de desktop para a web. AJAX permite atualizações assíncronas na página para melhor experiência do usuário através do objeto XMLHttpRequest.
4. Web 2.0
• Web como uma plataforma
– Armazenamento e processamento no servidor
• Ex: Writely, Flickr, GMail
– Novas formas de lucro
– Não há lançamento de versões, o
aprimoramento é contínuo
– Não há necessidade de portar para diversas
plataformas
– APIs Online
• Google Maps API, Amazon Web Services, eBay API
6. Web 2.0
• Inteligência Coletiva
– Colaboração
• Wikis
• SourceForge.net
• YouTube
– Folksonomy
• Metodologia de recuperação de informação
• Tags (rótulos) são associados de forma colaborativa
– Na taxonomia geralmente os próprios autores associam os rótulos
• Ex: del.icio.us, flickr.com, last.fm, etc.
7. Web 2.0
• Inteligência Coletiva
– Filtros de SPAM colaborativos
– Blogs
• Mashups
– Utiliza conteúdo de mais de uma fonte para criar um
novo serviço
– Através de uma API ou Web Feeds (RSS, Atom, etc.)
– Ex: HousingMaps (Google Maps + Craigslist)
• Melhor experiência do usuário
– Rich Internet Applications (RIA)
9. Rich Internet Application (RIA)
• Incorporar usabilidade das aplicações em desktop
para a Web
– O programa responde de forma intuitiva e rápida
– Tudo acontece naturalmente
• Aplicações Web tradicionais
– A Web foi originalmente projetada para navegação por
documentos HTML
– Modelo “Clique, aguarde e recarregue”
– A página é transferida do servidor para o cliente e
recarregada a cada evento, envio de dados ou
navegação
– Modelo de comunicação síncrono
– Perda de contexto
10. Rich Internet Application (RIA)
• Modelo síncrono
Cliente
Atividade do usuário Atividade do usuário Atividade do usuário
Tr an sm is são
Tr an sm is são
T ran sm is são
Tempo
T ran sm is são
Processamento
Processamento
Servidor
11. Rich Internet Application (RIA)
• Rich Internet Application (RIA)
– A idéia não é tão recente
– Java Applet (1995)
– Macromedia Flash (1996)
– Java WebStart
– DHTML
• HTML + JavaScript + CSS + DOM
– DHTML com IFrame oculto
– Flex
• Flash + comunicação assíncrona
– AJAX
• DHTML + XMLHttpRequest (comunicação assíncrona)
12. Rich Internet Application (RIA)
• Modelo assíncrono
Cliente
Atividade do usuário
Interação Interação Interação
Processamento Exibição Exibição Exibição
o
o
o
T ran s m is s ã
T ran s m is s ã
T ran s m is s ã
T ran s m is s ã
T ran s m is s ã
T ran s m is s ã
Tempo
o
o
o
Servidor Processamento Processamento Processamento
13. AJAX
• Asynchronous JavaScript and XML
– O termo surgiu em fevereiro de 2005 no artigo
“Ajax: A New Approach to Web Applications” de
Jesse James Garrett.
• Exemplos
– Tadalist
– Amazon.com Diamond Search
– Novo Yahoo Mail Beta
– Google Calendar
15. AJAX
• Características
– Modelo assíncrono
– Interface mais natural e intuitiva
– Atualização parcial da tela
• Apenas os elementos que contêm novas informações
são atualizados
• Não há perda de contexto
– Fluxo baseado em dados
18. AJAX
• Casos de uso para AJAX
– Validação em tempo real com lógica no servidor
• Ex: Verificar disponibilidade de um login de usuário
– Autocompletar
• Ex: Google Suggest
– Operações MestreDetalhe
• Ex: Carregamento de comboboxes
– Componentes de interface avançados (widgets)
• Ex: Árvores, menus, barra de progresso.
– Notificação proveniente do servidor
• Simulada através de requisições periódicas
19. AJAX
• Tecnologias Utilizadas
– HTML/XHTML (Estrutura)
• Maior necessidade de um documento bem formatado
– CSS (Apresentação)
• Permite separação da apresentação do documento (estilo)
• Pode ser alterado por JavaScript
– JavaScript (Comportamento)
• Amplamente utilizada
• Utilizado pela grande maioria dos navegadores. Não há
necessidade de instalação de plugins
– DOM
• Representa a estrutura de documentos XML e HTML
20. AJAX
• Tecnologias Utilizadas
– HTTP, Formulários
• É uma requisição HTTP comum
– Programação do lado do servidor
• O servidor ainda é necessário
• JSP, Servlets, JSF, Struts
– XMLHttpRequest
• Objeto JavaScript que fornece a comunicação
assíncrona com o servidor
21. AJAX
• XMLHttpRequest
– Objeto JavaScript
– Adotado pelos navegadores modernos
• Primeira implementação nativa no Mozilla 1.0 (2002)
– A World Wide Web Consortium publicou uma
especificação como “Working Draft” em 5 de abril de
2006
– No Internet Explorer é um controle ActiveX chamado
MSXML
• O IE7 irá suportar o objeto XMLHttpRequest de forma nativa
22. AJAX
• XMLHttpRequest
– Comunicase com o servidor utilizando requisições
HTTP comuns: GET/POST
– Permite comunicação assíncrona
– Funciona ao fundo
• Não interrompe a operação do usuário
– O tipo da resposta (ContentType) pode ser:
• text/xml
• text/plain
• text/json
• text/javascript
23. AJAX
• Métodos do XMLHttpRequest
Método Descrição
open(method, URL, asyncFlag, Abre e prepara uma requisição HTTP identificada
username, password) pelo método e URL. asynchFlag indica se a
comunicação deve ser assíncrona ou não.
setRequestHeader(label, value) Associa um valor a um cabeçalho HTTP antes de
fazer a requisição.
send(postdata) Executa a requisição HTTP.
getAllResponseHeaders() Retorna uma lista de todos os cabeçalhos HTTP da
resposta
getResponseHeader(label) Retorna o cabeçalho HTTP associado ao label
abort() Interrompe uma requisição que está sendo
processada.
24. AJAX
• Propriedades do XMLHttpRequest
Propriedade Descrição
onreadystatechange Informa a função JavaScript que deve ser chamada
a cada mudança de estado
readystate Estado atual da requisição, pode ser:
0 = não iniciada
1 = iniciando conexão
2 = conexão estabelecida
3 = em atividade (algum dado foi recebido)
4 = completa
status Status HTTP recebido do servidor
200 = OK
403 = Forbidden
500 = Internal Error
...
25. AJAX
• Propriedades do XMLHttpRequest
Propriedade Descrição
responseText Representação textual (string) dos dados enviados
pelo servidor
responseXML Representação do documento XML enviado pelo
servidor
statusText Representação textual (string) do status HTTP
recebido do servidor (OK, Not Found, etc)
26. AJAX
• API DOM (Document Object Model)
– Os navegadores mantém uma representação
dos documentos que estão sendo exibidos
• Disponível pelo objeto JavaScript document
– A API DOM permite que código JavaScript
altere a árvore DOM programaticamente
• Exemplos:
– Adicionar uma nova linha a uma tabela
– Alterar o conteúdo de uma DIV
– Alterar o estilo CSS de um elemento
28. AJAX Toolkits e Frameworks
• Tipos de soluções disponíveis hoje
– Bibliotecas JavaScript (lado do cliente)
– Frameworks de chamada remota via Proxy
– Componentes JSF com comportamento AJAX
– Wrappers
– Tradutor Java para JavaScript
– Frameworks com extensão para AJAX
29. AJAX Toolkits e Frameworks
• Bibliotecas JavaScript (lado do cliente)
– Pode ser utilizada com qualquer tecnologia do lado
do servidor
– Podem ser combinadas com outras bibliotecas
– Cuida de incompatibilidades de browsers
– Utiliza IFrame oculto se necessário
– Captura eventos de navegação como os botões
avançar e voltar
– Componentes de interface avançados (widgets)
– API JavaScript mais fácil de usar para controle de
eventos, erros, etc.
– Ex: Dojo Toolkit, Rico, Script.aculo.us
30. AJAX Toolkits e Frameworks
• Frameworks de chamada remota via Proxy
– Similar ao modelo de comunicação RPC
• Arquitetura baseada em stubs e skeletons
– O framework gera o stub do cliente (proxy) para
chamadas ao código do servidor
– Faz o marshalling de todos os parâmetros
– Ex: Direct Web Remoting (DWR), JSONRPC
– DWR 2.0 irá suportar AJAX Reverso
• Chamada JavaScript a partir do código Java
32. AJAX Toolkits e Frameworks
• Wrappers
– Atualmente existem vários toolkits com
diferentes componentes e sintaxes de uso
– Empacota (wrap) os componentes visuais em
custom tags (JSP) ou componentes JSF
– Tenta consolidar as diferentes bibliotecas
JavaScript (lado do cliente)
• Depende de bibliotecas como o Dojo, DHTML
Goodies, Script.aculo.us.
– Ex: jMarki
33. AJAX Toolkits e Frameworks
• Tradutor Java para JavaScript
– Desenvolve a aplicação AJAX usando apenas
código Java
– Quando a aplicação é implantada, converte
código Java para JavaScript
– “Hosted Mode” – permite depuração do código
– Ex: Google Web Toolkit (GWT)
35. Conclusão
• Prós
– Interface mais intuitiva e natural
– Fluxo baseado em dados (não em páginas)
– Não necessita de plugins
– Grande redução na carga na rede
• Apenas os dados relevantes para a solicitação do
usuário são trafegados
– Solução RIA mais viável atualmente
– Diversos toolkits e frameworks estão surgindo
36. Conclusão
• Contras
– Aumento de complexidade
• Pode ser resolvido com componentes JSF
– Código visível por hackers
– Ainda existe incompatibilidade de navegadores
– JavaScript é difícil de manter e depurar
– Existem poucos modelos de arquitetura e
melhores práticas
– Os Toolkits e Frameworks ainda estão imaturos
• A maioria em versão beta