O documento discute o uso da tecnologia AJAX para criar sistemas web mais interativos e dinâmicos, semelhantes a aplicativos desktop. Apresenta o framework Atlas da Microsoft, que facilita o desenvolvimento com AJAX seguindo padrões web. Fornece exemplos de uso do Atlas e discute as vantagens e desvantagens de se utilizar essa abordagem.

1. Utilizando AJAX para criar sistemas web 2.0 Bruno Feu Sapiens Soluções [email_address] Microsoft Student Partner Gold

2. Web “normal” Web 2.0 AJAX ATLAS ATLAS Toolkit Agenda

3. Antes de mais nada... Atlas ainda está em BETA. Nem tudo está documentado. Último release: Julho 2006. Versão final, fully suported, ainda este ano! Melhor ainda no ano que vem, com a chegada do ORCAS.

4. Como funciona a web? HTTP é stateless Não mantém estado Atualizações na página necessitam de envio ao servidor

5. Web “normal” Cada atualização requer um “round trip” do cliente para o servidor Mesmo pequenas alteração seguem tal protocolo Grande quantidade de dados fazem o usuário esperar Dificulta uma rica experiência do usuário

6. Web “normal” Arquitetura orientada ao servidor. Cliente e servidor não estão integrados.

7. Experiência do Usuário A web hoje é dinâmica? O mesmo conteúdo é apresentado a todos os usuários Aplicações Web ainda perdem de aplicações Desktop Alternativas Java Applets .Net WinControls Macromedia Flash

8. Experiência do Usuário Controles HTML são limitados Alguns navegadores provém melhorias Diferentes versões da aplicação para diferentes navegadores Sair da padronização W3C pode causar problemas futuros

9. Antigo paradigma Páginas web estáticas Provedores de conteúdo e informação Falta interatividade com o usuário Informação sempre vem do site para o usuário, ou seja, de cima para baixo

10. Web 2.0 Desaparecem os sites e os portais e aparecem as aplicações web O usuário interage com a aplicação, a customizando de acordo com seu gosto Usuários interagem entre sí Usuários provêm informação e conteúdo, ou seja, a informação vem de baixo para cima

11. Web 2.0 Serviços e interfaces são separados. Mashups Interface rica, leve e simples, sem roundtrips, mais parecidas com sistemas desktop (AJAX) Marketing de Performance Nova bolha?

12. Web 2.0 Exemplos: Wiki, Blogs, Tags, Del.icio.us, Digg, Google Home, Live.com, Flickr, You Tube, Orkut, My Space, You OS. Web 2.0 é muito mais que utilizar AJAX, é um novo paradigma Web 2.0 não é forma, é conteúdo

13. You OS

14. AJAX?! O que é isso?

15. AJAX A synchronous J avaScript A nd X ML Permite a troca de informações entre cliente e servidor e a atualização de partes de um site sem a necessidade de um round trip Trabalha de modo Síncrono ou Assíncrono

16. AJAX Existe desde 1998 (4ª geração) Microsoft Remote Scripting XmlHttpRequest inserido no IE5 1º site a utilizar o objeto foi o Outlook Web Access, em 2000

17. AJAX Não é uma tecnologia É uma técnica de programação Utiliza várias tecnologias CSS JavaScript/DOM XMLHTTP

18. XMLHTTP API utilizada por Web Browser Scripts JavaScript, Jscript, VBScript, etc. Utilizada para transferir dados XML entre um Browser (Cliente) e um servidor Utiliza protocolo HTTP

19. XMLHTTP Trabalha com qualquer tipo de arquivo Não está restrito a, mas normalmente utiliza XML, TXT, HTML ou JSON XmlHttpRequest é suportado por qualquer browser geração 5 ou superior

20. AJAX (Vantagens) Utiliza menos banda da rede. Utiliza menos CPU do servidor. Interface semelhante à sistemas Desktop convencionais. Oportunidade de reaprender JavaScript... (tá, não é bem uma vantagem).

21. AJAX (Vantagens) Operações não precisam mais aguardar resposta do servidor.

22. AJAX Fundamentos São cinco os fundamentos:

