Utilizando AJAX para Utilizando AJAX para criar sistemas web 2.0criar sistemas web 2.0

Bruno FeuBruno FeuSapiens SoluçõesSapiens Soluçõesbruno@sapienssolucoes.com.brbruno@sapienssolucoes.com.brMicrosoft Student Partner Gold

• Web “normal”Web “normal”

• Web 2.0Web 2.0

• AJAXAJAX

• ATLASATLAS

• ATLAS ToolkitATLAS Toolkit

AgendaAgenda

Antes de mais nada...Antes de mais nada...

• Atlas ainda está em BETA.Atlas ainda está em BETA.

• Nem tudo está documentado.Nem tudo está documentado.

• Último release: Julho 2006.Último release: Julho 2006.

• Versão final, fully suported, ainda este Versão final, fully suported, ainda este ano!ano!

• Melhor ainda no ano que vem, com a Melhor ainda no ano que vem, com a chegada do ORCAS.chegada do ORCAS.

Como funcionaComo funcionaa web?a web?

• HTTP é statelessHTTP é stateless• Não mantém estadoNão mantém estado

• Atualizações na página necessitam de Atualizações na página necessitam de envio ao servidorenvio ao servidor

Web “normal”Web “normal”

• Cada atualização requer um “round trip” Cada atualização requer um “round trip” do cliente para o servidordo cliente para o servidor• Mesmo pequenas alteração seguem tal Mesmo pequenas alteração seguem tal

protocoloprotocolo

• Grande quantidade de dados fazem o Grande quantidade de dados fazem o usuário esperarusuário esperar

• Dificulta uma rica experiência do Dificulta uma rica experiência do usuário usuário

Web “normal”Web “normal”

• Arquitetura orientada ao servidor.Arquitetura orientada ao servidor.

• Cliente e servidor não estão Cliente e servidor não estão integrados.integrados.

Experiência do UsuárioExperiência do Usuário

• A web hoje é dinâmica? A web hoje é dinâmica?

• O mesmo conteúdo é apresentado a O mesmo conteúdo é apresentado a todos os usuáriostodos os usuários

• Aplicações Web ainda perdem de Aplicações Web ainda perdem de aplicações Desktopaplicações Desktop

• AlternativasAlternativas• Java AppletsJava Applets

• .Net WinControls.Net WinControls

• Macromedia FlashMacromedia Flash

Experiência do UsuárioExperiência do Usuário

• Controles HTML são limitadosControles HTML são limitados• Alguns navegadores provém melhoriasAlguns navegadores provém melhorias

• Diferentes versões da aplicação para Diferentes versões da aplicação para diferentes navegadoresdiferentes navegadores

• Sair da padronização W3C pode causar Sair da padronização W3C pode causar problemas futurosproblemas futuros

Antigo paradigmaAntigo paradigma

• Páginas web estáticasPáginas web estáticas

• Provedores de conteúdo e informaçãoProvedores de conteúdo e informação

• Falta interatividade com o usuárioFalta interatividade com o usuário

• Informação sempre vem do site para o Informação sempre vem do site para o usuário, ou seja, de cima para baixousuário, ou seja, de cima para baixo

Web 2.0Web 2.0

• Desaparecem os sites e os portais e Desaparecem os sites e os portais e aparecem as aplicações webaparecem as aplicações web

• O usuário interage com a aplicação, a O usuário interage com a aplicação, a customizando de acordo com seu customizando de acordo com seu gostogosto

• Usuários interagem entre síUsuários interagem entre sí

• Usuários provêm informação e Usuários provêm informação e conteúdo, ou seja, a informação vem conteúdo, ou seja, a informação vem de baixo para cimade baixo para cima

Web 2.0Web 2.0

• Serviços e interfaces são separados.Serviços e interfaces são separados.

• MashupsMashups

• Interface rica, leve e simples, sem Interface rica, leve e simples, sem roundtrips, mais parecidas com roundtrips, mais parecidas com sistemas desktop (AJAX)sistemas desktop (AJAX)

• Marketing de PerformanceMarketing de Performance

• Nova bolha?Nova bolha?

Web 2.0Web 2.0

• Exemplos:Exemplos:• Wiki, Blogs, Tags, Del.icio.us, Digg, Wiki, Blogs, Tags, Del.icio.us, Digg,

Google Home, Live.com, Flickr, You Tube, Google Home, Live.com, Flickr, You Tube, Orkut, My Space, You OS.Orkut, My Space, You OS.

