Baixe o app para aproveitar ainda mais
Prévia do material em texto
Web 2.0 e AJAX Web 2.0 e AJAX Augusto de Carvalho Fontes www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Agenda Agenda • Web 2.0 • Rich Internet Applications (RIA) • AJAX • Exemplo • AJAX Toolkits e Frameworks • Conclusão www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Web 2.0 Web 2.0 • O nome “Web 2.0” foi dado pela O’Reilly Media em 2004 • Novos serviços online – Britannica Online à Wikipedia – nytimes.com à Blogs – Sites pessoais à MySpace – abc.go.com à YouTube – Yahoo! Directory à del.icio.us • Características – Web como uma plataforma – Inteligência Coletiva – Mashups – Melhor experiência do usuário www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Web 2.0 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Web 2.0 Web 2.0 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Web 2.0 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. www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Web 2.0 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) www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Web 2.0 Web 2.0 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Rich Internet Application (RIA) 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Rich Internet Application (RIA) Rich Internet Application (RIA) • Modelo síncrono Tempo Cliente Servidor Atividade do usuário Atividade do usuário Atividade do usuário Processamento Processamento Transm issão Tr an sm is sã o Transm issão Tr an sm is sã o www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Rich Internet Application (RIA) 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) www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Rich Internet Application (RIA) Rich Internet Application (RIA) • Modelo assíncrono Tempo Cliente Servidor Atividade do usuário Processamento Transm issão T ra ns m is sã o Processamento Processamento Transm issão T ra ns m is sã o Processamento Transm issão T ra ns m is sã o Interação Exibição Interação Interação Exibição Exibição www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX AJAX www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX AJAX Usuário Navegador Servidor 1: Visita uma aplicação AJAX 2: HTML/JS/CSS iniciais www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX AJAX Usuário Event Handler Servidor 1: Ação 3: Processamento Response Handler 2: Requisição 4: Resposta 5: Atualizar Interface www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX AJAX • Métodos do XMLHttpRequest Interrompe uma requisição que está sendo processada. abort() Retorna o cabeçalho HTTP associado ao label getResponseHeader(label) Retorna uma lista de todos os cabeçalhos HTTP da resposta getAllResponseHeaders() Executa a requisição HTTP. send(postdata) Associa um valor a um cabeçalho HTTP antes de fazer a requisição. setRequestHeader(label, value) Abre e prepara uma requisição HTTP identificada pelo método e URL. asynchFlag indica se a comunicação deve ser assíncrona ou não. open(method, URL, asyncFlag, username, password) Descrição Método www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX AJAX • Propriedades do XMLHttpRequest Status HTTP recebido do servidor 200 = OK 403 = Forbidden 500 = Internal Error ... status 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 readystate Informa a função JavaScript que deve ser chamada a cada mudança de estado onreadystatechange Descrição Propriedade www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX AJAX • Propriedades do XMLHttpRequest Representação textual (string) do status HTTP recebido do servidor (OK, Not Found, etc) statusText Representação do documento XML enviado pelo servidor responseXML Representação textual (string) dos dados enviados pelo servidor responseText Descrição Propriedade www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Exemplo Exemplo Validação em tempo real pelo servidor www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX Toolkits e Frameworks 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX Toolkits e Frameworks 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX Toolkits e Frameworks 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX Toolkits e Frameworks AJAX Toolkits e Frameworks • Componentes JSF com comportamento AJAX – Esconde toda a complexidade da programação AJAX • O autor não precisa saber JavaScript – Componentes JSF são reutilizáveis – Ex: ajax4jsf, ICEfaces, DynaFaces www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX Toolkits e Frameworks 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX Toolkits e Frameworks 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) www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br AJAX Toolkits e Frameworks AJAX Toolkits e Frameworks • Frameworks com extensão para AJAX – Alguns Frameworks de desenvolvimento de aplicação para Web estão trazendo comportamento nativo ao AJAX – Ex: Ruby on Rails, Echo2, Shale www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Conclusão 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Conclusão 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 www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Links Links • Writely – http://www.writely.com/ • Flickr – http://www.flickr.com/ • GMail – http://www.gmail.com/ • HousingMaps – http://www.housingmaps.com/ • TadaList – http://www.tadalist.com/ • Amazon Diamond Search – http://www.amazon.com/gp/gsl/search/finder/1043928955 0300739?ie=UTF8&redirect=true&productGroupID=loose_diamonds • Novo Yahoo Mail Beta – http://whatsnew.mail.yahoo.com/ • Google Calendar – http://www.google.com/calendar/ www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Links Links • Google Suggest – http://www.google.com/webhp?complete=1&hl=en • Dojo Toolkit – http://dojotoolkit.com/ • Rico – http://openrico.org/ • Script.aculo.us – http://script.aculo.us/ • Direct Web Remoting (DWR) – http://getahead.ltd.uk/dwr • JSONRPC – http://jsonrpc.org/ • ajax4jsf – https://ajax4jsf.dev.java.net/ • ICEfaces – http://www.icesoft.com/products/icefaces.html www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br Links Links • DynaFaces – https://jsfextensions.dev.java.net/nonav/mvn/slides.html • DHTML Goodies – http://www.dhtmlgoodies.com/ • jMarki – https://ajax.dev.java.net/ • Google Web Toolkit (GWT) – http://code.google.com/webtoolkit/ • Ruby on Rails – http://www.rubyonrails.org/ • Echo2 – http://www.nextapp.com/platform/echo2/echo/ • Shale – http://struts.apache.org/strutsshale/ www.cliqueapostilas.com.br http://www.cliqueapostilas.com.br
Compartilhar