23. AJAX - Fundamentos Web Standards e CSS Seguir os padrões das definições do W3C (Word Wide Web Consortium). Permitir uma separação clara do que é programação, o que é conteúdo e o que é estilo visual. (C#/VB, XML e CSS)

24. AJAX - Fundamentos DOM (Document Object Model) O DOM é uma API que define claramente a estrutura e organização de um documento HTML É um modelo que pode localizar e alterar os elementos das páginas sem carregá-las novamente Utilizado em conjunto com Web Browser Scripts

25. AJAX - Fundamentos XML (Extensible Markup Language) XML é uma linguagem de markups focada na descrição de dados Possui portabilidade e transparência no transporte de dados sobre os firewalls Extremamente flexível, extensível, e de fácil utilização Pode ser substituído pelo JSON quando for necessária melhor performance

26. AJAX - Fundamentos JavaScript Possui a característica de poder ser executada pelo lado do cliente, sem envio de dados para o servidor Suportado em todos os navegadores atuais (IE, Firefox, Safari, etc.) É responsável pela união dos cinco componentes que fundamentam o AJAX

27. AJAX - Fundamentos XMLHttpRequest Presente nos navegadores: IE 5.0+, Safari 1.2, Mozilla / Firefox e Netscape 7 Tem a capacidade de executar a troca de dados com o servidor remotamente e de forma assíncrona Retorna dados em qualquer formato PADRÃO RECONHECIDO PELO W3C! http://www.w3.org/TR/XMLHttpRequest/ (05/04/06)

28. Anatomia Round-trip página usando AJAX Browser Solicitação de Dados Apresentação HTML Serviços JavaScript HTML + CSS + Dados ASP.NET Application Processos de Render Apresentação Aparência (Managed Code) XMLHTTP Dados Iniciais (HTML + CSS + Dados) Dados HTTP Dados XML Dados TXT

29. Implementando XMLHTTP Objeto XMLHttpRequest Criado pela Microsoft para o IE5 No Internet Explorer Outros navegadores var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //dependendo da versão… var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp = new XMLHttpRequest();

30. Solução ou outro problema? Ajax é difícil de implementar Mais uma linguagem a ser dominada JavaScript Difícil integração com ASP .NET Não é orientado a objetos Solução de problemas Criação de outros…

31. Agora… o Atlas!

32. ATLAS

33. ATLAS Framework para desenvolvimento de experiência do usuário mais rica, interativa e mais personalizada em aplicações Web

34. ATLAS Desenvolvimento orientado a objetos Sistema fortementa tipado, classes, herança,polimorfismo, namespaces, eventos, etc. Portabilidade entre navegadores Não é necessário código específico para cada navegador Bibliotecas tratam compatibilidade automaticamente

35. ATLAS Comportamentos e componentes Auto-completion, drag and drop, popups, etc Componentes que podem ser ligados a dados tão facilmente como controles nativos do .Net Gerenciamento de chamadas remotas Chamadas assíncronas via XMLHTTP Nenhuma ou poucas linhas de código Modelo de programação similar ao ASP .NET

36. ATLAS em ação!

37. ATLAS Toolkit Coleção com controles prontos e componentes para facilitar a criação de seus próprios controles para o ATLAS

38. ATLAS Toolkit em ação!

39. Desvantagens Quando não utilizar AJAX/ATLAS Necessidade do back button Preenchimento de formulários, quando houver chances do usuário perder a informação de vista Transição entre páginas diferentes Atualizações muito grandes (lembre-se que o AJAX utiliza scripts no lado do cliente)

40. Desvantagens “ Ah, vou manter esses 50000 registros no lado cliente e assim eu vou poder paginas esse grid sem a necessidade de re-envio de informações!” Utilize o AJAX somente quando houver algo a ganhar com isso.

41. Back Button http://www.nikhilk.net/BackButtonSupport.aspx

42. Atlas CTP Julho de 2006 Atlas Controls Toolkits (11/04/06) Último CTP a qualquer momento! Versão final “fully suported” até o final do ano! Totalmente integrado ao ORCAS, inclusive com Javascript Intellisense E... Últimas Novidades

43. Últimas Novidades O ATLAS não existe mais! Agora existe: Microsoft ASP.Net 2.0 AJAX Extensions Microsoft AJAX Library Microsoft ASP.Net AJAX Control Toolkit

44. E o futuro? Existem outras iniciativas… Magic Ajax, Schwarz Atlas é oficial da Microsoft O site oficial provém recursos Tutoriais Documentos Códigos http://atlas.asp.net

45. DÚVIDAS & PERGUNTAS Perguntas

46. LINKS & RECURSOS Atlas Web site http://atlas.asp.net Blogs http://www.nikhilk.net http://weblogs.asp.net/scottgu http://www.adrianobertucci.com Sites http://www.msdn.com.br http://www.linhadecodigo.com.br http://www.sapienssolucoes.com.br