• Web 2.0 é muito mais que utilizar AJAX, Web 2.0 é muito mais que utilizar AJAX, é um novo paradigmaé um novo paradigma

• Web 2.0 não é forma, é conteúdoWeb 2.0 não é forma, é conteúdo

You OSYou OS

AJAX?! AJAX?! O que é isso?O que é isso?

AJAXAJAX

• AAsynchronous synchronous JJavaScript avaScript AAnd nd XXML ML

• Permite a troca de informações entre Permite a troca de informações entre cliente e servidor e a atualização de cliente e servidor e a atualização de partes de um site sem a necessidade de partes de um site sem a necessidade de um round tripum round trip

• Trabalha de modo Síncrono ou Trabalha de modo Síncrono ou AssíncronoAssíncrono

AJAXAJAX

• Existe desde 1998 (4ª geração)Existe desde 1998 (4ª geração)• Microsoft Remote ScriptingMicrosoft Remote Scripting

• XmlHttpRequest inserido no IE5XmlHttpRequest inserido no IE5• 1º site a utilizar o objeto foi o Outlook Web 1º site a utilizar o objeto foi o Outlook Web

Access, em 2000Access, em 2000

AJAXAJAX

• Não é uma tecnologiaNão é uma tecnologia• É uma técnica de programaçãoÉ uma técnica de programação

• Utiliza várias tecnologiasUtiliza várias tecnologias• CSSCSS

• JavaScript/DOMJavaScript/DOM

• XMLHTTPXMLHTTP

XMLHTTPXMLHTTP

• API utilizada por Web Browser ScriptsAPI utilizada por Web Browser Scripts• JavaScript, Jscript, VBScript, etc.JavaScript, Jscript, VBScript, etc.

• Utilizada para transferir dados XML Utilizada para transferir dados XML entre um Browser (Cliente) e um entre um Browser (Cliente) e um servidorservidor

• Utiliza protocolo HTTPUtiliza protocolo HTTP

XMLHTTPXMLHTTP

• Trabalha com qualquer tipo de arquivoTrabalha com qualquer tipo de arquivo• Não está restrito a, mas normalmente utiliza XML, Não está restrito a, mas normalmente utiliza XML,

TXT, HTML ou JSONTXT, HTML ou JSON

• XmlHttpRequest é suportado por XmlHttpRequest é suportado por qualquer browser geração 5 ou qualquer browser geração 5 ou superiorsuperior

AJAX (Vantagens)AJAX (Vantagens)

• Utiliza menos banda da rede.Utiliza menos banda da rede.

• Utiliza menos CPU do servidor.Utiliza menos CPU do servidor.

• Interface semelhante à sistemas Interface semelhante à sistemas Desktop convencionais.Desktop convencionais.

• Oportunidade de reaprender Oportunidade de reaprender JavaScript... (tá, não é bem uma JavaScript... (tá, não é bem uma vantagem).vantagem).

AJAX (Vantagens)AJAX (Vantagens)

• Operações não precisam mais Operações não precisam mais aguardar resposta do servidor.aguardar resposta do servidor.

AJAX AJAX FundamentosFundamentos

São cinco os fundamentos:São cinco os fundamentos:

AJAX - AJAX - FundamentosFundamentos Web Standards e CSSWeb Standards e CSS

• Seguir os padrões das definições do W3C (Word Seguir os padrões das definições do W3C (Word Wide Web Consortium).Wide Web Consortium).

• Permitir uma separação clara do que é Permitir uma separação clara do que é programação, o que é conteúdo e o que é estilo programação, o que é conteúdo e o que é estilo visual.visual. (C#/VB, XML e CSS) (C#/VB, XML e CSS)

AJAX - AJAX - FundamentosFundamentos DOM (Document Object Model)DOM (Document Object Model)

• O DOM é uma API que define claramente a O DOM é uma API que define claramente a estrutura e organização de um documento HTML estrutura e organização de um documento HTML

• É um modelo que pode localizar e alterar os É um modelo que pode localizar e alterar os elementos das páginas sem carregá-las elementos das páginas sem carregá-las novamentenovamente

• Utilizado em conjunto com Web Browser ScriptsUtilizado em conjunto com Web Browser Scripts

AJAX - AJAX - FundamentosFundamentos XML (Extensible Markup Language)XML (Extensible Markup Language)

• XML é uma linguagem de markups focada na XML é uma linguagem de markups focada na descrição de dadosdescrição de dados

• Possui portabilidade e transparência no Possui portabilidade e transparência no transporte de dados sobre os firewallstransporte de dados sobre os firewalls

• Extremamente flexível, extensível, e de fácil Extremamente flexível, extensível, e de fácil utilizaçãoutilização

• Pode ser substituído pelo JSON quando for Pode ser substituído pelo JSON quando for necessária melhor performancenecessária melhor performance

AJAX - AJAX - FundamentosFundamentos JavaScriptJavaScript

• Possui a característica de poder ser executada pelo lado Possui a característica de poder ser executada pelo lado do cliente, sem envio de dados para o servidordo cliente, sem envio de dados para o servidor

• Suportado em todos os navegadores atuais (IE, Firefox, Suportado em todos os navegadores atuais (IE, Firefox, Safari, etc.)Safari, etc.)

• É responsável pela união dos cinco componentes que É responsável pela união dos cinco componentes que fundamentam o AJAXfundamentam o AJAX

AJAX - AJAX - FundamentosFundamentos XMLHttpRequestXMLHttpRequest

• Presente nos navegadores: IE 5.0+, Safari 1.2, Presente nos navegadores: IE 5.0+, Safari 1.2, Mozilla / Firefox e Netscape 7Mozilla / Firefox e Netscape 7

• Tem a capacidade de executar a troca de dados Tem a capacidade de executar a troca de dados com o servidor remotamente e de forma com o servidor remotamente e de forma assíncronaassíncrona

• Retorna dados em qualquer formatoRetorna dados em qualquer formato

PADRÃO RECONHECIDO PELO W3C!PADRÃO RECONHECIDO PELO W3C! http://www.w3.org/TR/XMLHttpRequest/http://www.w3.org/TR/XMLHttpRequest/

(05/04/06)(05/04/06)

BrowserBrowser

SolicitaçãoSolicitaçãode de

DadosDados

Anatomia Anatomia Round-trip página usando AJAX Round-trip página usando AJAX

ApresentaçãoApresentaçãoHTMLHTML

ApresentaçãoApresentaçãoHTMLHTML

ASP.NET ApplicationASP.NET Application

ProcessosProcessosde Renderde RenderProcessosProcessosde Renderde Render

ApresentaçãoApresentaçãoAparênciaAparência(Managed(Managed

Code)Code)

ApresentaçãoApresentaçãoAparênciaAparência(Managed(Managed

Code)Code)

XMLHTTP

Dados Iniciais

(HTML + CSS + Dados)

ServiçosServiçosServiçosServiços DadosDados

HTTP

JavaScriptJavaScriptJavaScriptJavaScriptDados XML

Dados TXT

HTML + CSS + DadosHTML + CSS + Dados

Implementando Implementando XMLHTTPXMLHTTP

• Objeto XMLHttpRequestObjeto XMLHttpRequest• Criado pela Microsoft para o IE5Criado pela Microsoft para o IE5

• No Internet ExplorerNo Internet Explorer

• Outros navegadoresOutros navegadores

var xmlhttp = new var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");ActiveXObject("Msxml2.XMLHTTP");//dependendo da versão…//dependendo da versão…var xmlhttp = new var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");ActiveXObject("Microsoft.XMLHTTP");

xmlhttp = new xmlhttp = new XMLHttpRequest();XMLHttpRequest();

Solução ou outro Solução ou outro problema?problema?

• Ajax é difícil de implementarAjax é difícil de implementar

• Mais uma linguagem a ser dominadaMais uma linguagem a ser dominada• JavaScriptJavaScript

• Difícil integração com ASP .NETDifícil integração com ASP .NET• Não é orientado a objetosNão é orientado a objetos

• Solução de problemasSolução de problemas• Criação de outros…Criação de outros…

Agora… o Atlas!Agora… o Atlas!

ATLASATLAS

ATLASATLAS

Framework para Framework para desenvolvimento de experiência desenvolvimento de experiência do usuário mais rica, interativa e do usuário mais rica, interativa e

mais personalizada em mais personalizada em aplicações Webaplicações Web

• Desenvolvimento orientado a objetosDesenvolvimento orientado a objetos• Sistema fortementa tipado, classes, Sistema fortementa tipado, classes,

herança,polimorfismo, namespaces, eventos, herança,polimorfismo, namespaces, eventos, etc.etc.

• Portabilidade entre navegadoresPortabilidade entre navegadores• Não é necessário código específico para cada Não é necessário código específico para cada

navegadornavegador

• Bibliotecas tratam compatibilidade Bibliotecas tratam compatibilidade automaticamenteautomaticamente

ATLASATLAS

ATLASATLAS

• Comportamentos e componentesComportamentos e componentes• Auto-completion, drag and drop, popups, etcAuto-completion, drag and drop, popups, etc• Componentes que podem ser ligados a dados tão Componentes que podem ser ligados a dados tão

facilmente como controles nativos do .Netfacilmente como controles nativos do .Net

• Gerenciamento de chamadas remotasGerenciamento de chamadas remotas• Chamadas assíncronas via XMLHTTPChamadas assíncronas via XMLHTTP• Nenhuma ou poucas linhas de códigoNenhuma ou poucas linhas de código

• Modelo de programação similar ao ASP .NETModelo de programação similar ao ASP .NET

ATLAS em ação!ATLAS em ação!

ATLAS ToolkitATLAS Toolkit

• Coleção com controles prontos e Coleção com controles prontos e componentes para facilitar a criação de componentes para facilitar a criação de seus próprios controles para o ATLASseus próprios controles para o ATLAS

ATLAS Toolkit em ação!ATLAS Toolkit em ação!

DesvantagensDesvantagens

• Quando não utilizar AJAX/ATLASQuando não utilizar AJAX/ATLAS• Necessidade do back buttonNecessidade do back button

• Preenchimento de formulários, quando Preenchimento de formulários, quando houver chances do usuário perder a houver chances do usuário perder a informação de vistainformação de vista

• Transição entre páginas diferentesTransição entre páginas diferentes

• Atualizações muito grandes (lembre-se Atualizações muito grandes (lembre-se que o AJAX utiliza scripts no lado do que o AJAX utiliza scripts no lado do cliente)cliente)

DesvantagensDesvantagens

• ““Ah, vou manter esses 50000 registros Ah, vou manter esses 50000 registros no lado cliente e assim eu vou poder no lado cliente e assim eu vou poder paginas esse grid sem a necessidade paginas esse grid sem a necessidade de re-envio de informações!”de re-envio de informações!”

• Utilize o AJAX somente quando houver Utilize o AJAX somente quando houver algo a ganhar com isso.algo a ganhar com isso.

Back ButtonBack Button

• http://www.nikhilk.net/BackButtonSupport.aspxhttp://www.nikhilk.net/BackButtonSupport.aspx

• Atlas CTP Julho de 2006Atlas CTP Julho de 2006

• Atlas Controls Toolkits (11/04/06)Atlas Controls Toolkits (11/04/06)

• Último CTP a qualquer momento!Último CTP a qualquer momento!

• Versão final “fully suported” até o final Versão final “fully suported” até o final do ano!do ano!

• Totalmente integrado ao ORCAS, Totalmente integrado ao ORCAS, inclusive com Javascript Intellisenseinclusive com Javascript Intellisense

• E...E...

Últimas NovidadesÚltimas Novidades

Últimas NovidadesÚltimas Novidades

• O ATLAS não existe mais!O ATLAS não existe mais!

• Agora existe:Agora existe:• Microsoft ASP.Net 2.0 AJAX ExtensionsMicrosoft ASP.Net 2.0 AJAX Extensions

• Microsoft AJAX LibraryMicrosoft AJAX Library

• Microsoft ASP.Net AJAX Control ToolkitMicrosoft ASP.Net AJAX Control Toolkit

E o futuro?E o futuro?

• Existem outras iniciativas…Existem outras iniciativas…• Magic Ajax, SchwarzMagic Ajax, Schwarz

• Atlas é oficial da MicrosoftAtlas é oficial da Microsoft

• O site oficial provém recursosO site oficial provém recursos• TutoriaisTutoriais

• DocumentosDocumentos

• CódigosCódigos

• http://atlas.asp.nethttp://atlas.asp.net

DÚVIDAS & PERGUNTASDÚVIDAS & PERGUNTAS

PerguntasPerguntas

LINKS & RECURSOSLINKS & RECURSOS

• Atlas Web siteAtlas Web site• http://atlas.asp.nethttp://atlas.asp.net

• BlogsBlogs• http://www.nikhilk.nethttp://www.nikhilk.net

• http://weblogs.asp.net/scottguhttp://weblogs.asp.net/scottgu

• http://www.adrianobertucci.comhttp://www.adrianobertucci.com

• SitesSites• http://www.msdn.com.brhttp://www.msdn.com.br

• http://www.linhadecodigo.com.brhttp://www.linhadecodigo.com.br

• http://www.sapienssolucoes.com.brhttp://www.sapienssolucoes.com.br